spina 1.2.0 → 2.0.0.alpha

data/app/views/spina/admin/accounts/_form.html.haml

@@ -7,42 +7,48 @@
         = icon('check')
         = t('spina.preferences.account_save')
 
-  .well
+  %div{style: "margin-top: 40px"}
     .horizontal-form
       .horizontal-form-group
         .horizontal-form-label
           = Spina::Account.human_attribute_name(:name)
         .horizontal-form-content
-          = f.text_field :name, placeholder: Spina::Account.human_attribute_name(:name)
+          .page-form-control
+            = f.text_field :name, placeholder: Spina::Account.human_attribute_name(:name)
 
       .horizontal-form-group
         .horizontal-form-label
           = Spina::Account.human_attribute_name(:address)
         .horizontal-form-content
-          = f.text_field :address, placeholder: Spina::Account.human_attribute_name(:address)
+          .page-form-control
+            = f.text_field :address, placeholder: Spina::Account.human_attribute_name(:address)
 
       .horizontal-form-group
         .horizontal-form-label
           = Spina::Account.human_attribute_name(:postal_code)
         .horizontal-form-content
-          = f.text_field :postal_code, placeholder: Spina::Account.human_attribute_name(:postal_code)
+          .page-form-control
+            = f.text_field :postal_code, placeholder: Spina::Account.human_attribute_name(:postal_code)
 
       .horizontal-form-group
         .horizontal-form-label
           = Spina::Account.human_attribute_name(:city)
         .horizontal-form-content
-          = f.text_field :city, placeholder: Spina::Account.human_attribute_name(:city)
+          .page-form-control
+            = f.text_field :city, placeholder: Spina::Account.human_attribute_name(:city)
 
       .horizontal-form-group
         .horizontal-form-label
           = Spina::Account.human_attribute_name(:phone)
         .horizontal-form-content
-          = f.text_field :phone, placeholder: Spina::Account.human_attribute_name(:phone)
+          .page-form-control
+            = f.text_field :phone, placeholder: Spina::Account.human_attribute_name(:phone)
 
       .horizontal-form-group
         .horizontal-form-label
           = Spina::Account.human_attribute_name(:email)
         .horizontal-form-content
-          = f.text_field :email, placeholder: Spina::Account.human_attribute_name(:email)
+          .page-form-control
+            = f.text_field :email, placeholder: Spina::Account.human_attribute_name(:email)
 
   

data/app/views/spina/admin/accounts/analytics.html.haml

@@ -7,7 +7,7 @@
         = icon('check')
         = t('spina.preferences.analytics_save')
 
-  .well
+  %div{style: "margin-top: 40px"}
     .horizontal-form
       .horizontal-form-group
         .horizontal-form-label
@@ -18,9 +18,11 @@
         .horizontal-form-label
           = Spina::Account.human_attribute_name(:google_analytics)
         .horizontal-form-content
-          = f.text_field :google_analytics, placeholder: Spina::Account.human_attribute_name(:google_analytics)
+          .page-form-control
+            = f.text_field :google_analytics, placeholder: Spina::Account.human_attribute_name(:google_analytics)
       .horizontal-form-group
         .horizontal-form-label
           = Spina::Account.human_attribute_name(:google_site_verification)
         .horizontal-form-content
-          = f.text_field :google_site_verification, placeholder: Spina::Account.human_attribute_name(:google_site_verification)
+          .page-form-control
+            = f.text_field :google_site_verification, placeholder: Spina::Account.human_attribute_name(:google_site_verification)

data/app/views/spina/admin/accounts/style.html.haml

@@ -1,30 +1,35 @@
 = form_for [spina, :admin, current_account], url: spina.admin_account_path do |f|
   %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+    .breadcrumbs
