mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
folder view polish
This commit is contained in:
Andrew Brown
parent
475aead01c
commit
372da9c869
@ -1,36 +1,119 @@
|
||||
<%# Usage: render partial: 'content/list/document_table', locals: { content_list: @content, content_type: @content_type_class } %>
|
||||
|
||||
<table class="highlight z-depth-1 js-content-cards-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Title</th>
|
||||
<th>Length</th>
|
||||
<th>Last edited</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<% content_list.each do |document| %>
|
||||
<tr class="white js-content-card-container hoverable modal-trigger" data-target="document-info-<%= document.id %>" style="cursor: pointer">
|
||||
<td class="center">
|
||||
<i class="material-icons medium <%= Document.color %>-text"><%= Document.icon %></i>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<% if content_list.any? %>
|
||||
<table class="highlight z-depth-1 js-content-cards-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Title</th>
|
||||
<th>Length</th>
|
||||
<th>Last edited</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<% content_list.each do |document| %>
|
||||
<tr class="white js-content-card-container hoverable modal-trigger" data-target="document-info-<%= document.id %>" style="cursor: pointer">
|
||||
<td class="center">
|
||||
<i class="material-icons medium <%= Document.color %>-text"><%= Document.icon %></i>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<% if user_signed_in? && document.user == current_user %>
|
||||
<i class="material-icons left orange-text"
|
||||
data-content-id="<%= document.id %>"
|
||||
data-content-class="<%= document.class.name.downcase.pluralize %>">
|
||||
<%= document.favorite? ? 'star' : 'star_border' %>
|
||||
</i>
|
||||
<% else %>
|
||||
<i class="material-icons left orange-text tooltipped" data-tooltip="This document has been shared with you.">folder_shared</i>
|
||||
<div>
|
||||
<% if user_signed_in? && document.user == current_user %>
|
||||
<i class="material-icons left orange-text"
|
||||
data-content-id="<%= document.id %>"
|
||||
data-content-class="<%= document.class.name.downcase.pluralize %>">
|
||||
<%= document.favorite? ? 'star' : 'star_border' %>
|
||||
</i>
|
||||
<% else %>
|
||||
<i class="material-icons left orange-text tooltipped" data-tooltip="This document has been shared with you.">folder_shared</i>
|
||||
<% end %>
|
||||
|
||||
<strong style="font-size: 1.2em" class="js-content-name">
|
||||
<%= document.title %>
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
<%= link_to document.user, class: "#{User.color}-text" do %>
|
||||
<i class="material-icons left"><%= User.icon %></i>
|
||||
by <%= document.user.display_name %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% if document.universe %>
|
||||
<div class="clearfix">
|
||||
<%= link_to document.universe, class: "#{Universe.color}-text" do %>
|
||||
<i class="material-icons left"><%= Universe.icon %></i>
|
||||
in <%= document.universe.try(:name) || 'Unknown universe' %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<strong style="font-size: 1.2em" class="js-content-name">
|
||||
<%= document.title %>
|
||||
</strong>
|
||||
<% if document.respond_to?(:page_tags) %>
|
||||
<p class="tags-container">
|
||||
<% document.page_tags.each do |tag| %>
|
||||
<% if user_signed_in? && document.user == current_user %>
|
||||
<%=
|
||||
link_to send(
|
||||
"page_tag_documents_path",
|
||||
slug: PageTagService.slug_for(tag.tag)
|
||||
) do
|
||||
%>
|
||||
<span class="new badge <%= params[:slug] == tag.slug ? 'orange' : Document.color %> left" data-badge-caption="<%= tag.tag %>"></span>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<span class="new badge <%= params[:slug] == tag.slug ? 'orange' : Document.color %> left" data-badge-caption="<%= tag.tag %>"></span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<i class="material-icons tiny" style="position: relative; top: 3px;">text_snippet</i>
|
||||
<%= pluralize document.word_count, 'word' %>
|
||||
</div>
|
||||
<div>
|
||||
<i class="material-icons tiny" style="position: relative; top: 3px;">timer</i>
|
||||
<%= document.reading_estimate %>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="tooltipped" data-tooltip="Last edited at <%= document.updated_at.strftime("%m/%d/%Y %H:%M UTC") %>">
|
||||
<%= document.updated_at == document.created_at ? 'created' : 'updated' %>
|
||||
<%= time_ago_in_words document.updated_at %> ago
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</table>
|
||||
|
||||
<%# Build info modals %>
|
||||
<% content_list.each do |document| %>
|
||||
<div id="document-info-<%= document.id %>" class="modal modal-fixed-footer">
|
||||
<div class="modal-content">
|
||||
<h4 class="<%= Document.color %>-text">
|
||||
<i class="material-icons left large"><%= Document.icon %></i>
|
||||
<%= document.title %>
|
||||
|
||||
<%
|
||||
if document.favorite?
|
||||
icon = 'star'
|
||||
action = 'Unfavorite'
|
||||
else
|
||||
icon = 'star_border'
|
||||
action = 'Favorite'
|
||||
end
|
||||
%>
|
||||
|
||||
<% if user_signed_in? && document.user == current_user %>
|
||||
<i class="material-icons right orange-text favorite-button tooltipped"
|
||||
data-tooltip="<%= action %> this page"
|
||||
data-content-id="<%= document.id %>"
|
||||
data-content-class="<%= document.class.name.downcase.pluralize %>">
|
||||
<%= icon %>
|
||||
</i>
|
||||
<% end %>
|
||||
</h4>
|
||||
<div class="left">
|
||||
<div>
|
||||
<%= link_to document.user, class: "#{User.color}-text" do %>
|
||||
<i class="material-icons left"><%= User.icon %></i>
|
||||
@ -45,231 +128,175 @@
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if document.respond_to?(:page_tags) %>
|
||||
<p class="tags-container">
|
||||
<% document.page_tags.each do |tag| %>
|
||||
<% if user_signed_in? && document.user == current_user %>
|
||||
<%=
|
||||
link_to send(
|
||||
"page_tag_documents_path",
|
||||
slug: PageTagService.slug_for(tag.tag)
|
||||
) do
|
||||
%>
|
||||
<span class="new badge <%= params[:slug] == tag.slug ? 'orange' : Document.color %> left" data-badge-caption="<%= tag.tag %>"></span>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<span class="new badge <%= params[:slug] == tag.slug ? 'orange' : Document.color %> left" data-badge-caption="<%= tag.tag %>"></span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<i class="material-icons tiny" style="position: relative; top: 3px;">text_snippet</i>
|
||||
<%= pluralize document.word_count, 'word' %>
|
||||
</div>
|
||||
<div>
|
||||
<i class="material-icons tiny" style="position: relative; top: 3px;">timer</i>
|
||||
<%= document.reading_estimate %>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="tooltipped" data-tooltip="Last edited at <%= document.updated_at.strftime("%m/%d/%Y %H:%M UTC") %>">
|
||||
<%= document.updated_at == document.created_at ? 'created' : 'updated' %>
|
||||
<%= time_ago_in_words document.updated_at %> ago
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</table>
|
||||
|
||||
<%# Build info modals %>
|
||||
<% content_list.each do |document| %>
|
||||
<div id="document-info-<%= document.id %>" class="modal modal-fixed-footer">
|
||||
<div class="modal-content">
|
||||
<h4 class="<%= Document.color %>-text">
|
||||
<i class="material-icons left large"><%= Document.icon %></i>
|
||||
<%= document.title %>
|
||||
|
||||
<%
|
||||
if document.favorite?
|
||||
icon = 'star'
|
||||
action = 'Unfavorite'
|
||||
else
|
||||
icon = 'star_border'
|
||||
action = 'Favorite'
|
||||
end
|
||||
%>
|
||||
|
||||
<% if user_signed_in? && document.user == current_user %>
|
||||
<i class="material-icons right orange-text favorite-button tooltipped"
|
||||
data-tooltip="<%= action %> this page"
|
||||
data-content-id="<%= document.id %>"
|
||||
data-content-class="<%= document.class.name.downcase.pluralize %>">
|
||||
<%= icon %>
|
||||
</i>
|
||||
<% end %>
|
||||
</h4>
|
||||
<div class="left">
|
||||
<div>
|
||||
<%= link_to document.user, class: "#{User.color}-text" do %>
|
||||
<i class="material-icons left"><%= User.icon %></i>
|
||||
by <%= document.user.display_name %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% if document.universe %>
|
||||
<div class="clearfix">
|
||||
<%= link_to document.universe, class: "#{Universe.color}-text" do %>
|
||||
<i class="material-icons left"><%= Universe.icon %></i>
|
||||
in <%= document.universe.try(:name) || 'Unknown universe' %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="clearfix row">
|
||||
<%= form_for document, remote: true do |f| %>
|
||||
<div class="col s12 m12 l4">
|
||||
<!--
|
||||
<%= link_to analysis_document_path(document) do %>
|
||||
<div class="card-panel orange white-text hoverable uppercase">
|
||||
<i class="material-icons left">bar_chart</i>
|
||||
Analyze
|
||||
</div>
|
||||
<% end %>
|
||||
-->
|
||||
|
||||
<h5>Folder</h5>
|
||||
<% if current_user.can_update?(document) %>
|
||||
<%=
|
||||
f.select :folder_id, current_user.folders.pluck(:title, :id),
|
||||
{ include_blank: 'No folder' },
|
||||
{ class: ' autosave-closest-form-on-change' }
|
||||
%>
|
||||
<style>
|
||||
.dropdown-content {
|
||||
max-height: 350px;
|
||||
}
|
||||
</style>
|
||||
<% else %>
|
||||
<% if document.folder_id %>
|
||||
<%= link_to document.folder.title, document.folder, class: "#{Folder.color}-text" %>
|
||||
<% else %>
|
||||
Not in a folder
|
||||
<div class="clearfix row">
|
||||
<%= form_for document, remote: true do |f| %>
|
||||
<div class="col s12 m12 l4">
|
||||
<!--
|
||||
<%= link_to analysis_document_path(document) do %>
|
||||
<div class="card-panel orange white-text hoverable uppercase">
|
||||
<i class="material-icons left">bar_chart</i>
|
||||
Analyze
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
-->
|
||||
|
||||
<h5>About</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<i class="material-icons tiny" style="position: relative; top: 3px;">text_snippet</i>
|
||||
<%= pluralize document.word_count, 'word' %>
|
||||
</li>
|
||||
<li>
|
||||
<i class="material-icons tiny" style="position: relative; top: 3px;">timer</i>
|
||||
<%= document.reading_estimate %>
|
||||
</li>
|
||||
<li>
|
||||
<i class="material-icons tiny" style="position: relative; top: 3px;">history</i>
|
||||
created <%= time_ago_in_words document.created_at %> ago
|
||||
</li>
|
||||
<% if document.created_at != document.updated_at %>
|
||||
<h5>Folder</h5>
|
||||
<% if current_user.can_update?(document) %>
|
||||
<%=
|
||||
f.select :folder_id, current_user.folders.pluck(:title, :id),
|
||||
{ include_blank: 'No folder' },
|
||||
{ class: ' autosave-closest-form-on-change' }
|
||||
%>
|
||||
<style>
|
||||
.dropdown-content {
|
||||
max-height: 350px;
|
||||
}
|
||||
</style>
|
||||
<% else %>
|
||||
<% if document.folder_id %>
|
||||
<%= link_to document.folder.title, document.folder, class: "#{Folder.color}-text" %>
|
||||
<% else %>
|
||||
Not in a folder
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<h5>About</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<i class="material-icons tiny" style="position: relative; top: 3px;">text_snippet</i>
|
||||
<%= pluralize document.word_count, 'word' %>
|
||||
</li>
|
||||
<li>
|
||||
<i class="material-icons tiny" style="position: relative; top: 3px;">timer</i>
|
||||
<%= document.reading_estimate %>
|
||||
</li>
|
||||
<li>
|
||||
<i class="material-icons tiny" style="position: relative; top: 3px;">history</i>
|
||||
last updated <%= time_ago_in_words document.updated_at %> ago
|
||||
created <%= time_ago_in_words document.created_at %> ago
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% if document.created_at != document.updated_at %>
|
||||
<li>
|
||||
<i class="material-icons tiny" style="position: relative; top: 3px;">history</i>
|
||||
last updated <%= time_ago_in_words document.updated_at %> ago
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
<h5>Actions</h5>
|
||||
<ul>
|
||||
<li><%= link_to 'View Revision log', document_document_revisions_path(document) %><br /><br /></li>
|
||||
<li><%= link_to 'View plaintext', plaintext_document_path(document) %></li>
|
||||
</ul>
|
||||
-->
|
||||
</div>
|
||||
<!--
|
||||
<h5>Actions</h5>
|
||||
<ul>
|
||||
<li><%= link_to 'View Revision log', document_document_revisions_path(document) %><br /><br /></li>
|
||||
<li><%= link_to 'View plaintext', plaintext_document_path(document) %></li>
|
||||
</ul>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="col s12 m12 l8" style="padding-right: 1em">
|
||||
<% if current_user.can_update?(document) %>
|
||||
<div class="content-field">
|
||||
<h5>Document synopsis</h5>
|
||||
<div class="input-field">
|
||||
<%= f.text_area :synopsis, class: 'materialize-textarea autosave-closest-form-on-change', placeholder: 'What happens in this document?' %>
|
||||
<span class="helper-text">Changes will automatically save.</span>
|
||||
<div class="col s12 m12 l8" style="padding-right: 1em">
|
||||
<% if current_user.can_update?(document) %>
|
||||
<div class="content-field">
|
||||
<h5>Document synopsis</h5>
|
||||
<div class="input-field">
|
||||
<%= f.text_area :synopsis, class: 'materialize-textarea autosave-closest-form-on-change', placeholder: 'What happens in this document?' %>
|
||||
<span class="helper-text">Changes will automatically save.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-field">
|
||||
<h5>Document notes</h5>
|
||||
<div class="input-field">
|
||||
<%= f.text_area :notes_text, class: 'materialize-textarea autosave-closest-form-on-change', placeholder: "Write as little or as much as you'd like!" %>
|
||||
<span class="helper-text">Changes will automatically save. These notes will be available while writing.</span>
|
||||
<div class="content-field">
|
||||
<h5>Document notes</h5>
|
||||
<div class="input-field">
|
||||
<%= f.text_area :notes_text, class: 'materialize-textarea autosave-closest-form-on-change', placeholder: "Write as little or as much as you'd like!" %>
|
||||
<span class="helper-text">Changes will automatically save. These notes will be available while writing.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Document tags</h5>
|
||||
<%=
|
||||
render partial: 'content/form/field_types/tags', locals: {
|
||||
f: f,
|
||||
page: document,
|
||||
field: AttributeField.new
|
||||
}
|
||||
%>
|
||||
<% else %>
|
||||
<h5>Document synopsis</h5>
|
||||
<% if document.synopsis %>
|
||||
<%= simple_format ContentFormatterService.show(
|
||||
text: document.synopsis,
|
||||
viewing_user: current_user
|
||||
) %>
|
||||
<% else %>
|
||||
<em>None yet</em>
|
||||
<% end %>
|
||||
|
||||
<h5>Document notes</h5>
|
||||
<% if document.notes_text %>
|
||||
<%= simple_format ContentFormatterService.show(
|
||||
text: document.notes_text,
|
||||
viewing_user: current_user
|
||||
) %>
|
||||
<% else %>
|
||||
<em>None yet</em>
|
||||
<% end %>
|
||||
|
||||
<% if document.page_tags.any? %>
|
||||
<h5>Document tags</h5>
|
||||
<%=
|
||||
render partial: "content/display/attribute_value/tags",
|
||||
locals: { value: document.page_tags.pluck(:tag), content: document }
|
||||
render partial: 'content/form/field_types/tags', locals: {
|
||||
f: f,
|
||||
page: document,
|
||||
field: AttributeField.new
|
||||
}
|
||||
%>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<h5>Document synopsis</h5>
|
||||
<% if document.synopsis %>
|
||||
<%= simple_format ContentFormatterService.show(
|
||||
text: document.synopsis,
|
||||
viewing_user: current_user
|
||||
) %>
|
||||
<% else %>
|
||||
<em>None yet</em>
|
||||
<% end %>
|
||||
|
||||
<% end %>
|
||||
</div>
|
||||
<h5>Document notes</h5>
|
||||
<% if document.notes_text %>
|
||||
<%= simple_format ContentFormatterService.show(
|
||||
text: document.notes_text,
|
||||
viewing_user: current_user
|
||||
) %>
|
||||
<% else %>
|
||||
<em>None yet</em>
|
||||
<% end %>
|
||||
|
||||
<% if document.page_tags.any? %>
|
||||
<h5>Document tags</h5>
|
||||
<%=
|
||||
render partial: "content/display/attribute_value/tags",
|
||||
locals: { value: document.page_tags.pluck(:tag), content: document }
|
||||
%>
|
||||
<% end %>
|
||||
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<% if current_user.can_read?(document) %>
|
||||
<%= link_to polymorphic_path(document), class: 'blue white-text text-lighten-1 btn hoverable' do %>
|
||||
<i class="material-icons left"><%= content_type.icon %></i>
|
||||
View
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% if current_user.can_update?(document) %>
|
||||
<%= link_to edit_polymorphic_path(document), class: 'green white-text btn hoverable', target: document.is_a?(Document) ? '_new' : '_self' do %>
|
||||
<i class="material-icons left"><%= content_type.icon %></i>
|
||||
Edit
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% if current_user.can_update?(document) %>
|
||||
<%= link_to analysis_document_path(document), class: 'orange white-text btn left hoverable', target: document.is_a?(Document) ? '_new' : '_self' do %>
|
||||
<i class="material-icons left">bar_chart</i>
|
||||
Analyze
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<% if current_user.can_read?(document) %>
|
||||
<%= link_to polymorphic_path(document), class: 'blue white-text text-lighten-1 btn hoverable' do %>
|
||||
<i class="material-icons left"><%= content_type.icon %></i>
|
||||
View
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% if current_user.can_update?(document) %>
|
||||
<%= link_to edit_polymorphic_path(document), class: 'green white-text btn hoverable', target: document.is_a?(Document) ? '_new' : '_self' do %>
|
||||
<i class="material-icons left"><%= content_type.icon %></i>
|
||||
Edit
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% if current_user.can_update?(document) %>
|
||||
<%= link_to analysis_document_path(document), class: 'orange white-text btn left hoverable', target: document.is_a?(Document) ? '_new' : '_self' do %>
|
||||
<i class="material-icons left">bar_chart</i>
|
||||
Analyze
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
|
||||
<div class="row">
|
||||
<div class="col s12 m8 offset-m2">
|
||||
<div class="hoverable card center" style="margin: 50px 0; padding: 50px 0; border-bottom: 10px solid <%= Document.hex_color %>">
|
||||
<h4>
|
||||
You haven't created any documents
|
||||
<% if @universe_scope %>in the <%= link_to @universe_scope.name, @universe_scope, class: Universe.color + "-text" %> universe<% end %>
|
||||
<% if @folder %>in this folder<% end %>
|
||||
yet!
|
||||
</h4>
|
||||
<h1>
|
||||
<i class="material-icons <%= Document.color %>-text" style="font-size: 200%">
|
||||
<%= Document.icon %>
|
||||
</i>
|
||||
</h1>
|
||||
<p>
|
||||
You can create an unlimited number of documents with no limits on length. Enjoy!
|
||||
</p>
|
||||
<br />
|
||||
<%= link_to "Create your first document", new_document_path, target: '_blank', class: "btn #{Document.color}" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% end %>
|
||||
@ -29,7 +29,7 @@
|
||||
<%= render partial: 'folders/list', locals: { folders: @child_folders } %>
|
||||
|
||||
<div class="row">
|
||||
<%= render partial: 'content/components/list_filter_bar', locals: { content_type: Document } %>
|
||||
<%= render partial: 'content/components/list_filter_bar', locals: { content_type: Document } if @content.any? %>
|
||||
<%= render partial: 'content/list/document_table', locals: { content_list: @content, content_type: Document } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user