pageflow 15.6.1 → 15.7.0

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

@@ -1,18 +1,14 @@
 .reference_input {
   position: relative;
   white-space: nowrap;
-  height: 80px;
 
   .model_thumbnail {
     width: 60px;
     height: 60px;
     vertical-align: bottom;
     margin-right: 5px;
-    border: solid 1px #888;
-  }
-
-  div.model_thumbnail {
-    float: left;
+    border-radius: rounded();
+    border: solid 1px var(--ui-primary-color-light);
   }
 
   .file_thumbnail {
@@ -21,7 +17,7 @@
 
   div.title {
     position: absolute;
-    top: 20px;
+    top: space(7);
     left: 70px;
     right: 20px;
     overflow: hidden;
@@ -32,20 +28,20 @@
     @include pencil-icon;
 
     position: absolute;
-    top: 53px;
+    bottom: 0;
     right: 0;
   }
 
   .unset {
-    @include icon-only-button($base-color: #d00);
+    @include icon-only-button("destructive");
     @include cancel-circled-icon;
 
     position: absolute;
-    top: 53px;
+    bottom: 0;
     right: 35px;
   }
 
   .inline_help {
     white-space: normal;
   }
-}
+}

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

@@ -4,13 +4,16 @@
   }
 
   .list_blank_slate {
-    background-color: #efefef;
-    color: #888;
+    background-color: var(--ui-primary-color-lightest);
+    border-radius: rounded();
+    color: var(--ui-on-surface-color-light);
     padding: 10px;
   }
 
   .list_item {
-    background-color: #efefef;
+    background-color: var(--ui-primary-color-lightest);
+    border-radius: rounded();
+    overflow: hidden;
     cursor: default;
     padding: 10px 10px 10px 45px;
     position: relative;
@@ -29,7 +32,6 @@
     width: 35px;
     height: 100%;
     background-size: cover;
-    background-color: #444;
   }
 
   .list_item_thumbnail .thumbnail {
@@ -42,7 +44,8 @@
 
   .list_item_missing_thumbnail {
     @include attention-icon;
-    @include background-icon-center($color: #fff);
+    @include background-icon-center($color: var(--ui-error-color));
+    background-color: var(--ui-error-surface-color);
     display: none;
     position: absolute;
   }
@@ -74,13 +77,13 @@
 
   .list_item_description {
     margin-top: 10px;
-    color: #666;
+    color: var(--ui-on-surface-color-light);
   }
 
   .list_item_buttons {
     position: absolute;
     right: 4px;
-    top: 4px;
+    top: 3px;
     white-space: nowrap;
   }
 
@@ -93,16 +96,16 @@
   }
 
   .list_item_edit_button {
-    @include icon-only-button(#aaa);
+    @include icon-only-button;
     @include pencil-icon;
   }
 
   .list_item_remove_button {
-    @include icon-only-button(#aaa);
+    @include icon-only-button("destructive");
     @include trash-icon;
   }
 
   .sortable-placeholder {
     height: 35px;
   }
-}
+}

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

@@ -1,5 +1,5 @@
 .spinner > div {
-  background-color: #ddd;
+  background-color: var(--ui-on-surface-color-lighter);
   height: 100%;
   width: 6px;
   display: inline-block;

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

@@ -15,7 +15,7 @@
     width: 100%;
     height: 100%;
 
-    background-color: #000;
+    background-color: var(--ui-backdrop-color);
     opacity: 0.8;
   }
 
@@ -37,20 +37,24 @@
     position: relative;
     max-width: 400px;
     top: 20%;
-    border: solid 1px #aaa;
     margin: auto;
     padding: 20px;
-    background-color: #fff;
+    border-radius: rounded();
+    box-shadow: var(--ui-box-shadow-md);
+  }
+
+  p {
+    margin-bottom: space(4);
   }
 
   a.close {
     @include cancel-icon;
-    @include icon-button;
+    @include icon-button("primary");
   }
 
   a.break {
     @include minus-circled-icon;
-    @include icon-button($base-color: #d00);
+    @include icon-button("destructive");
     float: right;
   }
 }

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

