feat(ui): UI/UX improvements for the Editor (#154)

* feat: temporary change the default logo of the Maglev UI

* feat: use a trash bin icon as the delete action icon

* feat(ui): better looking modal/slider close buttons

* feat(ui): revamp the header nav

* feat: display the locale in the path displayed in the page-info component

* feat: hide the SectionHighlighter component when scrolling the preview iframe

* chore: small fixes preventing the installation of Maglev in a blank Rails app

* fix(ui): deal with long page titles and paths

* feat(ui): use better icons for the list of pages + clone page action

Author: did

.annotaterb.yml

@@ -0,0 +1,58 @@
+---
+:position: before
+:position_in_additional_file_patterns: before
+:position_in_class: before
+:position_in_factory: before
+:position_in_fixture: before
+:position_in_routes: before
+:position_in_serializer: before
+:position_in_test: before
+:classified_sort: true
+:exclude_controllers: true
+:exclude_factories: false
+:exclude_fixtures: false
+:exclude_helpers: true
+:exclude_scaffolds: true
+:exclude_serializers: false
+:exclude_sti_subclasses: false
+:exclude_tests: false
+:force: false
+:format_markdown: false
+:format_rdoc: false
+:format_yard: false
+:frozen: false
+:ignore_model_sub_dir: false
+:ignore_unknown_models: false
+:include_version: false
+:show_check_constraints: false
+:show_complete_foreign_keys: false
+:show_foreign_keys: true
+:show_indexes: true
+:simple_indexes: false
+:sort: false
+:timestamp: false
+:trace: false
+:with_comment: true
+:with_column_comments: true
+:with_table_comments: true
+:active_admin: false
+:command:
+:debug: false
+:hide_default_column_types: ''
+:hide_limit_column_types: ''
+:ignore_columns:
+:ignore_routes:
+:models: true
+:routes: false
+:skip_on_db_migrate: false
+:target_action: :do_annotations
+:wrapper:
+:wrapper_close:
+:wrapper_open:
+:classes_default_to_s: []
+:additional_file_patterns: []
+:model_dir:
+- app/models
+:require: []
+:root_dir:
+- ''

.gitignore

@@ -38,4 +38,7 @@ node_modules
 bin/test
 
 spec/dummy/db/*.sqlite3
-spec/legacy_dummy/db/*.sqlite3
+spec/legacy_dummy/db/*.sqlite3
+
+docs/
+TODO.md

Gemfile

@@ -52,7 +52,7 @@ group :development, :test do
 
   gem 'nokogiri', '>= 1.15.6'
 
-  gem 'annotate'
+  gem 'annotaterb'
 
   gem 'rdoc', '>= 6.6.3.1'
 end

Gemfile.lock

@@ -83,22 +83,20 @@ GEM
       securerandom (>= 0.3)
       tzinfo (~> 2.0, >= 2.0.5)
       uri (>= 0.13.1)
-    annotate (2.6.5)
-      activerecord (>= 2.3.0)
-      rake (>= 0.8.7)
+    annotaterb (4.14.0)
     ast (2.4.2)
     base64 (0.2.0)
     bcrypt (3.1.20)
     benchmark (0.4.0)
-    bigdecimal (3.1.8)
+    bigdecimal (3.1.9)
     builder (3.3.0)
-    concurrent-ruby (1.3.4)
-    connection_pool (2.4.1)
+    concurrent-ruby (1.3.5)
+    connection_pool (2.5.3)
     crass (1.0.6)
     date (3.4.1)
     diff-lcs (1.5.1)
     docile (1.4.1)
-    drb (2.2.1)
+    drb (2.2.3)
     dry-cli (1.2.0)
     erubi (1.13.0)
     factory_bot (6.2.1)
@@ -121,7 +119,7 @@ GEM
       railties (>= 3.0.0)
     globalid (1.2.1)
       activesupport (>= 6.1)
-    i18n (1.14.6)
+    i18n (1.14.7)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
@@ -147,7 +145,7 @@ GEM
       kaminari-core (= 1.2.2)
     kaminari-core (1.2.2)
     language_server-protocol (3.17.0.3)
-    logger (1.6.1)
+    logger (1.7.0)
     loofah (2.23.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
@@ -160,7 +158,7 @@ GEM
     marcel (1.0.4)
     mini_magick (4.13.2)
     mini_mime (1.1.5)
-    minitest (5.25.2)
+    minitest (5.25.5)
     mutex_m (0.3.0)
     net-imap (0.5.8)
       date
@@ -304,7 +302,7 @@ GEM
     ruby-vips (2.2.2)
       ffi (~> 1.12)
       logger
-    securerandom (0.3.2)
+    securerandom (0.4.1)
     simplecov (0.22.0)
       docile (~> 1.1)
       simplecov-html (~> 0.11)
@@ -323,11 +321,11 @@ GEM
     sqlite3 (2.6.0-x86_64-linux-musl)
     stringio (3.1.2)
     thor (1.3.2)
-    timeout (0.4.2)
+    timeout (0.4.3)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.6.0)
-    uri (1.0.2)
+    uri (1.0.3)
     useragent (0.16.10)
     vite_rails (3.0.19)
       railties (>= 5.1, < 9)
@@ -361,7 +359,7 @@ PLATFORMS
   x86_64-linux-musl
 
 DEPENDENCIES
-  annotate
+  annotaterb
   bcrypt
   factory_bot_rails (~> 6.2.0)
   generator_spec

Gemfile.rails_7_2

@@ -59,8 +59,6 @@ group :development, :test do
 
   gem 'nokogiri', '>= 1.15.6'
 
-  gem 'annotate'
-
   gem 'rdoc', '>= 6.6.3.1'
 end
 

Gemfile.rails_7_2.lock

@@ -83,9 +83,6 @@ GEM
       minitest (>= 5.1)
       securerandom (>= 0.3)
       tzinfo (~> 2.0, >= 2.0.5)
-    annotate (3.2.0)
-      activerecord (>= 3.2, < 8.0)
-      rake (>= 10.4, < 14.0)
     ast (2.4.2)
     base64 (0.2.0)
     bcrypt (3.1.20)
@@ -362,7 +359,6 @@ PLATFORMS
   x86_64-linux-musl
 
 DEPENDENCIES
-  annotate
   bcrypt
   factory_bot_rails (~> 6.2.0)
   generator_spec

Rakefile

@@ -20,8 +20,9 @@ require 'vite_ruby'
 ViteRuby.install_tasks
 ViteRuby.config.root # Ensure the engine is set as the root.
 
-rakefile_path = Rails::VERSION::MAJOR >= 8 ? 'spec/dummy/Rakefile' : 'spec/legacy_dummy/Rakefile'
+rakefile_path = !defined?(Rails) || Rails::VERSION::MAJOR >= 8 ? 'spec/dummy/Rakefile' : 'spec/legacy_dummy/Rakefile'
 APP_RAKEFILE = File.expand_path(rakefile_path, __dir__)
+
 load 'rails/tasks/engine.rake'
 load 'rails/tasks/statistics.rake'
 

app/frontend/editor/assets/remixicons/clipboard-line.svg

@@ -7,7 +7,7 @@
       :color="icon.color"
       class="cursor-pointer hover:bg-editor-primary hover:bg-opacity-5 px-2"
       :class="{ 
-        'mx-2': index === 1,
+        'mx-1': index === 1,
         'bg-editor-primary bg-opacity-5': device === icon.device
       }"
       size="2.5rem"

app/frontend/editor/assets/remixicons/ri-folders-line.svg

@@ -7,54 +7,26 @@
       <div class="h-6 bg-gray-200 rounded w-1/4 mx-6"></div>
       <div class="h-6 bg-gray-200 rounded w-1/4 mx-6"></div>
     </div>
-    <div class="flex justify-between h-full w-full" v-else>
-      <div class="flex">
-        <router-link
-          :to="{ name: 'listPages' }"
-          class="flex items-center py-4 px-6 flex-row hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
-          :class="{
-            'bg-white': !isListPagesActive,
-            'bg-editor-primary bg-opacity-5': isListPagesActive,
-          }"
-        >
-          <span>{{ $t('headerNav.pages') }}</span>
-          <uikit-page-icon class="ml-4" :page="currentPage" />
-          <span class="ml-2">{{ currentPage.title }}</span>
-          <uikit-icon name="arrow-down-s-line" class="ml-3" />
-        </router-link>
-
-        <separator />
-
-        <router-link
-          :to="{ name: 'editPageSettings' }"
-          class="flex items-center py-4 px-6 flex-row hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
-          :class="{
-            'bg-white': !isEditPageActive,
-            'bg-editor-primary bg-opacity-5': isEditPageActive,
-          }"
-        >
-          <uikit-icon name="settings-4-line" size="1.25rem" />
-          <span class="ml-2">{{ $t('headerNav.pageSettings') }}</span>
-        </router-link>
-
-        <separator />
+    <div class="grid grid-cols-5 h-full w-full" v-else>
+      <div class="col-span-3 lg:col-span-2">
+        <page-info />
       </div>
 
-      <div class="flex">
-        <div class="flex items-center px-6">
-          <device-toggler />
-        </div>
-        <separator />
+      <div class="col-span-1 hidden lg:flex justify-center">
+        <device-toggler />
+      </div>
 
+      <div class="col-span-2 flex justify-end h-full">
         <div class="flex h-full relative" v-if="hasMultipleLocales">
           <locale-toggler />
         </div>
         <separator v-if="hasMultipleLocales" />
 
         <preview-toggler v-if="isSitePublishable" />
-        <preview-button v-else />
+        <preview-button v-else class="hidden lg:flex" />
 
         <separator v-if="isSitePublishable" />
+        
         <div
           class="flex items-center h-full relative space-x-1 pr-4"
           v-if="isSitePublishable"
@@ -64,7 +36,7 @@
         </div>
 
         <div v-else>
-          <save-button :big="true" />
+          <save-button big />
         </div>
       </div>
     </div>
@@ -79,6 +51,7 @@ import PreviewToggler from './preview-toggler.vue'
 import PublishButton from './publish-button.vue'
 import SaveButton from './save-button.vue'
 import Separator from './separator.vue'
+import PageInfo from './page-info.vue'
 
 export default {
   name: 'HeaderNav',
@@ -90,17 +63,15 @@ export default {
     SaveButton,
     Separator,
     PreviewToggler,
+    PageInfo,
   },
   computed: {
     isLoading() {
       return !this.currentSite || !this.currentPage
     },
     isListPagesActive() {
       return this.$route.name === 'listPages'
-    },
-    isEditPageActive() {
-      return this.$route.name === 'editPageSettings'
-    },
+    },    
   },
 }
 </script>

app/frontend/editor/assets/remixicons/ri-shadow-line.svg

@@ -0,0 +1,23 @@
+<template>
+  <div class="flex items-center h-full px-4 flex-row w-full overflow-hidden">
+    <uikit-page-icon :page="currentPage" size="1.75rem" class="shrink-0" />
+    <div class="ml-4 flex flex-col leading-none overflow-hidden">
+      <div class="text-base font-semibold truncate">{{ currentPage.title }}</div>
+      <div class="text-xs text-gray-500 -mt-0.5 flex items-center space-x-1">
+        <span class="truncate">{{ currentPagePath }}</span>
+        <uikit-copy-paste-button :text-to-copy="currentPageUrl" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'PageInfo',
+  computed: {
+    ...mapGetters(['currentPagePath', 'currentPageUrl']),    
+  }
+}
+</script>

app/frontend/editor/components/header-nav/device-toggler.vue

@@ -1,6 +1,6 @@
 <template>
   <a
-    :href="currentPage.previewUrl"
+    :href="currentPageUrl"
     target="_blank"
     class="px-6 flex items-center hover:bg-editor-primary/5 transition-colors duration-200"
   >
@@ -11,5 +11,10 @@
 <script>
 export default {
   name: 'PreviewButton',
+  computed: {
+    currentPageUrl() {
+      return this.currentPage.liveUrl
+    },
+  },
 }
 </script>

app/frontend/editor/components/header-nav/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full py-4 w-px">
+  <div class="h-full py-4 w-px shrink-0">
     <div class="h-full w-full bg-gray-300" />
   </div>
 </template>