spina 2.7.0 → 2.8.0

data/app/assets/config/spina/manifest.js

@@ -4,6 +4,8 @@
 //= link_directory ../../javascripts/spina/controllers
 //= link_directory ../../javascripts/spina/libraries
 
-//= link spina/application.css
+//= link spina/animate.css
+//= link spina/fonts.css
+//= link spina/tailwind.css
 
 //= link spina/application.js

data/app/assets/javascripts/spina/controllers/image_collection_controller.js

@@ -7,9 +7,11 @@ export default class extends Controller {
   }
   
   connect() {
-    this.sortable = Sortable.create(this.collectionTarget, {
-      animation: 150
-    })
+    setTimeout(function() {
+      this.sortable = Sortable.create(this.collectionTarget, {
+        animation: 150
+      })
+    }.bind(this), 250)
   }
   
   removeImage(event) {

data/app/assets/stylesheets/spina/{tailwind/custom.css → application.tailwind.css}

@@ -138,58 +138,52 @@
     @apply border border-gray-400;
   }
 
-  /* Trix */
-  .trix-toolbar {  
-    button[data-trix-active] {
-      @apply text-white bg-spina;
-    }
+  /* Trix */  
+  .trix-toolbar button[data-trix-active] {
+    @apply text-white bg-spina;
+  }
   
-    button[disabled] {
-      @apply bg-gray-100 text-gray-400;
-    }
+  .trix-toolbar button[disabled] {
+    @apply bg-gray-100 text-gray-400;
   }
   
-  trix-editor {
-    
-    [data-trix-mutable]:not(.attachment__captain-editor) {
-      @apply select-none
-    }
-    
-    figure.attachment {
-      @apply m-0 inline-block
-    }
-  
-    figure.attachment[data-trix-content-type="Spina::Image"] {
-      max-height: 150px;
-      max-width: 200px;
-    }
-  
-    figure.attachment[data-trix-content-type="Spina::Image"] img {
-      @apply m-0 rounded-md object-contain;
-    }
-    
-    figure.attachment[data-trix-content-type="Spina::Image"] [data-label]:after {
-      content: attr(data-label);
-      @apply italic text-gray-500 h-8 flex items-center px-2 mt-1 text-sm;
-    }
-  
-    figure[data-trix-mutable].attachment[data-trix-content-type="Spina::Image"] img {
-      @apply shadow-lg ring ring-spina-light
-    }
+  trix-editor [data-trix-mutable]:not(.attachment__captain-editor) {
+    @apply select-none
+  }
     
-    figure[data-trix-mutable][data-trix-content-type="application/vnd+spina.embed+html"].attachment > spina-embed {
-      @apply block;
-      @apply shadow-lg ring ring-spina-light rounded-md;
-    }
-  
-    figure .attachment__caption {
-      @apply hidden
-    }
+  trix-editor figure.attachment {
+    @apply m-0 inline-block
+  }
+
+  trix-editor figure.attachment[data-trix-content-type="Spina::Image"] {
+    max-height: 150px;
+    max-width: 200px;
+  }
+
+  trix-editor figure.attachment[data-trix-content-type="Spina::Image"] img {
+    @apply m-0 rounded-md object-contain;
+  }
   
-    figure .attachment__toolbar {
-      @apply hidden
-    }
+  trix-editor figure.attachment[data-trix-content-type="Spina::Image"] [data-label]:after {
+    content: attr(data-label);
+    @apply italic text-gray-500 h-8 flex items-center px-2 mt-1 text-sm;
+  }
+
+  trix-editor figure[data-trix-mutable].attachment[data-trix-content-type="Spina::Image"] img {
+    @apply shadow-lg ring ring-spina-light
+  }
   
+  trix-editor figure[data-trix-mutable][data-trix-content-type="application/vnd+spina.embed+html"].attachment > spina-embed {
+    @apply block;
+    @apply shadow-lg ring ring-spina-light rounded-md;
+  }
+
+  trix-editor figure .attachment__caption {
+    @apply hidden
+  }
+
+  trix-editor figure .attachment__toolbar {
+    @apply hidden
   }
   
   trix-editor [data-trix-mutable]::-moz-selection,

data/app/components/spina/accounts/translations_component.html.erb

@@ -0,0 +1,21 @@
+<div class="relative" data-controller="reveal" data-reveal-away-value>
+  <button type="button" class="btn btn-default px-3" data-action="reveal#toggle">
+    <%= helpers.heroicon("chat-alt", style: :solid, class: 'w-4 h-4 text-gray-300') %>
+    
+    <span class="ml-1 font-semibold"><%= @label %></span>
+  </button>
+
+  <div hidden data-reveal data-transition class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg border border-gray-200 z-20">
+    <div class="rounded-md bg-white shadow-xs">
+      <div class="py-1">
+        <% locales.each do |locale| %>
+          <%= link_to helpers.spina.edit_admin_layout_path(locale: locale), class: "block px-3 py-2 text-sm leading-4 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 font-medium" do %>
+            <div class="text-gray-700">
+              <%=t('spina.pages.edit_translation', language: '<span class="font-semibold">' + t("spina.languages.#{locale}") + '</span>').html_safe %>  
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/spina/accounts/translations_component.rb

@@ -0,0 +1,26 @@
+module Spina
+  module Accounts
+    class TranslationsComponent < ApplicationComponent
+  
+      def initialize(account, label: nil)
+        @account = account
+        @label = label
+      end
+      
+      def render?
+        spina_locales.many?
+      end
+      
+      def locales
+        spina_locales
+      end
+  
+      private
+  
+        def spina_locales
+          Spina.config.locales.map(&:to_sym)
+        end
+  
+    end
+  end
+end

data/app/components/spina/forms/trix_toolbar_component.html.erb

@@ -1,4 +1,4 @@
-<div class="relative sticky top-0 pt-4 bg-white trix-toolbar" id="<%= @trix_id %>">
+<div class="relative sticky z-10 top-0 pt-4 bg-white trix-toolbar" id="<%= @trix_id %>">
   <div class="flex items-center flex-wrap" data-controller="reveal">
     <div class="flex items-center bg-gray-200 rounded overflow-hidden mb-3 mr-3">
       <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="bold" data-trix-key="b" title="${Trix.config.lang.bold}" tabindex="-1">

data/app/controllers/spina/admin/layout_controller.rb

@@ -11,7 +11,7 @@ module Spina::Admin
 
     def update
       if @account.update(layout_params)
-        redirect_to spina.edit_admin_layout_path, flash: {success: t('spina.layout.saved')}
+        redirect_to spina.edit_admin_layout_path(locale: @locale), flash: {success: t('spina.layout.saved')}
       else
         flash.now[:error] = t('spina.layout.couldnt_be_saved')
         render partial: 'error', status: :unprocessable_entity

data/app/controllers/spina/admin/navigation_items_controller.rb

@@ -5,7 +5,7 @@ module Spina
       
       def new
         @navigation_item = @navigation.navigation_items.new(parent_id: params[:parent_id])
-        @pages = Page.sorted
+        @pages = Page.sorted.main.includes(:translations)
       end
       
       def create

data/app/views/layouts/spina/admin/application.html.erb

@@ -10,8 +10,8 @@
     
     <title>Spina CMS</title>
 
-    <!-- Tailwind -->
-    <%= stylesheet_link_tag 'spina/application', data: {turbolinks_track: true} %>
+    <!-- Stylesheets -->
+    <%= stylesheet_link_tag "spina/tailwind", "spina/fonts", "spina/animate", "data-turbo-track": "reload" %>
     
     <!-- Spina's importmap -->
     <%= spina_importmap_tags %>

data/app/views/spina/admin/layout/edit.html.erb

@@ -1,5 +1,7 @@
 <%= render Spina::UserInterface::HeaderComponent.new do |header| %>
   <% header.actions do %>
+    <%= render Spina::Accounts::TranslationsComponent.new(@account, label: @locale.upcase) %>
+  
     <% if Spina::Current.theme.layout_parts.any? %>
       <%= button_tag type: :submit, form: dom_id(@account), class: 'btn btn-primary', data: {controller: "button hotkeys", hotkeys: "command+s, ctrl+s", hotkeys_target: "button", action: "button#loading", loading_message: t('spina.ui.saving')} do %>
         <%= heroicon('check', style: :solid, class: 'w-5 h-5 mr-1 -ml-2') %>

data/app/views/spina/admin/navigation_items/_form.html.erb

@@ -10,7 +10,11 @@
           </h3>
     
           <div class="mt-3">
-            <%= f.select :page_id, @pages.map{|page| [page.menu_title, page.id]}, {disabled: @navigation.navigation_items.pluck(:page_id), include_blank: t('spina.navigations.choose_page')}, class: 'form-select w-full' %>
+            
+            <div class="border border-gray-300 rounded-md bg-white">
+              <%= render Spina::Pages::PageSelectComponent.new("navigation_item[page_id]", @pages, include_blank: t("spina.navigations.choose_page"), disabled: @navigation.navigation_items.pluck(:page_id)) %>
+            </div>
+            
           </div>
         </div>
       </div>