pageflow 0.11.4 → 12.0.0.rc1

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

@@ -1,18 +1,28 @@
+$file-meta-data-label-color: #888 !default;
+$file-meta-data-icon-link-color: #555 !default;
+$file-meta-data-active-icon-link-color: #000 !default;
+
 .file_meta_data {
   margin-left: -65px;
+  white-space: normal;
 
   table {
     margin-bottom: 5px;
     width: 100%;
   }
 
+  th,
+  td {
+    vertical-align: top;
+  }
+
   th {
     width: 45px;
-    padding: 5px 20px 5px 0;
+    padding: 7px 20px 5px 0;
     font-weight: normal;
     text-align: right;
     font-size: 11px;
-    color: #888;
+    color: $file-meta-data-label-color;
   }
 
   td {
@@ -23,9 +33,19 @@
     text-decoration: underline;
   }
 
-  input[type="text"] {
-    display: block;
-    line-height: 15px;
-    margin: -5px 0;
+  .edit {
+    @include background-icon-center($font-size: 15px,
+                                    $color: $file-meta-data-icon-link-color);
+    @include pencil-icon;
+
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    float: right;
+    margin-top: -2px;
+
+    &:hover {
+      @include background-icon-color($file-meta-data-active-icon-link-color);
+    }
   }
 }

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

@@ -0,0 +1,32 @@
+&.file_settings_dialog {
+  .box {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    bottom: 20px;
+    right: 20px;
+    max-width: 1100px;
+    max-height: 800px;
+    background-color: #eee;
+  }
+
+  .content {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    bottom: 50px;
+    left: 20px;
+    overflow: auto;
+  }
+
+  .footer {
+    position: absolute;
+    right: 20px;
+    bottom: 10px;
+    left: 20px;
+  }
+
+  .edit_file {
+    max-width: 600px;
+  }
+}

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

@@ -49,6 +49,7 @@ ul.files {
     }
   }
 
+  a.settings,
   a.cancel,
   a.confirm,
   a.remove,
