pageflow 17.0.5 → 17.1.0

data/app/assets/stylesheets/pageflow/admin/entries/index_table.scss

@@ -1,4 +1,5 @@
-.index_table {
+.index_table,
+.embedded_index_table {
   .publication_state {
     width: 16px;
     padding: 5px;

data/app/assets/stylesheets/pageflow/admin/permalink_input.scss

@@ -37,6 +37,7 @@ $pageflow-permalink-input-directory-background-position: null !default;
     line-height: $pageflow-permalink-input-line-height;
     background-color: $pageflow-permalink-input-base-url-background-color;
     color: $pageflow-permalink-input-base-url-color;
+    flex: 1;
   }
 
   select,
@@ -60,7 +61,7 @@ $pageflow-permalink-input-directory-background-position: null !default;
 
   input {
     padding-left: 0;
-    flex: 1;
+    flex: 2;
   }
 
   &.no_directories {

data/app/assets/stylesheets/pageflow/editor/background_positioning.scss

@@ -18,6 +18,11 @@
     margin: 35px;
   }
 
+  h3 {
+    border-bottom: solid 1px var(--ui-on-surface-color-lightest);
+    margin: 40px 0;
+  }
+
   .previews {
     overflow: scroll;
     overflow-x: auto;
@@ -27,6 +32,7 @@
     > div {
       height: 100%;
       white-space: nowrap;
+      text-align: center;
     }
   }
 

data/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";
@@ -70,6 +71,7 @@
   @import "./confirm_encoding";
   @import "./files_gallery";
   @import "./filtered_files";
+  @import "./list_search_field";
   @import "./file_meta_data";
   @import "./file_stages";
   @import "./file_thumbnails";

data/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 {

data/app/assets/stylesheets/pageflow/editor/file_meta_data.scss

@@ -40,7 +40,7 @@
     text-overflow: ellipsis;
   }
 
-  .edit {
+  button.edit {
     @include background-icon-center($font-size: 15px,
                                     $color: var(--ui-primary-color-light));
     @include pencil-icon;
@@ -50,6 +50,10 @@
     height: 20px;
     float: right;
     margin-top: -2px;
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
 
     &:hover {
       @include background-icon-color(var(--ui-primary-color));

data/app/assets/stylesheets/pageflow/editor/files.scss

@@ -8,12 +8,12 @@ ul.files {
     position: relative;
     padding: 37px 10px 0 70px;
     white-space: nowrap;
-    overflow: hidden;
-    height: 23px;
+    min-height: 23px;
+    scroll-margin-top: 100px;
   }
 
-  > li.expanded {
-    height: auto;
+  > li:not(.expanded) .details {
+    display: none;
   }
 
   li.blank_slate {
@@ -22,13 +22,24 @@ ul.files {
     color: var(--ui-on-surface-color-light);
   }
 
-  .file_thumbnail {
+  .file_thumbnail_button {
     position: absolute;
     top: 0;
     left: 0;
     height: 60px;
     width: 60px;
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+    display: block;
+  }
+
+  .file_thumbnail {
+    height: 100%;
+    width: 100%;
     vertical-align: middle;
+    display: block;
   }
 
   .file_name {
@@ -44,41 +55,42 @@ ul.files {
     top: 3px;
     text-align: right;
 
-    a {
+    button {
       float: left;
       margin-left: 5px;
+      min-width: space(8);
     }
   }
 
-  a.settings,
-  a.cancel,
-  a.confirm,
-  a.retry {
+  button.settings,
+  button.cancel,
+  button.confirm,
+  button.retry {
     @include icon-only-button();
   }
 
-  a.settings {
+  button.settings {
     @include cog-icon;
   }
 
-  a.remove {
+  button.remove {
     @include icon-only-button("destructive");
     @include trash-icon;
   }
 
-  a.cancel {
+  button.cancel {
     @include cancel-icon;
   }
 
-  a.confirm {
+  button.confirm {
     @include check-icon;
   }
 
-  a.retry {
+  button.retry {
     @include arrows-ccw-icon;
   }
 
-  a.select {
+  button.select {
     @include simple-button("primary");
 
     padding-left: 5px;

data/app/assets/stylesheets/pageflow/editor/filtered_files.scss

@@ -21,4 +21,28 @@
     right: space(4);
     top: space(4);
   }
+
+  &-filter_bar {
+    display: flex;
+    align-items: center;
+    gap: space(1);
+    background-color: var(--ui-surface-color);
+    position: sticky;
+    top: -10px;
+    z-index: 2;
+
+    .drop_down_button button {
+      @include fa-sort-amount-desc-icon;
+      --drop-down-button-width: 31px;
+    }
+  }
+
+  &-sort {
+    margin-top: space(2);
+    text-align: right;
+  }
+
+  ul.files > li.keyboard_highlight {
+    background-color: var(--ui-selection-color-light);
+  }
 }

data/app/assets/stylesheets/pageflow/editor/info_box.scss

@@ -3,13 +3,21 @@
     margin-bottom: 1em;
   }
 
+  &.info,
   &.error {
-    color: var(--ui-on-error-surface-color);
-    background-color: var(--ui-error-surface-color);
     border-radius: rounded();
     padding: space(3);
   }
 
+  &.info {
+    background-color: var(--ui-selection-color-lighter);
+  }
+
+  &.error {
+    color: var(--ui-on-error-surface-color);
+    background-color: var(--ui-error-surface-color);
+  }
+
   .shortcuts {
     dt {
       display: block;
@@ -35,7 +43,7 @@
 
   // Make sure the label is on top when an inline help text is displayed
   dt:hover .shortcut {
-    z-index: 4;
+    z-index: 5;
     position: relative;
   }
 }

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

@@ -1,6 +1,7 @@
 .list {
   .list_items {
     margin-bottom: 10px;
+    user-select: none;
   }
 
   .list_blank_slate {
@@ -75,6 +76,11 @@
     padding-right: 30px;
   }
 
+  .list_item:has(.list_item_edit_button.is_available):has(.list_item_remove_button.is_available)
+    .list_item_title {
+    padding-right: 62px;
+  }
+
   .list_item_description {
     margin-top: 10px;
     color: var(--ui-on-surface-color-light);
@@ -104,8 +110,4 @@
     @include icon-only-button("destructive");
     @include trash-icon;
   }
-
-  .sortable-placeholder {
-    height: 35px;
-  }
 }

data/app/assets/stylesheets/pageflow/editor/list_search_field.scss

@@ -0,0 +1,52 @@
+.list_search_field {
+  flex: 1;
+  position: relative;
+  margin: space(2) 0;
+
+  @include background-icon-left($left: space(2), $top: 50%);
+  @include search-icon;
+
+  &-term {
+    padding-right: space(7);
+    padding-left: space(7);
+    width: 100%;
+  }
+
+  &-placeholder {
+    position: absolute;
+    left: space(7);
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--ui-on-surface-color-light);
+
+    kbd {
+      border: solid 1px var(--ui-on-surface-color-lighter);
+      border-radius: 4px;
+      padding: 3px 5px 2px;
+      font-size: 11px;
+    }
+  }
+
+  &-reset {
+    @include background-icon-center;
+    @include cancel-icon;
+
+    position: absolute;
+    right: space(4);
+    top: space(4);
+    display: none;
+  }
+
+  &.has_value .list_search_field-reset {
+    display: block;
+  }
+
+  &.has_value .list_search_field-placeholder {
+    display: none;
+  }
+
+  &.focus .list_search_field-placeholder {
+    display: none;
+  }
+}

data/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();
-}

data/app/assets/stylesheets/pageflow/editor/select_button.scss

@@ -14,7 +14,7 @@
     @include transition(visibility 200ms, opacity 200ms, top 200ms);
 
     position: absolute;
-    z-index: 1;
+    z-index: 3;
 
     padding: 10px;
 

data/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;
+  }
+}

data/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);
   }
 }

data/app/assets/stylesheets/pageflow/ui/forms.scss

@@ -121,6 +121,10 @@ textarea.short {
   .separator {
     border-top: solid 1px var(--ui-on-surface-color-lightest);
     margin: space(4) 0;
+
+    &:last-child {
+      display: none;
+    }
   }
 }
 

data/app/assets/stylesheets/pageflow/ui/input/color_input.scss

@@ -13,6 +13,10 @@
   .minicolors-input-swatch {
     top: 5px;
     left: 5px;
+
+    .minicolors-swatch-color {
+      background-color: var(--placeholder-color);
+    }
   }
 
   &.is_default input {
@@ -22,4 +26,8 @@
   .minicolors-focus input {
     color: var(--ui-on-surface-color);
   }
+
+  .minicolors-swatches .minicolors-swatch {
+    margin: 2px;
+  }
 }

data/app/assets/stylesheets/pageflow/ui/input/file_name_input.scss

@@ -0,0 +1,37 @@
+.file_name_input {
+  &-wrapper {
+    display: inline-flex;
+    border: solid 1px var(--ui-on-surface-color-lighter);
+    border-radius: rounded();
+    background-color: var(--ui-surface-color);
+    box-sizing: border-box;
+    width: 100%;
+    overflow: hidden;
+
+    &:focus-within {
+      border-color: var(--ui-on-surface-color-light);
+      box-shadow: 0 0 0 2px var(--ui-selection-color-light);
+    }
+  }
+
+  input {
+    flex: 1;
+    border: 0;
+
+    &:focus {
+      border: 0;
+      box-shadow: none;
+    }
+  }
+
+  &.invalid .file_name_input-wrapper {
+    border: solid 1px var(--ui-error-color);
+  }
+
+  &-extension {
+    padding: space(1) space(2);
+    line-height: 20px;
+    background-color: var(--ui-on-surface-color-lightest);
+    color: var(--ui-on-surface-color);
+  }
+}

data/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);
 }

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

@@ -7,6 +7,7 @@
 
 %pageflow-ui {
   @import "./ui/forms";
+  @import "./ui/input/file_name_input";
   @import "./ui/input/color_input";
   @import "./ui/table_view";
   @import "./ui/table_cells/presence_table_cell";

data/app/controllers/concerns/pageflow/controller_delegation.rb

@@ -8,7 +8,7 @@ module Pageflow
     # the response.
     def delegate_to_rack_app!(app)
       result = app.call(request.env)
-      yield(*result) if block_given?
+      result = yield(result) if block_given?
 
       throw(:delegate, result)
     end

data/app/controllers/concerns/pageflow/edit_locking.rb

@@ -1,15 +1,19 @@
 module Pageflow
+  # @api private
   module EditLocking
     extend ActiveSupport::Concern
 
     included do
       rescue_from EditLock::NotHeldError, EditLock::HeldByOtherSessionError do |exception|
         respond_to do |format|
-          format.html { redirect_back fallback_location: admin_root_path, :alert => t('pageflow.edit_locks.required') }
+          format.html do
+            redirect_back fallback_location: admin_root_path,
+                          alert: t('pageflow.edit_locks.required')
+          end
           format.json do
-            render(:status => :conflict, :json => {
-                     :error_message => exception.message,
-                     :error => exception.code
+            render(status: :conflict, json: {
+                     error_message: exception.message,
+                     error: exception.code
                    })
           end
         end
@@ -17,12 +21,15 @@ module Pageflow
 
       rescue_from EditLock::HeldByOtherUserError do |exception|
         respond_to do |format|
-          format.html { redirect_back fallback_location: admin_root_path, :alert => t('pageflow.edit_locks.required_but_held_by_other_user') }
+          format.html do
+            redirect_back fallback_location: admin_root_path,
+                          alert: t('pageflow.edit_locks.required_but_held_by_other_user')
+          end
           format.json do
-            render(:status => :conflict, :json => {
-                     :error_message => exception.message,
-                     :error => exception.code,
-                     :held_by => exception.user.full_name
+            render(status: :conflict, json: {
+                     error_message: exception.message,
+                     error: exception.code,
+                     held_by: exception.user.full_name
                    })
           end
         end
@@ -32,7 +39,7 @@ module Pageflow
     protected
 
     def verify_edit_lock!(entry)
-      entry.edit_lock.verify!(current_user, :id => request.headers['X-Edit-Lock'])
+      entry.edit_lock.verify!(current_user, id: request.headers['X-Edit-Lock'])
     end
   end
 end

data/app/controllers/concerns/pageflow/entry_password_protection.rb

@@ -1,4 +1,5 @@
 module Pageflow
+  # @api private
   module EntryPasswordProtection
     private
 

data/app/controllers/concerns/pageflow/public_https_mode.rb

@@ -1,4 +1,5 @@
 module Pageflow
+  # @api private
   module PublicHttpsMode
     protected
 
@@ -12,6 +13,6 @@ module Pageflow
       end
     end
 
-    alias_method :check_public_https_mode, :redirect_according_to_public_https_mode
+    alias check_public_https_mode redirect_according_to_public_https_mode
   end
 end

data/app/controllers/concerns/pageflow/quota_verification.rb

@@ -1,4 +1,5 @@
 module Pageflow
+  # @api private
   module QuotaVerification
     extend ActiveSupport::Concern
 
@@ -9,10 +10,10 @@ module Pageflow
             redirect_back fallback_location: admin_root_path, alert: t('pageflow.quotas.exhausted')
           end
           format.json do
-            render(:status => :forbidden,
-                   :json => {
-                     :error_message => exception.message,
-                     :quota_name => exception.quota.name
+            render(status: :forbidden,
+                   json: {
+                     error_message: exception.message,
+                     quota_name: exception.quota.name
                    })
           end
         end

data/app/controllers/pageflow/admin/initial_passwords_controller.rb

@@ -1,5 +1,6 @@
 module Pageflow
   module Admin
+    # @api private
     class InitialPasswordsController < Devise::PasswordsController
       layout 'active_admin_logged_out'
       helper ActiveAdmin::ViewHelpers