pageflow 17.1.0 → 17.2.0

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

@@ -1,36 +1,37 @@
 .file_stage_items {
-  border-top: solid 1px var(--ui-on-surface-color-lighter);
   border-bottom: solid 1px var(--ui-on-surface-color-lighter);
-  padding-bottom: 5px;
-  margin-bottom: 5px;
+  padding-bottom: space(2);
+  margin-bottom: space(2);
 }
 
 .file_stage_item {
+  display: flex;
+  align-items: center;
+  gap: space(2);
+  padding-left: space(2);
+  position: relative;
   white-space: normal;
+  color: var(--ui-primary-color);
 
-  &.indented {
-    @include background-icon-center($left: 20px, $color: var(--ui-on-surface-color-lighter));
-    padding: 10px 0 5px 60px;
-    margin-left: -60px;
+  &.failed {
+    color: var(--ui-error-color);
   }
 
+  // Leaves room for the thumbnail the surrounding input view reserves
+  // space for.
   &.stand_alone {
-    @include background-icon-center($left: 31px, $color: var(--ui-on-surface-color-lighter));
     padding-left: 70px;
   }
 
-  &.action_required,
-  &.active {
-    @include background-icon-color(var(--ui-primary-color));
-    @include background-icon-animation(blink);
-  }
-
-  &.finished {
-    @include background-icon-color(var(--ui-primary-color));
-  }
+  &-icon {
+    flex-shrink: 0;
+    width: space(4);
+    height: space(4);
 
-  &.failed {
-    @include background-icon-color(var(--ui-error-color));
+    .stand_alone & {
+      position: absolute;
+      left: 23px;
+    }
   }
 
   .percent {
@@ -38,20 +39,12 @@
     font-size: 12px;
   }
 
-  .error_message {
-    margin-top: 5px;
+  .description {
+    color: var(--ui-on-surface-color);
   }
 
-  &.uploading {
-    @include up-bold-icon;
-  }
-
-  &.fetching_meta_data {
-    @include clipboard-icon;
-  }
-
-  &.processing,
-  &.encoding {
-    @include cog-icon;
+  .error_message {
+    margin-top: space(1);
+    color: var(--ui-on-surface-color);
   }
 }

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

@@ -1,15 +1,43 @@
 .file_thumbnail {
+  position: relative;
   background-size: cover;
 
+  // Fills the box just like the background image would, so file types
+  // can render a thumbnail of their own.
+  &-custom {
+    position: absolute;
+    inset: 0;
+  }
+
+  // Covers thumbnail image and pictogram while the file is being
+  // processed.
+  &-stage_icon {
+    position: absolute;
+    inset: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: var(--ui-on-surface-color-light-solid);
+    color: var(--ui-on-primary-color);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .file_stage_icon {
+    width: 40%;
+    height: 40%;
+  }
+
   .pictogram {
     width: 100%;
     height: 100%;
-  }
 
-  .pictogram {
     background-color: var(--ui-on-surface-color-light-solid);
     @include background-icon-center($color: var(--ui-on-primary-color), $font-size: 30px);
-    @include background-icon-animation(blink);
 
     &.audio {
       @include note-icon;
@@ -19,38 +47,14 @@
       @include fa-cloud-download-icon;
     }
 
-    &.uploading {
-      @include up-bold-icon;
-    }
-
-    &.fetching_meta_data {
-      @include clipboard-icon;
-    }
-
-    &.processing,
-    &.encoding {
-      @include cog-icon;
-    }
-
     &.empty {
       @include picture-icon;
-      @include background-icon-animation(none);
-    }
-
-    &.action_required {
-      @include bell-icon;
     }
   }
 
-  div.pictogram.failed {
-    @include attention-icon;
-    @include background-icon-animation(none);
-  }
-
   &.ready {
     .pictogram {
       display: none;
-      @include background-icon-animation(none);
     }
   }
 
@@ -60,24 +64,3 @@
     }
   }
 }
-
-.expandable {
-  .file_thumbnail {
-    @include background-icon-left($color: var(--ui-on-primary-color), $left: 70%, $top: 85%);
-    @include down-open-icon;
-
-    &:before {
-      z-index: 1;
-      opacity: 0.4;
-      text-shadow: var(--ui-on-surface-color) 1px 0 4px;
-    }
-
-    &:hover:before {
-      opacity: 1;
-    }
-  }
-
-  .expanded .file_thumbnail {
-    @include up-open-icon;
-  }
-}

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

@@ -0,0 +1,73 @@
+.file_type_pills {
+  &-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: space(1);
+    padding: space(2) 0;
+  }
+
+  &-pill {
+    cursor: pointer;
+
+    // Clicking the pill of the only file type present would have nothing
+    // to filter down to.
+    &.only_type {
+      cursor: default;
+    }
+
+    color: var(--ui-on-surface-color-light);
+    padding: space(1) space(2);
+    border: solid 1px var(--ui-on-surface-color-lighter);
+    border-radius: rounded(full);
+    background-color: transparent;
+    line-height: inherit;
+
+    &.active {
+      color: var(--ui-on-primary-color);
+      border-color: var(--ui-primary-color);
+      background-color: var(--ui-primary-color);
+
+      &.spinner:before {
+        color: var(--ui-on-primary-color);
+      }
+    }
+
+    &.spinner {
+      padding-left: 27px;
+      @include background-icon-left($color: var(--ui-primary-color));
+      @include background-icon-animation(blink);
+      @include up-bold-icon;
+    }
+  }
+
+  &-add,
+  &-remove {
+    display: none;
+    margin-left: space(1);
+    font-size: 0.75em;
+  }
+
+  &-remove {
+    @include cancel-icon;
+  }
+
+  &-add {
+    @include plus-circled-icon;
+  }
+
+  // Clicking the only active pill clears the selection even without the
+  // modifier key, so its indicator does not wait for the pointer.
+  &-pill.only_active .file_type_pills-remove {
+    display: inline;
+  }
+
+  // Indicators would otherwise flash whenever the modifier key takes part in
+  // an unrelated shortcut, like selecting all text in the search field.
+  &-group:hover,
+  &-group:focus-within {
+    .file_type_pills-pill.removable .file_type_pills-remove,
+    .file_type_pills-pill.addable .file_type_pills-add {
+      display: inline;
+    }
+  }
+}

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

@@ -1,85 +1,256 @@
 ul.files {
-  margin-top: space(2);
-
   > li {
-    background-color: var(--ui-primary-color-lightest);
-    border-radius: rounded();
-    margin-bottom: 2px;
+    display: flex;
+    column-gap: space(2);
+    background-color: var(--ui-surface-color);
+    border-bottom: solid 1px var(--ui-on-surface-color-lightest);
     position: relative;
-    padding: 37px 10px 0 70px;
-    white-space: nowrap;
-    min-height: 23px;
     scroll-margin-top: 100px;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &.is_selected {
+      background-color: var(--ui-selection-color-lighter);
+    }
+
+    // Selecting is the only action offered in selection mode, so the
+    // whole row becomes the target of the select button.
+    &.selectable {
+      &:focus-within .select,
+      &.keyboard_highlight .select {
+        opacity: 1;
+      }
+
+      .select:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+
+      // The thumbnail keeps opening the meta data overlay, so it needs
+      // to stay above the stretched select button.
+      .file_thumbnail_button {
+        position: relative;
+        z-index: 1;
+      }
+    }
   }
 
-  > li:not(.expanded) .details {
-    display: none;
+  // Arrow keys scroll the highlighted row under a resting pointer, so
+  // hovering would point out a second row while the keyboard is driving
+  // the list.
+  &:not(:has(.keyboard_highlight)) > li.selectable {
+    &:hover {
+      background-color: var(--ui-selection-color-light);
+    }
+
+    &:hover .select {
+      opacity: 1;
+    }
   }
 
   li.blank_slate {
     text-align: center;
-    padding: 10px 5px 20px 5px;
+    padding: space(8) space(4);
     color: var(--ui-on-surface-color-light);
   }
 
+  // Only displayed while searching across folders, where the row is the
+  // only clue as to where the item was found. The auto margin leaves the
+  // name of a file at the bottom of the row, where rows without a folder
+  // have it as well.
+  .files-parent_folder {
+    @include folder-icon;
+
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    margin-top: auto;
+    margin-bottom: space(1);
+    color: var(--ui-on-surface-color-light);
+
+    &.is_hidden {
+      display: none;
+    }
+
+    // Same width as the check box below.
+    &:before {
+      flex-shrink: 0;
+      width: 13px;
+      margin-right: space(1);
+      color: var(--ui-primary-color-light);
+      text-align: center;
+    }
+  }
+
+  .files-parent_folder_name {
+    @include label;
+  }
+
   .file_thumbnail_button {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 60px;
-    width: 60px;
+    display: block;
+    flex-shrink: 0;
+    padding: space(1) 0 space(1) space(1);
     border: none;
     background: transparent;
-    padding: 0;
     cursor: pointer;
-    display: block;
   }
 
   .file_thumbnail {
-    height: 100%;
-    width: 100%;
-    vertical-align: middle;
     display: block;
+    width: space(14);
+    height: space(14);
+    border-radius: rounded(sm);
+    overflow: hidden;
+  }
+
+  .file_item-info {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
+    min-width: 0;
+    padding: 0 0 space(2) 0;
+  }
+
+  // The file name labels the check box, so clicking it checks the file
+  // while files are being checked. Undoes the weight, spacing and
+  // positioning which labels of form fields have. Staying static keeps
+  // the row the containing block of the stretched hit area below.
+  .file_item-name_row {
+    display: flex;
+    position: static;
+    align-items: center;
+    gap: space(2);
+    min-width: 0;
+    margin-bottom: 0;
+    font-weight: normal;
+  }
+
+  &.is_selecting {
+    .file_item-name_row {
+      cursor: pointer;
+
+      // The line the file name sits on is a small target, so the label
+      // stretches over the whole row.
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+    }
+
+    .file_item-check_box {
+      display: inline-block;
+    }
+
+    .file_item-check_box,
+    .file_thumbnail_button,
+    .actions {
+      position: relative;
+      z-index: 1;
+    }
+
+    .file_item-reference_count {
+      display: flex;
+    }
+  }
+
+  // Only shown while files are being checked, which is when the number
+  // of places a file would disappear from decides whether to check it.
+  // Sits beside the thumbnail but stays inside its button, so pointing
+  // at the count still opens the details of the file it belongs to.
+  .file_item-reference_count {
+    display: none;
+    position: absolute;
+    // Shares the line of the action buttons on the other side of the
+    // row, which are 30px tall below space(0.5) of padding.
+    top: 7px;
+    left: 100%;
+    align-items: center;
+    height: space(5);
+    margin-left: space(2);
+    padding: 0 space(1.5);
+    border-radius: rounded();
+    background-color: var(--ui-on-surface-color-lightest);
+    color: var(--ui-on-surface-color-light);
+    font-size: 0.6875rem;
+    line-height: 1;
+    white-space: nowrap;
+
+    // Checking the file is all that is left to do with one nothing
+    // references, so its badge lets the click through to the row.
+    &.is_unreferenced {
+      background-color: var(--ui-warning-color-lightest);
+      color: var(--ui-warning-color);
+      pointer-events: none;
+    }
+  }
+
+  // Only shown while files are being checked, which indents the names of
+  // the whole list at once instead of nudging single rows while the
+  // pointer passes them.
+  .file_item-check_box {
+    display: none;
+    flex-shrink: 0;
+    cursor: pointer;
   }
 
   .file_name {
-    margin-bottom: 10px;
     display: block;
 
     @include label;
   }
 
   .actions {
-    position: absolute;
-    right: 10px;
-    top: 3px;
-    text-align: right;
+    --drop-down-button-width: 32px;
 
-    button {
-      float: left;
-      margin-left: 5px;
-      min-width: space(8);
-    }
+    display: flex;
+    align-self: flex-end;
+    align-items: center;
+    padding: space(0.5) space(0.5) 0 0;
   }
 
   button.settings,
-  button.cancel,
   button.confirm,
-  button.retry {
-    @include icon-only-button();
-  }
+  button.retry,
+  .drop_down_button > button {
+    width: var(--drop-down-button-width);
+    padding: 7px 0;
+    text-align: center;
+    border: none;
+    border-radius: rounded();
+    background-color: transparent;
+    color: var(--ui-primary-color-light);
+    line-height: 16px;
+    cursor: pointer;
 
-  button.settings {
-    @include cog-icon;
-  }
+    &:before {
+      font-size: 16px;
+      vertical-align: top;
+    }
 
-  button.remove {
-    @include icon-only-button("destructive");
-    @include trash-icon;
+    &.hover,
+    &: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);
+    }
   }
 
-  button.cancel {
-    @include cancel-icon;
+  button.settings {
+    @include cog-icon;
   }
 
   button.confirm {
@@ -91,14 +262,23 @@ ul.files {
   }
 
   button.select {
-    @include simple-button("primary");
+    @include check-icon;
+    @include transition(opacity 100ms);
 
-    padding-left: 5px;
-    padding-right: 5px;
-    vertical-align: middle;
+    padding: space(2);
+    line-height: 16px;
+    border: none;
+    background-color: transparent;
+    color: var(--ui-primary-color);
+    font-weight: 500;
+    cursor: pointer;
+    opacity: 0;
 
-    position: absolute;
-    top: 3px;
-    left: 70px;
+    // Entypo sits on a different baseline than the label, which would
+    // otherwise make the line box taller than the other buttons.
+    &:before {
+      margin-right: space(1);
+      vertical-align: top;
+    }
   }
 }