pageflow 17.1.0 → 17.2.0

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

@@ -2,41 +2,169 @@
   position: relative;
 
   &-banner {
-    display: block;
-    padding: space(2);
+    display: flex;
+    align-items: center;
+    gap: space(2);
+    padding: space(1) space(2);
     border-radius: rounded();
     background-color: var(--ui-selection-color-lighter);
     margin-top: space(2);
   }
 
-  &-filter_name {
-    font-weight: bold;
+  &-banner_text {
+    flex: 1;
+  }
+
+  &-banner_name {
+    font-weight: 500;
   }
 
-  &-reset_filter {
-    @include background-icon-center;
+  &-banner_dismiss {
     @include cancel-icon;
 
-    position: absolute;
-    right: space(4);
-    top: space(4);
+    flex: none;
+    width: space(6);
+    padding: space(1) 0;
+    border: none;
+    border-radius: rounded();
+    background-color: transparent;
+    color: var(--ui-primary-color-light);
+    line-height: 16px;
+    cursor: pointer;
+
+    &:before {
+      font-size: 16px;
+      vertical-align: top;
+    }
+
+    &:hover {
+      background-color: var(--ui-on-surface-color-lightest);
+      color: var(--ui-primary-color);
+    }
+  }
+
+  // Clipping keeps the first and last row from poking out of the
+  // rounded corners.
+  &-list {
+    border: solid 1px var(--ui-on-surface-color-lighter);
+    border-radius: rounded(md);
+    overflow: clip;
+  }
+
+  // Keeps search field, menu and file type pills in reach while
+  // scrolling through a long list of files.
+  //
+  // Browse controls and selection bar share one cell and take turns
+  // being visible, so that the header keeps the height of the taller of
+  // the two and checking files never pushes the list down.
+  &-header {
+    display: grid;
+    position: sticky;
+    top: -10px;
+    z-index: 2;
+    background-color: var(--ui-surface-color);
+  }
+
+  &-browse_controls,
+  &-selection_bar {
+    grid-area: 1 / 1;
+
+    &.is_hidden {
+      visibility: hidden;
+    }
   }
 
   &-filter_bar {
     display: flex;
     align-items: center;
     gap: space(1);
-    background-color: var(--ui-surface-color);
-    position: sticky;
-    top: -10px;
-    z-index: 2;
+    margin-top: space(1);
 
     .drop_down_button button {
-      @include fa-sort-amount-desc-icon;
       --drop-down-button-width: 31px;
     }
   }
 
+  &-selection_bar {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: space(2);
+    margin: space(3) 0 space(2);
+    padding: space(2);
+    border-radius: rounded();
+    background-color: var(--ui-selection-color-lighter);
+
+    // Files cannot be checked in an entry which has none, so the bar does
+    // not have to keep its space above the list free either.
+    &.is_unavailable {
+      display: none;
+    }
+  }
+
+  &-selection_bar_status {
+    display: flex;
+    align-items: center;
+    gap: space(2);
+  }
+
+  &-selection_bar_text {
+    flex: 1;
+  }
+
+  // On a line of their own, so that the number of checked files is not
+  // squeezed next to them in languages with longer words than English.
+  &-selection_bar_actions {
+    display: flex;
+    align-self: flex-end;
+    gap: space(1);
+  }
+
+  &-selection_bar_action {
+    @include simple-button;
+
+    padding: space(1) space(4);
+
+    &[disabled] {
+      opacity: 0.5;
+      cursor: default;
+    }
+  }
+
+  // The icon only mixin brings its own vertical padding, which would
+  // make this button taller than the one next to it.
+  &-selection_bar_destroy {
+    @include icon-only-button("destructive");
+    @include trash-icon;
+
+    padding-top: space(1);
+    padding-bottom: space(1);
+  }
+
+  &-selection_bar_dismiss {
+    @include cancel-icon;
+
+    flex: none;
+    width: space(6);
+    padding: space(1) 0;
+    border: none;
+    border-radius: rounded();
+    background-color: transparent;
+    color: var(--ui-primary-color-light);
+    line-height: 16px;
+    cursor: pointer;
+
+    &:before {
+      font-size: 16px;
+      vertical-align: top;
+    }
+
+    &:hover {
+      background-color: var(--ui-on-surface-color-lightest);
+      color: var(--ui-primary-color);
+    }
+  }
+
   &-sort {
     margin-top: space(2);
     text-align: right;

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

@@ -0,0 +1,40 @@
+.folder_breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: space(1);
+  padding: space(2) 0 space(2) space(1);
+
+  // Deeply nested folders with long names wrap rather than push the
+  // path out of the sidebar.
+  &-path {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &-root {
+    @include folder-icon;
+
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    color: var(--ui-primary-color-light);
+    cursor: pointer;
+  }
+
+  &-separator {
+    @include right-open-icon;
+
+    margin: 0 space(1);
+    color: var(--ui-on-surface-color-lighter);
+    font-size: 12px;
+  }
+
+  &-parent {
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    color: var(--ui-on-surface-color-light);
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}

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

@@ -18,6 +18,18 @@
     background-color: var(--ui-error-surface-color);
   }
 
+  .with_icon {
+    display: flex;
+    align-items: center;
+    gap: space(2);
+
+    img {
+      flex-shrink: 0;
+      width: space(5);
+      height: space(5);
+    }
+  }
+
   .shortcuts {
     dt {
       display: block;

data/app/assets/stylesheets/pageflow/editor/inputs/edit_defaults_button.scss

@@ -0,0 +1,15 @@
+.edit_defaults_button {
+  button {
+    @include simple-button;
+
+    width: 100%;
+    text-align: left;
+    padding-block: space(3);
+    padding-left: space(3);
+    margin-bottom: space(2);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 6l4 4 -4 4'/%3e%3c/svg%3e");
+    background-position: right space(1) center;
+    background-repeat: no-repeat;
+    background-size: 1.5rem 1.5rem;
+  }
+}

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

@@ -1,3 +1,4 @@
+@import "./inputs/edit_defaults_button";
 @import "./inputs/file_input";
 @import "./inputs/file_processing_state_display";
 @import "./inputs/reference";

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

@@ -1,38 +1,50 @@
 .list {
   .list_items {
-    margin-bottom: 10px;
+    border: solid 1px var(--ui-on-surface-color-lighter);
+    border-radius: rounded(md);
+    margin-bottom: space(2);
     user-select: none;
   }
 
   .list_blank_slate {
-    background-color: var(--ui-primary-color-lightest);
-    border-radius: rounded();
     color: var(--ui-on-surface-color-light);
-    padding: 10px;
+    padding: space(4);
+    text-align: center;
   }
 
+  // Thumbnail, title and buttons share a single row. The description
+  // takes a line of its own below them, so that the first line keeps its
+  // height and stays centered no matter whether there is a description.
   .list_item {
-    background-color: var(--ui-primary-color-lightest);
-    border-radius: rounded();
-    overflow: hidden;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas: "thumbnail title       buttons"
+                         ".         description description";
+    align-items: center;
+    column-gap: space(2);
+    border-bottom: solid 1px var(--ui-on-surface-color-lightest);
     cursor: default;
-    padding: 10px 10px 10px 45px;
-    position: relative;
-    margin-bottom: 2px;
+
+    &:last-child {
+      border-bottom: none;
+    }
   }
 
   &.with_type_pictogram .list_item {
-    padding-left: 70px;
+    grid-template-columns: auto auto 1fr auto;
+    grid-template-areas: "thumbnail pictogram title       buttons"
+                         ".         .         description description";
   }
 
   .list_item_thumbnail,
   .list_item_missing_thumbnail {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 35px;
-    height: 100%;
-    background-size: cover;
+    grid-area: thumbnail;
+    align-self: start;
+    width: space(8);
+    height: space(8);
+    margin: space(1) 0 space(1) space(1);
+    border-radius: rounded(sm);
+    overflow: hidden;
   }
 
   .list_item_thumbnail .thumbnail {
@@ -43,12 +55,12 @@
     font-size: 20px;
   }
 
+  // Covers the thumbnail in the same cell of the grid.
   .list_item_missing_thumbnail {
     @include attention-icon;
     @include background-icon-center($color: var(--ui-error-color));
     background-color: var(--ui-error-surface-color);
     display: none;
-    position: absolute;
   }
 
   .list_item.is_invalid .list_item_missing_thumbnail {
@@ -57,14 +69,13 @@
 
   .list_item_type_pictogram {
     display: none;
-    content: ' ';
-    position: absolute;
-    top: 0;
-    left: 37px;
-    height: 100%;
-    width: 35px;
+    grid-area: pictogram;
+    align-self: start;
+    width: space(9);
+    height: space(8);
+    margin: space(1) 0;
     background-repeat: no-repeat;
-    background-position: 3px 45%;
+    background-position: center;
     opacity: 0.2;
   }
 
@@ -73,41 +84,80 @@
   }
 
   .list_item_title {
-    padding-right: 30px;
-  }
+    @include label;
 
-  .list_item:has(.list_item_edit_button.is_available):has(.list_item_remove_button.is_available)
-    .list_item_title {
-    padding-right: 62px;
+    grid-area: title;
   }
 
   .list_item_description {
-    margin-top: 10px;
+    grid-area: description;
+    padding: space(1) 0 space(2);
     color: var(--ui-on-surface-color-light);
   }
 
+  // Keeps the same inset from the top and right edge of the row as the
+  // thumbnail has from the top and left edge.
   .list_item_buttons {
-    position: absolute;
-    right: 4px;
-    top: 3px;
-    white-space: nowrap;
+    grid-area: buttons;
+    align-self: start;
+    display: flex;
+    margin: space(1) space(1) 0 0;
+  }
+
+  // The copy of the row which follows the pointer while dragging only
+  // points out which item is being moved: it has left the list and
+  // nothing on it can be clicked.
+  .list_item.sortable-drag {
+    border-bottom: none;
+
+    .list_item_buttons {
+      visibility: hidden;
+    }
   }
 
   .list_item_buttons > a {
     display: none;
 
     &.is_available {
-      display: inline-block;
+      display: block;
+    }
+  }
+
+  .list_item_edit_button,
+  .list_item_remove_button {
+    width: space(8);
+    padding: 7px 0;
+    border-radius: rounded();
+    color: var(--ui-primary-color-light);
+    line-height: 16px;
+    text-align: center;
+    cursor: pointer;
+
+    &:before {
+      font-size: 16px;
+      vertical-align: top;
+    }
+
+    &:hover {
+      background-color: var(--ui-on-surface-color-lightest);
+      color: var(--ui-primary-color);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px var(--ui-button-focus-ring-color);
     }
   }
 
   .list_item_edit_button {
-    @include icon-only-button;
     @include pencil-icon;
   }
 
   .list_item_remove_button {
-    @include icon-only-button("destructive");
     @include trash-icon;
+
+    &:hover {
+      background-color: var(--ui-error-color);
+      color: var(--ui-on-error-color);
+    }
   }
 }

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

@@ -2,4 +2,13 @@
   .tabs_view {
     margin-top: 10px;
   }
+
+  > .drop_down_button {
+    float: right;
+  }
+
+  .drop_down_button > button.manage_files-add {
+    @include icon-button("primary");
+    @include up-icon;
+  }
 }

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

@@ -15,4 +15,18 @@ ul.menu {
     display: block;
     padding: space(2.5);
   }
+
+  // Set right after the label rather than at the edge of the item, so
+  // it reads as belonging to the label it marks.
+  a.indicator::after {
+    content: "";
+    display: inline-block;
+    position: relative;
+    top: space(-2);
+    margin-left: space(0.5);
+    width: space(1);
+    height: space(1);
+    border-radius: 50%;
+    background: var(--ui-warning-color);
+  }
 }

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

@@ -0,0 +1,83 @@
+&.move_to_folder_dialog {
+  // A short list of folders would otherwise leave most of the dialog
+  // empty, since dialog boxes stretch to the viewport by default. Long
+  // lists still have to stop short of the viewport and scroll.
+  .box {
+    height: fit-content;
+    min-width: 320px;
+    max-width: 480px;
+    max-height: calc(100vh - #{space(20)});
+  }
+
+  // One border around the list of targets, like the inputs of the editor
+  // have. Sits on the scrolling container, so that the border of a long
+  // list stays put while it is scrolled.
+  .content {
+    // Safari resolves the percentage flex basis of the default `flex: 1`
+    // against the indefinite height of the box to zero instead of falling
+    // back to the height of the list.
+    flex: 0 1 auto;
+
+    margin-left: 0;
+    padding: space(1);
+    border: solid 1px var(--ui-on-surface-color-lighter);
+    border-radius: rounded();
+  }
+
+  .move_to_folder_dialog {
+    // The root target holds the top level folders, so its own list does
+    // not get indented.
+    &-targets ul {
+      padding-left: space(4);
+    }
+
+    &-target {
+      display: flex;
+      align-items: center;
+      gap: space(2);
+      width: 100%;
+      box-sizing: border-box;
+      padding: space(1) space(2);
+      border: none;
+      border-radius: rounded(sm);
+      background-color: transparent;
+      color: inherit;
+
+      &:not([disabled]) {
+        cursor: pointer;
+      }
+
+      &:not([disabled]):hover {
+        background-color: var(--ui-selection-color-light);
+      }
+
+      // The folder the items are in is not a target they could move to.
+      &[disabled] {
+        color: var(--ui-on-surface-color-light);
+      }
+
+      // Folders which are being moved and their subfolders are no targets
+      // either. Dimming the whole row fades the folder icon along with
+      // the name, since no hint next to them says why they are inactive.
+      &.is_blocked {
+        opacity: 0.5;
+      }
+    }
+
+    &-pictogram {
+      @include folder-icon;
+
+      flex-shrink: 0;
+      color: var(--ui-primary-color-light);
+    }
+
+    &-name {
+      @include label;
+    }
+
+    &-current {
+      color: var(--ui-on-surface-color-light);
+      white-space: nowrap;
+    }
+  }
+}

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

@@ -29,12 +29,16 @@
   }
 }
 
+// Deprecated: The editor displays the same icons for all processing
+// stages of a file. Pictograms per stage are no longer supported.
 @mixin pageflow-uploadable-file-stage($stage-name) {
-  .editor {
-    .file_thumbnail .pictogram.#{$stage-name},
-    .file_stage_item.#{$stage-name} {
-      @content;
-    }
+  @warn "pageflow-uploadable-file-stage is deprecated and no longer has any effect. " +
+        "Remove the include for stage '#{$stage-name}'.";
+
+  // Keeps existing call sites from failing since they pass a content
+  // block.
+  @if false {
+    @content;
   }
 }