@@ -1,7 +1,7 @@
 ul.menu {
   margin-top: 10px;
   margin-bottom: 10px;
-  border-top: 1px solid #bbb;
+  border-top: 1px solid var(--ui-on-surface-color-lightest);
 
   li {
     position: relative;
@@ -9,10 +9,10 @@ ul.menu {
 
   a:first-child {
     @include right-open-icon;
-    @include background-icon-right($color: #888);
+    @include background-icon-right($color: var(--ui-primary-color-light));
 
-    border-bottom: 1px solid #bbb;
+    border-bottom: 1px solid var(--ui-on-surface-color-lightest);
     display: block;
-    padding: 10px 10px;
+    padding: space(2.5);
   }
-}
+}

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

@@ -1,7 +1,6 @@
 .notifications {
-  background-color: #fff;
-  border-bottom: solid 1px #ccc;
-  color: #888;
+  border-bottom: solid 1px var(--ui-on-surface-color-lightest);
+  color: var(--ui-on-surface-color-light);
   font-size: 11px;
 
   margin: -10px -10px 10px -10px;
@@ -35,40 +34,42 @@
   }
 
   li {
-    @include background-icon-left($font-size: 15px, $left: 15px, $color: #888);
+    @include background-icon-left($font-size: 15px, $left: 15px, $color: var(--ui-primary-color-light));
     padding: 4px 10px 4px 35px;
   }
 
   li.uploading {
     @include background-icon-animation(blink);
-    @include background-icon-color(#444);
+    @include background-icon-color(var(--ui-primary-color-light));
     @include up-bold-icon;
-    color: #444;
+    color: var(--ui-primary-color-light);
     display: none;
   }
 
   li.saving {
     @include background-icon-animation(blink);
-    @include background-icon-color(#444);
+    @include background-icon-color(var(--ui-primary-color-light));
     @include arrows-ccw-icon;
-    color: #444;
+    color: var(--ui-primary-color-light);
     display: none;
   }
 
   li.failed {
     @include background-icon-animation(blink);
-    @include background-icon-color(#d00);
+    @include background-icon-color(var(--ui-error-color));
     @include attention-icon;
-    color: #444;
+    color: var(--ui-primary-color-light);
     display: none;
   }
 
   li.confirmable_files {
-    @include background-icon-left($font-size: 15px, $top: 15px, $left: 15px, $color: #888);
+    @include background-icon-left($font-size: 15px, $top: 15px, $left: 15px, $color: var(--ui-primary-color));
     @include background-icon-animation(blink);
     @include bell-icon;
-    background-color: #D2E5FA;
-    color: #000;
+    margin: space(1) space(1) space(1) 0;
+    background-color: var(--ui-selection-color-lighter);
+    border-radius: rounded(md);
+    color: var(--ui-on-surface-color);
     padding-top: 8px;
     display: none;
   }
@@ -76,4 +77,4 @@
   li.saved {
     @include check-icon;
   }
-}
+}

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

@@ -1,12 +1,16 @@
 .other_entry_item {
   width: 100%;
-  padding: 4px 0;
+
+  &:hover {
+    background-color: var(--ui-selection-color-lighter);
+  }
 
   &.active {
-    background-color: $highlight-color;
+    background-color: var(--ui-selection-color-light);
   }
 
   a {
-    padding-left: 4px;
+    display: block;
+    padding: space(2);
   }
 }

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

@@ -1,18 +1,50 @@
 ul.outline {
   &.navigatable li a:first-child {
     @include right-open-icon;
-    @include background-icon-right($color: #888);
+    @include background-icon-right($color: var(--ui-primary-color-light));
+  }
+
+  .drag_handle {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    line-height: 8px;
+    vertical-align: middle;
+    padding: 0 space(1.5) 0 space(0.5);
+    font-family: "entypo";
+    font-size: 10px;
+    opacity: 0.6;
+
+    &::before {
+      content: "\e75f";
+    }
+
+    &::after {
+      content: "\e75c";
+    }
+  }
+
+  .draggable .drag_handle {
+    display: inline-flex;
+    cursor: move;
+  }
+
+  a:hover .drag_handle {
+    opacity: 1;
   }
 
   li {
     position: relative;
-    background-color: #fff;
+    background-color: var(--ui-surface-color);
 
     > div:first-child,
     > a:first-child {
       display: block;
-      padding: 10px 10px 10px 70px;
-      background-color: #efefef;
+      padding: space(2.5) space(2.5) space(2.5) 70px;
+      background-color: var(--ui-primary-color-lightest);
+      border-radius: rounded();
+      overflow: hidden;
     }
 
     &.creating > a:first-child {
@@ -26,7 +58,7 @@ ul.outline {
     }
 
     &.active > a {
-      background-color: #D2E5FA;
+      background-color: var(--ui-selection-color-light);
     }
 
     &.draggable {
@@ -45,7 +77,7 @@ ul.outline {
       width: 35px;
       background-repeat: no-repeat;
       background-position: 3px 45%;
-      opacity: 0.2;
+      opacity: 0.3;
     }
 
     .page_thumbnail {
@@ -64,34 +96,40 @@ ul.outline {
       }
     }
 
-    &.display_in_navigation .type_pictogram {
-      opacity: 0.5;
+    &.hide_in_navigation a {
+      color: var(--ui-on-surface-color-light);
+    }
+
+    &.ui-sortable-helper {
+      box-shadow: var(--ui-box-shadow-xl);
     }
   }
 }
 
 ul.chapters {
   > li {
-    margin-bottom: 10px;
-    padding: 0 10px 10px 30px;
-
-    > a > .pictogram {
-      background-image: image-url("pageflow/chapter_pictogram_small.png");
-    }
+    border: solid 1px var(--ui-on-surface-color-lighter);
+    border-radius: rounded();
+    margin-bottom: space(2.5);
+    padding: 0 space(2.5) space(2.5);
 
     > a:first-child {
-      margin: 0 -10px 0 -30px;
-      padding-left: 30px;
+      padding-left: 0;
+      background-color: transparent;
     }
 
     .number {
       font-weight: bold;
     }
   }
+
+  > .sortable-placeholder {
+    border: 0;
+  }
 }
 
 ul.pages {
-  margin: 20px 0 10px 0;
+  margin: 0 0 space(2.5) 0;
 
   > li {
     margin-bottom: 2px;
@@ -109,6 +147,6 @@ ul.dragged {
 }
 
 .sortable-placeholder {
-  outline: 1px dotted #aaa;
-  background-color: inherit !important;
+  outline: 1px dotted var(--ui-on-surface-color-lighter);
+  border-radius: rounded();
 }

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

@@ -9,23 +9,25 @@ div.page_links {
   }
 
   a.edit {
-    @include icon-only-button(#aaa);
+    @include icon-only-button;
     @include pencil-icon;
     position: absolute;
     right: 40px;
-    top: 4px;
+    top: 3px;
   }
 
   a.remove {
-    @include icon-only-button(#aaa);
+    @include icon-only-button("destructive");
     @include trash-icon;
     position: absolute;
     right: 4px;
-    top: 4px;
+    top: 3px;
   }
 
   li {
     margin-bottom: 2px;
+    border-radius: rounded();
+    overflow: hidden;
 
     > div:first-child {
       padding-left: 45px;
@@ -38,7 +40,7 @@ div.page_links {
 
     .label {
       margin-top: 10px;
-      color: #666;
+      color: var(--ui-on-surface-color-light);
     }
 
     .thumbnail,
@@ -49,12 +51,12 @@ div.page_links {
       height: 100%;
       width: 35px;
       background-size: cover;
-      background-color: #444;
     }
 
     .missing_page_thumbnail {
       @include attention-icon;
-      @include background-icon-center($color: #fff);
+      @include background-icon-center($color: var(--ui-error-color));
+      background-color: var(--ui-error-surface-color);
       display: none;
       position: absolute;
     }
@@ -63,4 +65,4 @@ div.page_links {
       display: block;
     }
   }
-}
+}

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

@@ -1,31 +1,10 @@
 .page_selection {
   .box {
-    top: 5%;
-    width: 90%;
     max-width: 400px;
     max-height: 745px;
-    padding-bottom: 20px;
-    height: 80%;
   }
 
-  .wrapper {
-    background-color: #fff;
-    padding-right: 10px;
-
-    overflow: hidden;
-    overflow-y: scroll;
-
-    position: absolute;
-    top: 70px;
-    bottom: 70px;
-    left: 0;
-    right: 10px;
-
-    .storyline_picker_select_region {
-      margin: 0 10px 20px 30px;
-    }
-
-    h2,
+  .content {
     .add_page,
     .add_chapter {
       display: none;
@@ -36,10 +15,4 @@
       outline: none;
     }
   }
-
-  .footer {
-    position: absolute;
-    bottom: 20px;
-    right: 10px;
-  }
-}
+}

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

@@ -31,10 +31,10 @@
   }
 
   .notice {
-    @include background-icon-left($left: 10px, $top: 18px);
-
+    @include background-icon-left($color: var(--ui-primary-color), $left: 10px, $top: 18px);
+    background-color: var(--ui-selection-color-lighter);
+    border-radius: rounded(md);
     padding: 10px 10px 10px 40px;
-    border-bottom: solid 1px #aaa;
 
     &.files_pending {
       @include hourglass-icon;
@@ -67,7 +67,7 @@
     margin: 5px 0 0 0;
 
     &.invalid {
-      border: 1px solid red;
+      border: 1px solid var(--ui-error-color);
     }
   }
 
@@ -132,7 +132,7 @@
   }
 
   .save {
-    @include icon-button;
+    @include icon-button("primary");
     @include check-icon;
 
     margin-top: 15px;
@@ -140,6 +140,5 @@
 
   &.publishing .save {
     @include hourglass-icon;
-    @include icon-button($base-color: #aaa);
   }
 }

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

@@ -8,10 +8,9 @@
   }
 
   .quota_state {
-    @include background-icon-left($left: 7px, $top: 18px);
+    @include background-icon-left($left: 10px, $top: 18px);
     @include gauge-icon;
 
     padding: 10px 10px 10px 40px;
-    border-bottom: solid 1px #aaa;
   }
-}
+}

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

@@ -3,7 +3,7 @@
   float: right;
 
   button {
-    @include icon-button;
+    @include icon-button("primary");
     @include up-icon;
   }
 
@@ -18,28 +18,34 @@
 
     padding: 10px;
 
-    top: 14px;
+    top: 18px;
     right: -10px;
   }
 
   .dropdown-menu {
     position: relative;
-    background-color: #eee;
-    border: 1px solid #ccc;
+    background-color: var(--ui-surface-color);
+    border: 1px solid var(--ui-on-surface-color-lighter);
+    border-radius: rounded(sm);
+    box-shadow: var(--ui-box-shadow);
+    padding: 1px;
 
     li {
       padding: 7px 10px;
       cursor: pointer;
+
+      &:hover {
+        background-color: var(--ui-selection-color-light);
+      }
     }
   }
 
-
   &:hover .dropdown {
     @include transition(visibility 0ms, opacity 100ms, top 200ms);
     visibility: visible;
     pointer-events: auto;
 
-    top: 18px;
+    top: 20px;
     opacity: 1;
   }
 }

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

@@ -4,9 +4,5 @@
   right: 0;
   left: 0;
 
-  font-family: Helvetica, Arial, "Sans-Serif";
-  font-size: 13px;
-
-  border-top: solid 1px #aaa;
-  background-color: #fff;
+  border-top: solid 1px var(--ui-on-surface-color-lighter);
 }

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

@@ -1,12 +1,16 @@
 .storyline_picker {
   position: relative;
 
+  .storyline_picker_storylines {
+    position: relative;
+  }
+
   .add_storyline,
   .edit_storyline {
     @include icon-only-button;
     display: none;
     position: absolute;
-    top: 11px;
+    bottom: 0;
   }
 
   .add_storyline {
@@ -29,4 +33,4 @@
       display: block;
     }
   }
-}
+}