+      = render_breadcrumbs separator: '<div class="divider"></div>'
+      %span{style: 'margin-left: 10px'}
+        - if Spina.config.locales.size > 1
+          %div{style: "display: inline-block", data: {dropdown: true}}
+            = link_to '#', class: 'button button-default button-small', style: 'margin-left: 0; margin-right: 0', data: {trigger: 'dropdown', target: '#locales'} do
+              = icon('comment')
+              =t "spina.languages.#{@locale}"
+              %i.icon.icon-chevron-down{style: 'font-size: 9px; margin-right: 0'}
+
+            %ul#locales
+              - Spina.config.locales.each do |locale|
+                %li
+                  = link_to t("spina.languages.#{locale}"), "?locale=#{locale}", style: ('font-weight: 600' if @locale.to_s == locale.to_s).to_s
 
     #header_actions
       %button.button.button-primary{type: 'submit', data: {icon: 'o'}}
         = icon('check')
         = t('spina.preferences.style_save')
 
-  .well
-    .horizontal-form
-      .horizontal-form-group
-        .horizontal-form-label
-          = Spina::Account.human_attribute_name(:theme)
-        .horizontal-form-content
-          .select-dropdown.account-theme{data: {layout_parts: current_theme.layout_parts.map{|layout_part| layout_part[:name]}}}
-            - options = options_for_select(::Spina::Theme.all.map { |theme| [theme.name, theme.name, {'data-layout-parts' => theme.layout_parts.map{|layout_part| layout_part[:name] }}] }, current_account.theme)
-            = f.select :theme, options
-
-      = f.fields_for :layout_parts do |ff|
-        .horizontal-form-group.layout-part{data: {name: ff.object.name}}
-          .horizontal-form-label
-            = ff.object.title
-          .horizontal-form-content
-            = ff.hidden_field :id
-            = ff.hidden_field :title
-            = ff.hidden_field :layout_partable_type
-            = ff.hidden_field :name
+  .page-form
+    .page-form-group
+      .page-form-label= Spina::Account.human_attribute_name(:theme)
+      .page-form-control
+        .select-dropdown= f.select :theme, Spina::Theme.all.map(&:name)
 
-            = render "spina/admin/layout_partables/#{ partable_type_partial_namespace(ff.object.layout_partable_type) }/form", f: ff
+    = f.fields_for "#{@locale}_content".to_sym, build_parts(f.object, current_theme.layout_parts) do |ff|
+      = ff.hidden_field :type, value: ff.object.class
+      = ff.hidden_field :name
+      = ff.hidden_field :title
+      
+      .page-form-group.page-part{data: {name: ff.object.name}}
+        = render "spina/admin/parts/#{parts_partial_namespace(ff.object.class.to_s)}/form", f: ff

data/app/views/spina/admin/images/index.html.haml

@@ -1,12 +1,14 @@
 - content_for(:header_actions) do
   - if @media_folders.any?
-    = link_to '#', class: 'button organize-switch', data: {organize_images: t('spina.photos.organize'), done_organizing: t('spina.photos.done_organizing')} do
-      = icon('random')
-      = t('spina.photos.organize')
+    = link_to '#', class: 'button button-default organize-switch', data: {organize_images: t('spina.photos.organize'), done_organizing: t('spina.photos.done_organizing')} do
+      .button-content
+        = icon('random')
+        = t('spina.photos.organize')
 
   = link_to new_admin_media_folder_path, class: 'button button-primary', style: 'margin-right: 0; margin-left: 4px', data: {remote: true} do
-    = icon('plus')
-    =t 'spina.photos.new_folder'
+    .button-content
+      = icon('plus')
+      =t 'spina.photos.new_folder'
 
 .gallery-container
   .gallery

data/app/views/spina/admin/media_folders/show.html.haml

@@ -1,6 +1,6 @@
 - content_for(:header_actions) do
-  = link_to t('spina.photos.rename_folder'), spina.edit_admin_media_folder_path(@media_folder), class: 'button', data: {remote: true}
-  = link_to t('spina.photos.delete_folder'), spina.admin_media_folder_path(@media_folder), class: 'button button-danger', style: "margin-right: 0", data: {method: :delete, confirm: t('spina.delete_confirmation', subject: @media_folder.name)}
+  = link_to t('spina.photos.rename_folder'), spina.edit_admin_media_folder_path(@media_folder), class: 'button button-default', data: {remote: true}
+  = link_to t('spina.photos.delete_folder'), spina.admin_media_folder_path(@media_folder), class: 'button button-default button-danger', style: "margin-right: 0", data: {method: :delete, confirm: t('spina.delete_confirmation', subject: @media_folder.name)}
 
 .gallery-container
   .gallery

