mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
WIP for content#show and content#edit merge
This commit is contained in:
drusepth
parent
6a15c72ae8
commit
5a6545ab9e
BIN
app/assets/images/tristan/face.png
Normal file
BIN
app/assets/images/tristan/face.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
app/assets/images/tristan/portrait.png
Normal file
BIN
app/assets/images/tristan/portrait.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@ -19,6 +19,7 @@
|
||||
<%= render partial: 'content/tailwind_components/content_fields_display', locals: { content: @serialized_content } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activity feed -->
|
||||
<div class="bg-gray-50 pr-4 sm:pr-6 lg:pr-8 lg:flex-shrink-0 lg:border-l lg:border-gray-200 xl:pr-0">
|
||||
<div class="pl-6 lg:w-80 px-6 pt-6">
|
||||
|
||||
@ -15,23 +15,27 @@
|
||||
|
||||
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
|
||||
<% category[:fields].each do |field| %>
|
||||
<% next if field[:value].empty? %>
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 pt-4">
|
||||
<div class="pl-8">
|
||||
<label for="<%= field[:name] %>" class="block text-sm font-medium text-gray-700">
|
||||
<%= field[:label] %>
|
||||
</label>
|
||||
<div class="text-red-700 text-xs">(type: <%= field[:type] %>)</div>
|
||||
</div>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<%= field[:value] %>
|
||||
|
||||
<!-- field actions -->
|
||||
<ul class="text-sm mt-2 space-x-8 text-notebook-blue hidden">
|
||||
<li class="inline-block"><%= link_to 'Edit', '#' %></li>
|
||||
<li class="inline-block"><%= link_to 'Revise', '#' %></li>
|
||||
<li class="inline-block"><%= link_to 'Change field type', '#' %></li>
|
||||
</ul>
|
||||
<%=
|
||||
case field[:type]
|
||||
when 'name'
|
||||
render partial: 'content/tailwind_components/fields/name', locals: { field: field }
|
||||
when 'text_area', 'textarea'
|
||||
render partial: 'content/tailwind_components/fields/text', locals: { field: field }
|
||||
when 'link'
|
||||
render partial: 'content/tailwind_components/fields/link', locals: { field: field }
|
||||
when 'universe'
|
||||
render partial: 'content/tailwind_components/fields/universe', locals: { field: field }
|
||||
when 'tags'
|
||||
render partial: 'content/tailwind_components/fields/tags', locals: { field: field }
|
||||
end
|
||||
%>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="flex items-center">
|
||||
<h1 class="flex-1 text-lg font-medium">
|
||||
<span class="<%= Universe.text_color %>">
|
||||
<span class="<%= content.class_text_color %>">
|
||||
<%= content.name %>
|
||||
</span>
|
||||
<small class="ml-2 text-gray-500">
|
||||
@ -10,6 +10,14 @@
|
||||
</span>
|
||||
</small>
|
||||
</h1>
|
||||
<div class="mr-2">
|
||||
<button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="w-full bg-notebook-blue border border-notebook-blue rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-200 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
Edit mode
|
||||
</button>
|
||||
</div>
|
||||
<div data-controller="dropdown" class="relative">
|
||||
<button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="w-full bg-white border border-gray-300 rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
|
||||
<!-- Heroicon name: solid/sort-descending -->
|
||||
@ -25,11 +33,12 @@
|
||||
<!-- Dropdown menu, show/hide based on menu state. -->
|
||||
<div data-dropdown-target="menu" class="origin-top-right z-10 absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="sort-menu-button" tabindex="-1">
|
||||
<div class="py-1" role="none">
|
||||
<!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
|
||||
<a href="#" data-action="dropdown#toggle" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="sort-menu-item-0">Name</a>
|
||||
<a href="#" data-action="dropdown#toggle" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="sort-menu-item-1">Date modified</a>
|
||||
<a href="#" data-action="dropdown#toggle" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="sort-menu-item-2">Date created</a>
|
||||
</div>
|
||||
<% content.data[:categories].each do |category| %>
|
||||
<%= link_to '#', class: "text-gray-700 block px-4 py-2 text-sm bg-white hover:bg-gray-100", id: category[:id], data: { action: "dropdown#toggle" } do %>
|
||||
<i class="material-icons float-left <%= content.class_text_color %> mr-2"><%= category[:icon] %></i>
|
||||
<%= category[:label] %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,3 +1,3 @@
|
||||
<div class="flex bg-white border-gray-200 border-b">
|
||||
image banner
|
||||
<div class="flex <%= content.class_color %> border-gray-200 border-b">
|
||||
<span class="h-2"></span>
|
||||
</div>
|
||||
35
app/views/content/tailwind_components/fields/_link.html.erb
Normal file
35
app/views/content/tailwind_components/fields/_link.html.erb
Normal file
@ -0,0 +1,35 @@
|
||||
<% field[:value].each do |link_code| %>
|
||||
<%
|
||||
klass, id = link_code.split('-')
|
||||
%>
|
||||
|
||||
<%#
|
||||
In most cases, a user will be seeing their own content most of the time.
|
||||
This allows us to primarily rely on @current_user_content but fall back
|
||||
on js-load-page-name to fetch & load in post-page-load if the content isn't ours.
|
||||
%>
|
||||
<%
|
||||
content = if user_signed_in?
|
||||
@current_user_content.fetch(klass, []).detect do |page|
|
||||
page.page_type === klass && page.id === id.to_i
|
||||
end
|
||||
else
|
||||
nil
|
||||
end
|
||||
%>
|
||||
|
||||
<span
|
||||
data-klass="<%= klass %>"
|
||||
data-id="<%= id %>"
|
||||
class="<%= 'js-load-page-name' if content.nil? %> inline-flex items-center px-2.5 py-0.5 rounded-md font-medium bg-gray-100 hover:bg-gray-50 text-gray-800"
|
||||
>
|
||||
<%= link_to send("#{klass.downcase}_path", id) do %>
|
||||
<span class="<%= content_class_from_name(klass).text_color %>">
|
||||
<i class="material-icons float-left mr-2">
|
||||
<%= content_class_from_name(klass).icon %>
|
||||
</i>
|
||||
</span>
|
||||
<%= content.try(:name) || "<em>Loading #{klass}</em>".html_safe %>
|
||||
<% end %>
|
||||
</span>
|
||||
<% end %>
|
||||
@ -0,0 +1,3 @@
|
||||
<h1>
|
||||
<%= field[:value] %>
|
||||
</h1>
|
||||
11
app/views/content/tailwind_components/fields/_tags.html.erb
Normal file
11
app/views/content/tailwind_components/fields/_tags.html.erb
Normal file
@ -0,0 +1,11 @@
|
||||
<% field[:value].each do |tag| %>
|
||||
<span class="inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm bg-notebook-blue text-white">
|
||||
<%= tag %>
|
||||
<button type="button" class="flex-shrink-0 ml-2 h-4 w-4 rounded-full inline-flex items-center justify-center text-gray-100 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white">
|
||||
<span class="sr-only">Remove tag: <%= tag %></span>
|
||||
<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
|
||||
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
<% end %>
|
||||
@ -0,0 +1 @@
|
||||
<%= field[:value] %>
|
||||
@ -0,0 +1,26 @@
|
||||
<% klass, id = "Universe", field[:value] %>
|
||||
|
||||
<%
|
||||
content = if user_signed_in?
|
||||
@current_user_content.fetch(klass, []).detect do |page|
|
||||
page.page_type === klass && page.id === id.to_i
|
||||
end
|
||||
else
|
||||
nil
|
||||
end
|
||||
%>
|
||||
|
||||
<span
|
||||
data-klass="<%= klass %>"
|
||||
data-id="<%= id %>"
|
||||
class="<%= 'js-load-page-name' if content.nil? %> inline-flex items-center px-2.5 py-0.5 rounded-md font-medium bg-gray-100 hover:bg-gray-50 text-gray-800"
|
||||
>
|
||||
<%= link_to send("#{klass.downcase}_path", id) do %>
|
||||
<span class="<%= content_class_from_name(klass).text_color %>">
|
||||
<i class="material-icons float-left mr-2">
|
||||
<%= content_class_from_name(klass).icon %>
|
||||
</i>
|
||||
</span>
|
||||
<%= content.try(:name) || "<em>Loading #{klass}</em>".html_safe %>
|
||||
<% end %>
|
||||
</span>
|
||||
Loading…
Reference in New Issue
Block a user