@@ -56,6 +57,10 @@ ul.files {
     @include icon-only-button(#aaa);
   }
 
+  a.settings {
+    @include cog-icon;
+  }
+
   a.remove {
     @include trash-icon;
   }

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

@@ -0,0 +1,25 @@
+.filtered_files {
+  position: relative;
+
+  &-banner {
+    display: block;
+    padding: 7px 10px;
+    margin: 0 -10px;
+    background-color: #f9f1b7;
+    border-top: solid 1px #e4dc9d;
+    border-bottom: solid 1px #e4dc9d;
+  }
+
+  &-filter_name {
+    font-weight: bold;
+  }
+
+  &-reset_filter {
+    @include background-icon-center;
+    @include cancel-icon;
+
+    position: absolute;
+    right: 7px;
+    top: 15px;
+  }
+}

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

@@ -1 +1,2 @@
-@import "./inputs/reference";
+@import "./inputs/file_input";
+@import "./inputs/reference";

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

@@ -0,0 +1,65 @@
+.file_input {
+  position: relative;
+  white-space: nowrap;
+  height: 80px;
+
+  .file_thumbnail {
+    width: 60px;
+    height: 60px;
+    vertical-align: bottom;
+    margin-right: 5px;
+    border: solid 1px #888;
+  }
+
+  div.file_thumbnail {
+    float: left;
+  }
+
+  div.file_name {
+    position: absolute;
+    top: 20px;
+    left: 70px;
+    right: 20px;
+    overflow: hidden;
+  }
+
+  a.choose {
+    @include icon-only-button;
+    @include pencil-icon;
+
+    position: absolute;
+    top: 53px;
+    right: 0;
+  }
+
+  a.unset {
+    @include icon-only-button($base-color: #d00);
+    @include cancel-circled-icon;
+
+    position: absolute;
+    top: 53px;
+    right: 35px;
+  }
+
+  .drop_down_button {
+    button {
+      @include fa-ellipsis-v-icon;
+      width: 31px;
+    }
+
+    position: absolute;
+    top: 53px;
+    left: 70px;
+  }
+
+  .inline_help {
+    white-space: normal;
+  }
+
+  &.is_unset {
+    .unset,
+    .drop_down_button {
+      display: none;
+    }
+  }
+}

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

@@ -27,7 +27,7 @@
     overflow: hidden;
   }
 
-  a.choose {
+  .choose {
     @include icon-only-button;
     @include pencil-icon;
 
@@ -36,7 +36,7 @@
     right: 0;
   }
 
-  a.unset {
+  .unset {
     @include icon-only-button($base-color: #d00);
     @include cancel-circled-icon;
 

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

@@ -0,0 +1,39 @@
+.text_tracks {
+  $table-cell-color: #eee;
+
+  height: 700px;
+
+  .text_tracks_container {
+    background-color: #fff;
+    min-height: 100%;
+  }
+
+  .files_upload_panel {
+    position: absolute;
+    top: 60px;
+    right: 370px;
+    bottom: 50px;
+    left: 20px;
+    overflow: auto;
+  }
+
+  .selected_file_panel {
+    position: absolute;
+    right: 20px;
+    top: 60px;
+    width: 330px;
+  }
+
+  .table_view {
+    width: 100%;
+  }
+
+  td {
+    background-color: $table-cell-color;
+  }
+
+  .upload {
+    position: relative;
+    top: 12px;
+  }
+}

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

@@ -44,6 +44,7 @@
   .scroll_indicator {
     cursor: pointer;
     visibility: hidden;
+    white-space: nowrap;
 
     @include desktop {
       left: 8%;

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

@@ -1,5 +1,7 @@
-@mixin icon-button($style: simple, $base-color: #6AACF7) {
-  @include button($style, $base-color);
+$icon-button-default-base-color: #6aacf7 !default;
+
+@mixin icon-button($base-color: $icon-button-default-base-color) {
+  @include simple-button($base-color);
 
   color: #fff;
   padding-top: 5px;
@@ -13,8 +15,8 @@
   }
 }
 
-@mixin icon-only-button($style: simple, $base-color: #6AACF7) {
-  @include button($style, $base-color);
+@mixin icon-only-button($base-color: $icon-button-default-base-color) {
+  @include simple-button($base-color);
 
   padding-top: 5px;
   padding-bottom: 4px;
@@ -25,4 +27,74 @@
     font-size: 16px;
     vertical-align: middle;
   }
-}
+}
+
+@mixin simple-button($base-color) {
+  $grayscale: $base-color == grayscale($base-color);
+  $color: hsl(0, 0, 100%);
+  $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+  $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
+  $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
+  $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
+
+  @if lightness($base-color) > 70% {
+    $color: hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border: grayscale($border);
+    $inset-shadow: grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow: grayscale($text-shadow);
+  }
+
+  border: 1px solid $border;
+  border-radius: 3px;
+  box-shadow: inset 0 1px 0 0 $inset-shadow;
+  color: $color;
+  display: inline-block;
+  font-size: 11px;
+  font-weight: bold;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 7px 18px;
+  text-decoration: none;
+  text-shadow: 0 1px 0 $text-shadow;
+  background-clip: padding-box;
+
+  &:hover:not(:disabled):not(.disabled) {
+    $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+    $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
+    $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
+
+    @if $grayscale == true {
+      $base-color-hover: grayscale($base-color-hover);
+      $inset-shadow-hover: grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+    }
+
+    box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
+    cursor: pointer;
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+  }
+
+  &:active:not(:disabled):not(.disabled) {
+    $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+    $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+    $inset-shadow: #eee;
+
+    @if $grayscale == true {
+      $border-active: grayscale($border-active);
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
+    border: 1px solid $border-active;
+    box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 $inset-shadow;
+  }
+
+  &:disabled,
+  &.disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+}

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

@@ -517,4 +517,6 @@
 @mixin fa-sliders-icon { @include fontawesome-icon("\f1de"); }
 @mixin fa-share-alt-icon { @include fontawesome-icon("\f1e0"); }
 @mixin fa-share-alt-square-icon { @include fontawesome-icon("\f1e1"); }
-@mixin fa-bomb-icon { @include fontawesome-icon("\f1e2"); }
+@mixin fa-bomb-icon { @include fontawesome-icon("\f1e2"); }
+@mixin fa-deafness-icon { @include fontawesome-icon("\f2a4"); }
+@mixin fa-low-vision-icon { @include fontawesome-icon("\f2a8"); }

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

@@ -1,11 +1,7 @@
 @import "page_types/audio";
-@import "page_types/audio_loop";
 @import "page_types/background-image";
-@import "page_types/background-video";
 @import "page_types/video";
 
 @include pageflow-page-type(audio);
-@include pageflow-page-type(audio_loop);
 @include pageflow-page-type(background_image);
-@include pageflow-page-type(background_video);
 @include pageflow-page-type(video);

data/app/assets/stylesheets/pageflow/page_types/video.scss

@@ -1,6 +1,6 @@
 @import "./video/content_hiding";
 
-.has_phone_platform .page .videoPage .videoWrapper {
+.has_native_video_player .page .videoPage .videoWrapper {
   margin-right: 0;
   position: initial;
   height: 100%;
@@ -114,3 +114,7 @@
 .js .non_js_video {
   display: none;
 }
+
+.has_no_native_video_player .videoPage .background_image {
+  display: none;
+}

data/app/assets/stylesheets/pageflow/page_types/video/content_hiding.scss

@@ -1,3 +1,4 @@
+.js .audioPage.has_text_tracks,
 .js .videoPage {
   .scroller {
     @include transition(opacity 0.2s linear);

data/app/assets/stylesheets/pageflow/themes/default/base.scss

@@ -26,4 +26,5 @@
 @import "./player_controls";
 @import "./video_player";
 @import "./video_wrapper";
+@import "./text_track_cues";
 @import "./slideshow";

data/app/assets/stylesheets/pageflow/themes/default/built_in_page_types.scss

@@ -1,5 +1,3 @@
 @include pageflow-page-type-pictograms("background_image", "pageflow/themes/default/page_type_pictograms/background_image");
-@include pageflow-page-type-pictograms("background_video", "pageflow/themes/default/page_type_pictograms/background_video");
 @include pageflow-page-type-pictograms("video", "pageflow/themes/default/page_type_pictograms/video");
 @include pageflow-page-type-pictograms("audio", "pageflow/themes/default/page_type_pictograms/audio");
-@include pageflow-page-type-pictograms("audio_loop", "pageflow/themes/default/page_type_pictograms/audio_loop");

data/app/assets/stylesheets/pageflow/themes/default/definitions.scss

@@ -5,5 +5,6 @@
 @import "./mixins/sprite_icons";
 @import "./mixins/typography";
 @import "./mixins/indicator_typography";
+@import "./mixins/cue_margins";
 
 @import "./animations";

data/app/assets/stylesheets/pageflow/themes/default/loading_spinner.scss

@@ -20,9 +20,19 @@ $loading-spinner-logo-height: 112px !default;
 /// Spinner background color.
 $loading-spinner-background-color: #3b5159 !default;
 
-/// Spinner glow (radiant) color.
+/// What to display behind the logo:
+///
+/// - `"glow"`: Display radial gradient (default).
+/// - `"custom"`: Display `loading_spinner/background.png` image.
+/// - `"none"`: Nothing
+$loading-spinner-background: "glow" !default;
+
+/// Radial gradient color.
 $loading-spinner-glow-color: rgba(117, 149, 160, 0.8) !default;
 
+/// Apply opacity animation to glow or background image.
+$loading-spinner-animate-background: true !default;
+
 @if not $custom-loading-spinner {
   .loading_spinner {
     // scss-lint:disable ImportantRule
@@ -32,21 +42,30 @@ $loading-spinner-glow-color: rgba(117, 149, 160, 0.8) !default;
     // scss-lint:enable ImportantRule
 
     &:before {
-      content: "";
-      @include radial-gradient(circle,
-                               $loading-spinner-glow-color 0%,
-                               $loading-spinner-background-color 140px);
       background-position: 50% 50%;
       background-repeat: no-repeat;
-      background-size: 100% 100%;
-      display: inline-block;
+      display: block;
       height: 100%;
       width: 100%;
-      opacity: 0;
-      @include animation-name(loadingSpinnerGradientAnimation);
-      @include animation-duration(5s);
-      @include animation-iteration-count(infinite);
-      @include animation-timing-function(ease-in);
+
+      @if $loading-spinner-background == "glow" {
+        content: "";
+        @include radial-gradient(circle,
+                                 $loading-spinner-glow-color 0%,
+                                 $loading-spinner-background-color 140px);
+        background-size: 100% 100%;
+      } @else if $loading-spinner-background == "custom" {
+        content: "";
+        background-image: image-url("pageflow/themes/#{$theme-name}/loading_spinner/background.png");
+      }
+
+      @if $loading-spinner-animate-background {
+        opacity: 0;
+        @include animation-name(loadingSpinnerGradientAnimation);
+        @include animation-duration(5s);
+        @include animation-iteration-count(infinite);
+        @include animation-timing-function(ease-in);
+      }
     }
 
     @include keyframes(loadingSpinnerGradientAnimation) {