Reorder chapters mode

app/assets/stylesheets/pageflow/editor/base.scss

@@ -61,6 +61,7 @@
   @import "./drop_down_button";
 
   @import "./outline";
+  @import "./sortable";
   @import "./failures";
   @import "./menu";
   @import "./inputs";

app/assets/stylesheets/pageflow/editor/drop_down_button.scss

@@ -12,7 +12,13 @@
 
   > button.ellipsis_icon {
     @include fa-ellipsis-v-icon;
-    width: 31px;
+    width: var(--drop-down-button-width, 31px);
+  }
+
+  > button.borderless {
+    --ui-button-border-color: transparent;
+    --ui-button-hover-border-color: transparent;
+    --ui-button-focus-ring-color: transparent;
   }
 
   &.full_width {

app/assets/stylesheets/pageflow/editor/list.scss

@@ -1,6 +1,7 @@
 .list {
   .list_items {
     margin-bottom: 10px;
+    user-select: none;
   }
 
   .list_blank_slate {
@@ -104,8 +105,4 @@
     @include icon-only-button("destructive");
     @include trash-icon;
   }
-
-  .sortable-placeholder {
-    height: 35px;
-  }
 }

app/assets/stylesheets/pageflow/editor/outline.scss

@@ -99,10 +99,6 @@ ul.outline {
     &.hide_in_navigation a {
       color: var(--ui-on-surface-color-light);
     }
-
-    &.ui-sortable-helper {
-      box-shadow: var(--ui-box-shadow-xl);
-    }
   }
 }
 
@@ -122,10 +118,6 @@ ul.chapters {
       font-weight: bold;
     }
   }
-
-  > .sortable-placeholder {
-    border: 0;
-  }
 }
 
 ul.pages {
@@ -145,8 +137,3 @@ ul.dragged {
   margin: 0;
   padding: 0;
 }
-
-.sortable-placeholder {
-  outline: 1px dotted var(--ui-on-surface-color-lighter);
-  border-radius: rounded();
-}

app/assets/stylesheets/pageflow/editor/sortable.scss

@@ -0,0 +1,12 @@
+.sortable-placeholder {
+  outline: 1px dotted var(--ui-on-surface-color-lighter);
+
+  // scss-lint:disable ImportantRule
+  border-color: transparent !important;
+  background-color: transparent !important;
+  // scss-lint:enable ImportantRule
+
+  * {
+    visibility: hidden;
+  }
+}

app/assets/stylesheets/pageflow/mixins/buttons.scss

@@ -49,8 +49,8 @@
     }
   } @else {
     background-color: transparent;
-    border: solid 1px var(--ui-primary-color-light);
-    color: var(--ui-primary-color);
+    border: solid 1px var(--ui-button-border-color);
+    color: var(--ui-on-button-color);
 
     @if $type == "destructive" {
       &:hover:not(:disabled):not(.disabled) {
@@ -61,7 +61,7 @@
     } @else {
       &.hover:not(:disabled):not(.disabled),
       &:hover:not(:disabled):not(.disabled) {
-        border: 1px solid var(--ui-primary-color);
+        border-color: var(--ui-button-hover-border-color);
       }
     }
 
@@ -78,6 +78,6 @@
 
   &:active:not(:disabled):not(.disabled),
   &:focus:not(:disabled):not(.disabled) {
-    box-shadow: 0 0 0 2px var(--ui-primary-color-lighter);
+    box-shadow: 0 0 0 2px var(--ui-button-focus-ring-color);
   }
 }

app/assets/stylesheets/pageflow/ui/properties.scss

@@ -41,4 +41,9 @@
   --ui-box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --ui-box-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --ui-box-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  --ui-on-button-color: var(--ui-primary-color);
+  --ui-button-border-color: var(--ui-primary-color-light);
+  --ui-button-hover-border-color: var(--ui-primary-color);
+  --ui-button-focus-ring-color: var(--ui-primary-color-lighter);
 }

entry_types/scrolled/config/locales/new/reorder_chapters.de.yml