data/app/views/spina/admin/media_picker/_image.html.haml

@@ -0,0 +1,3 @@
+%label.media-picker-image{data: {target: "media-picker.image"}}
+  = check_box_tag :image_id, image.id, image.id.in?(selected_ids), data: {action: "media-picker#choose", image_id: image.id, signed_blob_id: image.file.blob.signed_id, thumbnail_url: thumbnail_url(image), full_image_url: main_app.url_for(image.file), filename: image.file.filename}
+  %span= image_tag thumbnail_url(image)

data/app/views/spina/admin/media_picker/_media_picker.html.haml

@@ -0,0 +1,32 @@
+.modal-container{data: {controller: "modal media-picker infinite-scroll", mode: @mode}}
+  .modal.modal-large{data: {target: "infinite-scroll.scrollContainer"}}
+    %header
+      = button_tag type: :default, class: 'modal-close-cross', data: {action: "modal#close"} do
+        = icon('cross')
+      - if @mode == "multiple"
+        %h3=t "spina.images.choose_images"
+      - else
+        %h3=t "spina.images.choose_image"
+    %section.media-picker
+      = hidden_field_tag :input, params[:input], data: {target: "media-picker.input"}
+  
+      %div{data: {target: "media-picker.grid"}}
+        = render 'media_picker_grid'
+
+    - if @mode == "trix"
+      %section.media-picker-footer
+        = text_field_tag :alt, nil, placeholder: "✍️ Alt", data: {target: "media-picker.alt"}
+        = text_field_tag :link_to_url, nil, placeholder: "🔗 Link to URL", data: {target: "media-picker.linkToUrl"}
+
+        = button_tag type: :button, class: 'pull-right button button-primary', data: {action: "media-picker#insert_trix"} do
+          =t "spina.images.insert_image"
+
+    - if @mode == "multiple"
+      %section.media-picker-footer
+        .media-picker-selected-images{data: {target: "media-picker.selectedImages"}}
+          - @selected_images.each do |image|
+            = image_tag thumbnail_url(image), data: {target: "media-picker.selectedImage", image_id: image.id, signed_blob_id: image.file.blob.signed_id}
+
+        = button_tag type: :button, class: 'pull-right button button-primary', data: {action: "media-picker#choose_multiple"} do
+          =t "spina.images.confirm_selection"
+          %span{data: {target: "media-picker.selectedCount"}} (#{@selected_images.size})

data/app/views/spina/admin/media_picker/_media_picker_grid.html.haml

@@ -0,0 +1,25 @@
+.media-picker-grid#media_picker_grid
+  - if @media_folder.present?
+    = link_to spina.admin_media_picker_path, class: 'media-folder', data: {action: "media-picker#openFolder"} do
+      .media-folder-thumbnail
+        .media-folder-placeholder
+          %i.icon.icon-picture-o
+        .media-folder-shadow
+      .media-folder-name=t "spina.images.all_images"
+  - else
+    = form_with model: Spina::Image.new, url: admin_images_path, data: {action: "ajax:success->media-picker#refresh ajax:before->media-picker#startUpload", media_picker_url: spina.admin_media_picker_path} do |f|
+      .media-picker-uploader
+        = f.file_field :files, multiple: true, accept: "image/*", data: {direct_upload_url: main_app.rails_direct_uploads_url}
+        = f.submit
+
+    - @media_folders.each do |media_folder|
+      = link_to spina.admin_media_picker_path(media_folder_id: media_folder.id), class: 'media-folder', data: {action: "media-picker#openFolder"} do
+        .media-folder-thumbnail{data: {badge: media_folder.images.size}}
+          = image_tag variant(media_folder.images.last.file, resize: '144x144^', crop: "144x144+0+0")
+          .media-folder-shadow
+        .media-folder-name= media_folder.name
+
+  = render partial: 'image', collection: @images
+
+.media-picker-pagination
+  = link_to_next_page @images, "Next", data: {remote: true, target: "infinite-scroll.link"}

data/app/views/spina/admin/media_picker/infinite_scroll.js.erb

@@ -1,5 +1,5 @@
-// Append new data
-$("<%=j render partial: 'spina/admin/images/image', collection: @images %>").appendTo($(".infinite-scroll"));
+document.querySelector(".media-picker-grid").insertAdjacentHTML("beforeend", "<%=j render partial: 'image', collection: @images %>")
 
-// Update pagination link
-$('.infinite-pagination').html("<%= j link_to_next_page @images, 'Next', params: params.slice(:selected_photo_id).permit(:selected_photo_id), remote: true, data: {target: 'infinite-scroll.link'} %>")
+document.querySelector(".media-picker-pagination").innerHTML = "<%=j link_to_next_page @images, 'Next', data: {remote: true, target: 'infinite-scroll.link'} %>"
+
+document.querySelector(".modal-container").infiniteScroll.loadNextPage()

data/app/views/spina/admin/media_picker/select.js.erb

@@ -4,6 +4,8 @@ hidden_input.val("");
 
 <% if @image.present? %>
   hidden_input.parents('.media_picker').append("<%=j render partial: 'spina/admin/images/image', object: @image, locals: {simple: true} %>");
+  hidden_input.parents('[data-controller="image-form"]').find(".image img").remove();
+  hidden_input.parents('[data-controller="image-form"]').find(".image")[0].insertAdjacentHTML("beforeend", `<%=j image_tag variant(@image.file, resize: "400x300^", crop: "400x300+0+0"), width: 200, height: 150 %>`)
   hidden_input.val("<%= @image.id %>");
 
   // Trix editor

data/app/views/spina/admin/media_picker/show.html.haml

@@ -0,0 +1 @@
+= render partial: 'media_picker_grid'

data/app/views/spina/admin/media_picker/show.js.erb

@@ -1 +1 @@
-$("<%=j render partial: 'modal', locals: {multiple: params[:multiple]} %>").modal();
+document.querySelector('body').insertAdjacentHTML("beforeend", "<%=j render partial: 'media_picker' %>")

data/app/views/spina/admin/pages/_form.html.haml

@@ -1,6 +1,6 @@
 - if @page.errors.any?
   - content_for :notifications do
-    .notification.notification-danger.animated.fadeInRight
+    .notification.notification-danger.animated.fadeInLeft
       = icon('exclamation')
       .notification-message
         =t 'spina.notifications.alert'
@@ -16,17 +16,18 @@
         - unless @page.new_record?
           - if Spina.config.locales.size > 1
             %div{style: "display: inline-block", data: {dropdown: true}}
-              = link_to '#', class: 'button button-hollow button-small', style: 'margin-left: 0; margin-right: 0', data: {trigger: 'dropdown', target: '#locales'} do
-                = icon('comment')
-                =t "spina.languages.#{@locale}"
-                %i.icon.icon-chevron-down{style: 'font-size: 9px; margin-right: 0'}
+              = link_to '#', class: 'button button-default button-small', style: 'margin-left: 0; margin-right: 0', data: {trigger: 'dropdown', target: '#locales'} do
+                .button-content
+                  = icon('comment')
+                  =t "spina.languages.#{@locale}"
+                  %i.icon.icon-chevron-down{style: 'font-size: 9px; margin-right: 0; margin-left: 5px'}
 
               %ul#locales
                 - Spina.config.locales.each do |locale|
                   %li
                     = link_to t("spina.languages.#{locale}"), "?locale=#{locale}", style: ('font-weight: 600' if @locale.to_s == locale.to_s).to_s
 
-        = link_to @page.materialized_path, target: :blank, class: 'button button-hollow button-small', style: 'margin-left: 0' do
+        = link_to @page.materialized_path, target: :blank, class: 'button button-default button-small', style: 'margin-left: 0' do
           %i.icon.icon-export{style: 'margin: 0'}
 
     #header_actions
@@ -47,4 +48,5 @@
       = render "spina/admin/pages/form_#{tab}", f: f
 
   - unless @page.new_record? || !@page.deletable
-    .pull-right= link_to t('spina.permanently_delete'), spina.admin_page_path(@page), method: :delete, data: {confirm: t('spina.pages.delete_confirmation', subject: @page.menu_title)}, class: 'button button-link button-danger'
+    .text-right{style: "margin-top: 60px"}
+      = link_to t('spina.permanently_delete'), spina.admin_page_path(@page), method: :delete, data: {confirm: t('spina.pages.delete_confirmation', subject: @page.menu_title)}, class: 'button button-default button-small button-danger', style: 'margin: 0'

data/app/views/spina/admin/pages/_form_advanced.html.haml

@@ -1,6 +1,6 @@
 #advanced.tab-content
   .horizontal-form
-    .well
+    %div{style: "margin: 40px 0"}
       .horizontal-form-group
         .horizontal-form-label
           = Spina::Page.human_attribute_name :draft
@@ -17,7 +17,8 @@
         .horizontal-form-label
           = Spina::Page.human_attribute_name :menu_title
         .horizontal-form-content
-          = f.text_field :menu_title, placeholder: Spina::Page.human_attribute_name(:show_in_menu_placeholder), value: f.object.menu_title(fallback: false, default: nil)
+          .page-form-control
+            = f.text_field :menu_title, placeholder: Spina::Page.human_attribute_name(:show_in_menu_placeholder), value: f.object.menu_title(fallback: false, default: nil)
       .horizontal-form-group
         .horizontal-form-label
           = Spina::Page.human_attribute_name :skip_to_first_child
@@ -25,15 +26,14 @@
         .horizontal-form-content
           = f.check_box :skip_to_first_child, data: {switch: true}
 
-    .well
       .horizontal-form-group
         .horizontal-form-label
           = Spina::Page.human_attribute_name :link_url
           %small= Spina::Page.human_attribute_name :link_url_description
         .horizontal-form-content
-          = f.text_field :link_url, placeholder: Spina::Page.human_attribute_name(:link_url_placeholder)
+          .page-form-control
+            = f.text_field :link_url, placeholder: Spina::Page.human_attribute_name(:link_url_placeholder)
 
-    .well
       - unless @page.resource.present?
         .horizontal-form-group
           .horizontal-form-label

data/app/views/spina/admin/pages/_form_page_content.html.haml

@@ -1,16 +1,17 @@
-#page_content.tab-content.active.well
-  .horizontal-form
-    .horizontal-form-group
-      .horizontal-form-label
-        = Spina::Page.human_attribute_name :title
-      .horizontal-form-content
-        = f.text_field :title, placeholder: Spina::Page.human_attribute_name(:title_placeholder)
+#page_content.tab-content.active
 
-    = f.fields_for :page_parts, @page_parts.sort { |a,b| a.position(current_theme) <=> b.position(current_theme) } do |ff|
-      = ff.hidden_field :id
-      = ff.hidden_field :title
-      = ff.hidden_field :page_partable_type
+  .page-form
+    .page-form-group
+      .page-form-label= Spina::Page.human_attribute_name :title
+      .page-form-control
+        = f.text_field :title, placeholder: Spina::Page.human_attribute_name(:title_placeholder), class: 'input-large'
+
+    - parts = (current_theme.view_templates.find{|v|v[:name].to_s == f.object.view_template.to_s}&.dig(:parts) || [])
+
+    = f.fields_for "#{@locale}_content".to_sym, build_parts(f.object, parts) do |ff|
+      = ff.hidden_field :type, value: ff.object.class
       = ff.hidden_field :name
+      = ff.hidden_field :title
 
-      .horizontal-form-group.page-part{data: {name: ff.object.name}}
-        = render "spina/admin/partables/#{ partable_type_partial_namespace(ff.object.page_partable_type) }/form", f: ff
+      .page-form-group.page-part{data: {name: ff.object.name}}
+        = render "spina/admin/parts/#{parts_partial_namespace(ff.object.class.to_s)}/form", f: ff

data/app/views/spina/admin/pages/_form_page_seo.html.haml

@@ -1,28 +1,32 @@
-#page_seo.tab-content.well
+#page_seo.tab-content{style: "margin-top: 40px"}
   .horizontal-form
     .horizontal-form-group
       .horizontal-form-label
         = Spina::Page.human_attribute_name :seo_title
       .horizontal-form-content
-        = f.text_field :seo_title, placeholder: Spina::Page.human_attribute_name(:seo_title_placeholder), value: f.object.seo_title(fallback: false, default: nil)
+        .page-form-control
+          = f.text_field :seo_title, placeholder: Spina::Page.human_attribute_name(:seo_title_placeholder), value: f.object.seo_title(fallback: false, default: nil)
 
     .horizontal-form-group
       .horizontal-form-label
         = Spina::Page.human_attribute_name :description
         %small= Spina::Page.human_attribute_name :description_description
       .horizontal-form-content
-        = f.text_field :description, placeholder: Spina::Page.human_attribute_name(:description_placeholder)
+        .page-form-control
+          = f.text_field :description, placeholder: Spina::Page.human_attribute_name(:description_placeholder)
 
     .horizontal-form-group
       .horizontal-form-label
         = Spina::Page.human_attribute_name :url_title
         %small= Spina::Page.human_attribute_name :url_title_description
       .horizontal-form-content
-        = f.text_field :url_title, placeholder: Spina::Page.human_attribute_name(:url_title_placeholder), value: f.object.url_title(fallback: false, default: nil)&.parameterize
+        .page-form-control
+          = f.text_field :url_title, placeholder: Spina::Page.human_attribute_name(:url_title_placeholder), value: f.object.url_title(fallback: false, default: nil)&.parameterize
 
     - unless @page.new_record?
       .horizontal-form-group
         .horizontal-form-label
           = Spina::Page.human_attribute_name :materialized_path
         .horizontal-form-content
-          = f.text_field :materialized_path, disabled: true
+          .page-form-control
+            = f.text_field :materialized_path, disabled: true

data/app/views/spina/admin/pages/_page.html.haml

@@ -1,5 +1,6 @@
 = link_to spina.edit_admin_page_path(page), class: 'button button-link button-small sortable-link' do
   = page.menu_title
+
   - if page.draft?
     %small (#{t('spina.pages.concept')})
   - elsif !page.show_in_menu?
@@ -9,6 +10,7 @@
     %small (#{raw t('spina.pages.skip_to_first_child')})
 
 %span.pull-right
-  = link_to spina.edit_admin_page_path(page), class: 'button button-small button-link dd-nodrag' do
-    = icon('pencil-outline')
-    = t('spina.edit')
+  = link_to spina.edit_admin_page_path(page), class: 'button button-small button-default dd-nodrag' do
+    .button-content
+      = icon('pencil-outline')
+      = t('spina.edit')

data/app/views/spina/admin/pages/_page_nested_list.html.haml

@@ -2,6 +2,5 @@
   .dd-item-inner
     = render partial: 'page', object: page_nested_list
 
-  - if page_nested_list.children.active.regular_pages.any?
-    %ol.dd-list
-      = render partial: 'page_nested_list', collection: page_nested_list.children.active.sorted.regular_pages
+  %ol.dd-list
+    = render partial: 'page_nested_list', collection: page_nested_list.children.active.sorted.regular_pages

data/app/views/spina/admin/pages/index.html.haml

@@ -1,8 +1,9 @@
 - content_for(:header_actions) do
   %span{data: {dropdown: true}}
     = link_to spina.new_admin_page_path(params: {view_template: 'show'}), class: 'button button-primary', style: 'margin-right: 0', data: {trigger: ('dropdown' if current_theme.new_page_templates.size > 1), target: '#create_page_dropdown'} do
-      = icon('plus')
-      = t('spina.pages.new')
+      .button-content
+        = icon('plus')
+        = t('spina.pages.new')
 
     .sliding-dropdown#create_page_dropdown.align-right
       .slide-controls
@@ -25,9 +26,9 @@
             - current_theme.new_page_templates.each_with_index do |template2, index2|
               .slide-dot{class: ('active' if index2 == index)}
 
-          = link_to spina.new_admin_page_path(params: {view_template: template[0]}), class: 'button button-primary' do
+          = link_to spina.new_admin_page_path(params: {view_template: template[0]}), class: 'button button-default' do
             = icon('pencil-outline')
-            = t('spina.pages.create_page', template: template[1])
+            = t('spina.pages.new')
 
 .well
   .dd#pages_list{data: {:"sort-url" => spina.sort_admin_pages_url }}