@@ -0,0 +1,7 @@
+de:
+  pageflow_scrolled:
+    editor:
+      entry_outline:
+        reorder_chapters: "Kapitel umsortieren..."
+        reorder_chapters_header: "Kapitel umsortieren"
+        done: Fertig

entry_types/scrolled/config/locales/new/reorder_chapters.en.yml

@@ -0,0 +1,7 @@
+en:
+  pageflow_scrolled:
+    editor:
+      entry_outline:
+        reorder_chapters: "Reorder chapters..."
+        reorder_chapters_header: "Reorder chapters"
+        done: Done

entry_types/scrolled/package/src/editor/views/ChapterItemView.module.css

@@ -9,10 +9,6 @@
   border-radius: rounded(lg);
 }
 
-.root:global(.ui-sortable-helper) {
-  box-shadow: var(--ui-box-shadow-xl);
-}
-
 .selectableHover {
   background-color: var(--ui-selection-color-lighter);
 }
@@ -24,10 +20,9 @@
 }
 
 .outlineLink {
-  composes: rightOpen from './icons.module.css';
+  composes: chapterLink from './outline.module.css';
   composes: link;
   position: relative;
-  padding-left: 30px;
 }
 
 .link::before {
@@ -40,11 +35,7 @@
 
 .dragHandle {
   composes: dragHandle from './outline.module.css';
-  color: var(--ui-on-surface-color-light);
-}
-
-.link:hover .dragHandle {
-  opacity: 1;
+  color: var(--ui-on-surface-color);
 }
 
 .number {
@@ -54,6 +45,7 @@
 .title {}
 
 .sections {
+  composes: sections from './outline.module.css';
   margin: 10px 0 10px 0;
   min-height: 20px;
 }
@@ -69,4 +61,5 @@
 
 .addSection {
   composes: addButton from './buttons.module.css';
+  composes: button from './outline.module.css';
 }

entry_types/scrolled/package/src/editor/views/EntryOutlineView.js

@@ -1,6 +1,8 @@
 import Marionette from 'backbone.marionette';
+import Backbone from 'backbone';
 import I18n from 'i18n-js';
 import {cssModulesUtils, SortableCollectionView} from 'pageflow/ui';
+import {DropDownButtonView} from 'pageflow/editor';
 
 import {ChapterItemView} from './ChapterItemView';
 
@@ -11,30 +13,100 @@ export const EntryOutlineView = Marionette.Layout.extend({
   className: styles.root,
 
   template: () => `
-    <h2 class="sidebar-header">${I18n.t('pageflow_scrolled.editor.entry_outline.header')}</h2>
+    <h2 class="sidebar-header ${styles.header}">
+      ${I18n.t('pageflow_scrolled.editor.entry_outline.header')}
+    </h2>
+    <div class="${styles.toolbar}">
+      <div class="${styles.dropDownButton}"></div>
+      <button class="${styles.expandChapters}">
+        ${I18n.t('pageflow_scrolled.editor.entry_outline.done')}
+      </button>
+    </div>
     <ul class="${styles.chapters}"></ul>
 
     <a class="${styles.addChapter}" href="">
       ${I18n.t('pageflow_scrolled.editor.entry_outline.add_chapter')}
     </a>
   `,
 
-  ui: cssModulesUtils.ui(styles, 'chapters'),
+  ui: cssModulesUtils.ui(styles, 'header', 'dropDownButton', 'chapters'),
 
   events: cssModulesUtils.events(styles, {
     'click addChapter': function() {
       this.options.entry.addChapter();
+    },
+
+    'click expandChapters': function() {
+      this.toggleCollapsed();
     }
   }),
 
+  initialize() {
+    this.collapsed = false;
+  },
+
   onRender() {
-    this.subview(new SortableCollectionView({
+    const dropDownMenuItems = new Backbone.Collection();
+
+    this.reorderChaptersMenutItem = new MenuItem({
+      label: I18n.t('pageflow_scrolled.editor.entry_outline.reorder_chapters')
+    }, {
+      selected: () =>
+        this.toggleCollapsed()
+    })
+
+    dropDownMenuItems.add(this.reorderChaptersMenutItem);
+
+    this.appendSubview(new DropDownButtonView({
+      items: dropDownMenuItems,
+      alignMenu: 'right',
+      ellipsisIcon: true,
+      borderless: true,
+      openOnClick: true
+    }), {to: this.ui.dropDownButton});
+
+    this.sortableCollectionView = new SortableCollectionView({
       el: this.ui.chapters,
       collection: this.options.entry.chapters,
       itemViewConstructor: ChapterItemView,
       itemViewOptions: {
         entry: this.options.entry
       }
-    }));
+    });
+
+    this.subview(this.sortableCollectionView);
+    this.sortableCollectionView.disableSorting();
+  },
+
+  toggleCollapsed() {
+    this.collapsed = !this.collapsed;
+
+    this.$el.toggleClass(styles.collapsed, this.collapsed);
+
+    if (this.collapsed) {
+      this.ui.header.text(
+        I18n.t('pageflow_scrolled.editor.entry_outline.reorder_chapters_header')
+      );
+
+      this.sortableCollectionView.enableSorting();
+    }
+    else {
+      this.ui.header.text(
+        I18n.t('pageflow_scrolled.editor.entry_outline.header')
+      );
+
+      this.sortableCollectionView.disableSorting();
+
+    }
+  }
+});
+
+const MenuItem = Backbone.Model.extend({
+  initialize: function(attributes, options) {
+    this.options = options;
+  },
+
+  selected: function() {
+    this.options.selected();
   }
 });

entry_types/scrolled/package/src/editor/views/EntryOutlineView.module.css

@@ -1,13 +1,51 @@
-.root {}
+.root {
+  position: relative;
+  user-select: none;
+  composes: outline from './outline.module.css';
+}
 
-.chapters {}
+.collapsed {
+  composes: collapsed from './outline.module.css';
+}
+
+.root .header {
+  margin-bottom: 10px;
+}
+
+.toolbar {
+  position: absolute;
+  top: -6px;
+  right: -1px;
+}
+
+.dropDownButton {
+  --drop-down-button-width: 26px;
+  --ui-on-button-color: var(--ui-primary-color-light);
 
-.chapters > :global(.sortable-placeholder) {
-  margin-bottom: 12px;
-  padding: 0 10px 10px 10px;
-  border-radius: rounded(lg);
+  button.hover,
+  button:hover {
+    --ui-on-button-color: var(--ui-primary-color);
+  }
 }
 
+.collapsed .dropDownButton,
+.expandChapters {
+  display: none !important;
+}
+
+.expandChapters {
+  composes: saveButton from './buttons.module.css';
+  padding-top: 3px !important;
+  padding-bottom: 3px !important;
+}
+
+.collapsed .expandChapters {
+  display: block !important;
+}
+
+.chapters {}
+
 .addChapter {
   composes: addButton from './buttons.module.css';
+  composes: button from './outline.module.css';
 }

entry_types/scrolled/package/src/editor/views/SectionItemView.js

@@ -150,6 +150,7 @@ export const SectionItemView = Marionette.ItemView.extend({
       items: dropDownMenuItems,
       alignMenu: 'right',
       ellipsisIcon: true,
+      borderless: true,
       openOnClick: true
     }), {to: this.ui.dropDownButton});
   },

entry_types/scrolled/package/src/editor/views/SectionItemView.module.css

@@ -72,6 +72,7 @@
 
 .dragHandle {
   composes: dragHandle from './outline.module.css';
+  --outline-drag-handle-transition-delay: 0.2s;
   color: var(--ui-on-primary-color);
   text-shadow: 0 0 2px #000;
 }
@@ -93,8 +94,7 @@
 }
 
 .dropDownButton button {
-  border: 0 !important;
-  color: var(--ui-on-primary-color) !important;
+  --ui-on-button-color: var(--ui-on-primary-color);
   text-shadow: 0 0 2px #000;
   box-shadow: none !important;
   opacity: 0.3;
@@ -103,7 +103,7 @@
 }
 
 .invert .dropDownButton button {
-  color: var(--ui-primary-color) !important;
+  --ui-on-button-color: var(--ui-primary-color);
   text-shadow: 0 0 2px #fff;
 }