pageflow 0.11.4 → 12.0.0.rc1

data/app/assets/stylesheets/pageflow/themes/default/player_controls/widget_margins.scss

@@ -1,10 +1,15 @@
 // These have to be defined outside the widget presence scopes
 // (i.e. widget_slim_player_controls_present) since widget margins
-// also work via widget presence css classes. Technically the margins
-// are only needed for the classic variant. They turn out to have no
-// effect on the slim variant though.
+// also work via widget presence css classes. Technically the
+// container and close button margins are only needed for the classic
+// variant. They turn out to have no effect on the slim variant
+// though.
 
 %player_controls-close_button,
 %player_controls-container {
   @extend %pageflow_widget_margin_right_max !optional;
 }
+
+.player_controls-menu_bar-stand_alone {
+  @extend %pageflow_widget_margin_right;
+}

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

@@ -0,0 +1,25 @@
+// scss-lint:disable ImportantRule
+
+$text-track-font-size: 27px !default;
+
+$text-track-line-height: 40px !default;
+
+video::-webkit-media-text-track-display {
+  font-size: $text-track-font-size;
+  font-family: $standard-font;
+  line-height: $text-track-line-height;
+}
+
+// May not be combined with -webkit-media-text-track-display rule
+// above. Otherwise Firefox (e.g. 50.1 on Ubuntu) ignores the rule.
+.vjs-text-track-display div {
+  font-size: $text-track-font-size !important;
+  font-family: $standard-font !important;
+  line-height: $text-track-line-height  !important;
+}
+
+.vjs-paused .vjs-text-track-display div {
+  @include transition(opacity 0.2s, visibility 0.2s);
+  opacity: 0;
+  visibility: hidden !important;
+}

data/app/assets/stylesheets/pageflow/themes/default/variables/widgets.scss

@@ -6,10 +6,10 @@ $basic-background-color: #353535 !default;
 $basic-background-color-transparent: rgba(53, 53, 53, 0.9) !default;
 
 /// Default background color of widgets.
-$widget-background-color: $basic-background-color-transparent;
+$widget-background-color: $basic-background-color-transparent !default;
 
 /// Default text color in widgets.
-$widget-text-color: #fff;
+$widget-text-color: #fff !default;
 
 /// Default type of icons to use in widgets.
 $widget-icons: $standard-icons !default;

data/app/assets/stylesheets/pageflow/themes/default/video_player/vjs_base.scss

@@ -1,121 +1,164 @@
-// This file is a copy of src/css/video-js.css with the following things removed:
-//
-// - Styles for hiding/showing/fading controls
-// - Default theme
-//
-// This theme defines its own rules for fading the controls. The
-// Video.js styles for fading are hard to override since they are
-// quite specific and include `!important` declarations,
-//
-// We need the other base styles though to position the video and for
-// fullscreen display.
-
 // scss-lint:disable all
 
-/*
-REQUIRED STYLES (be careful overriding)
-================================================================================ */
-/* When loading the player, the video tag is replaced with a DIV,
-   that will hold the video tag or object tag for other playback methods.
-   The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video.
-   ** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
-   Otherwise you risk messing up control positioning and full window mode. **
-*/
 .video-js {
-  background-color: #000;
+  display: block;
+  vertical-align: top;
+  box-sizing: border-box;
+  color: #fff;
   position: relative;
   padding: 0;
-  /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
   font-size: 10px;
-  /* Allow poster to be vertially aligned. */
-  vertical-align: middle;
-  /*  display: table-cell; */ /*This works in Safari but not Firefox.*/
-
-  /* Turn off user selection (text highlighting) by default.
-     The majority of player components will not be text blocks.
-     Text areas will need to turn user selection back on. */
-  -webkit-user-select: none;  /* Chrome all / Safari all */
-  -moz-user-select: none;     /* Firefox all */
-  -ms-user-select: none;      /* IE 10+ */
-  -o-user-select: none;
-  user-select: none;
-}
-
-/* Playback technology elements expand to the width/height of the containing div.
-    <video> or <object> */
+  line-height: 1;
+  font-weight: normal;
+  font-style: normal;
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
+  .video-js:-moz-full-screen {
+    position: absolute; }
+  .video-js:-webkit-full-screen {
+    width: 100% !important;
+    height: 100% !important; }
+
+.video-js *,
+.video-js *:before,
+.video-js *:after {
+  box-sizing: inherit; }
+
+.video-js ul {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  list-style-position: outside;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0; }
+
 .video-js .vjs-tech {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
-}
-
-/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
-.video-js:-moz-full-screen { position: absolute; }
+  height: 100%; }
 
-/* Fullscreen Styles */
 body.vjs-full-window {
   padding: 0;
   margin: 0;
   height: 100%;
-  overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
-}
-.video-js.vjs-fullscreen {
+  overflow-y: auto; }
+
+.vjs-full-window .video-js.vjs-fullscreen {
   position: fixed;
   overflow: hidden;
   z-index: 1000;
   left: 0;
   top: 0;
   bottom: 0;
-  right: 0;
+  right: 0; }
+
+.video-js.vjs-fullscreen {
   width: 100% !important;
   height: 100% !important;
-  _position: absolute; /* IE6 Full-window (underscore hack) */
-}
-.video-js:-webkit-full-screen {
-  width: 100% !important; height: 100% !important;
-}
+  padding-top: 0 !important; }
+
+.video-js.vjs-fullscreen.vjs-user-inactive {
+  cursor: none; }
+
+.vjs-hidden {
+  display: none !important; }
+
+.vjs-disabled {
+  opacity: 0.5;
+  cursor: default; }
+
+.video-js .vjs-offscreen {
+  height: 1px;
+  left: -9999px;
+  position: absolute;
+  top: 0;
+  width: 1px; }
+
+.vjs-lock-showing {
+  display: block !important;
+  opacity: 1;
+  visibility: visible; }
+
+.vjs-no-js {
+  padding: 20px;
+  color: #fff;
+  background-color: #000;
+  font-size: 18px;
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: center;
+  width: 300px;
+  height: 150px;
+  margin: 0px auto; }
+
+.vjs-no-js a,
+.vjs-no-js a:visited {
+  color: #66A8CC; }
 
-/* Poster Styles */
 .vjs-poster {
+  display: inline-block;
+  vertical-align: middle;
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: contain;
+  background-color: #000000;
   cursor: pointer;
-  height: 100%;
   margin: 0;
   padding: 0;
-  position: relative;
-  width: 100%;
-}
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%; }
+
 .vjs-poster img {
   display: block;
+  vertical-align: middle;
   margin: 0 auto;
   max-height: 100%;
   padding: 0;
-  width: 100%;
-}
+  width: 100%; }
 
-/* Text Track Styles */
-/* Overall track holder for both captions and subtitles */
-.video-js .vjs-text-track-display {
-  text-align: center;
+.vjs-has-started .vjs-poster {
+  display: none; }
+
+.vjs-audio.vjs-has-started .vjs-poster {
+  display: block; }
+
+.vjs-using-native-controls .vjs-poster {
+  display: none; }
+
+.vjs-text-track-display {
   position: absolute;
-  bottom: 4em;
-  left: 1em; /* Leave padding on left and right */
-  right: 1em;
-  font-family: Arial, sans-serif;
-}
-/* Individual tracks */
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  pointer-events: none; }
+
 .video-js .vjs-text-track {
-  display: none;
-  font-size: 1.4em;
+  font-size: 17px;
   text-align: center;
   margin-bottom: 0.1em;
-  /* Transparent black background, or fallback to all black (oldIE) */
-  background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
-}
-.video-js .vjs-subtitles { color: #fff; } /* Subtitles are white */
-.video-js .vjs-captions { color: #fc6; } /* Captions are yellow */
-.vjs-tt-cue { display: block; }
+  background-color: #000;
+  background-color: rgba(0, 0, 0, 0.5); }
+
+.vjs-subtitles {
+  color: #fff; }
+
+.vjs-captions {
+  color: #fc6; }
+
+.vjs-tt-cue {
+  display: block; }
+
+@media print {
+  .video-js > *:not(.vjs-tech):not(.vjs-poster) {
+    visibility: hidden; } }

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

@@ -1,14 +1,23 @@
 .videoWrapper {
   @extend %pageflow_widget_margin_right !optional;
 
-  @include desktop {
-    position: relative;
-    height: 100%;
-    width: auto;
+  position: relative;
+  height: 100%;
+  width: auto;
+  overflow: hidden;
+
+  video::-webkit-media-controls-start-playback-button {
+    // scss-lint:disable ImportantRule
+    // Hide native video play button
+    display: none !important;
+    // scss-lint:enable ImportantRule
+  }
+
+  .vjs-control-bar {
+    display: none !important;
   }
 
-  @include pad_portrait {
-    position: initial;
-    height: initial;
+  .vjs-loading-spinner {
+    display: none !important;
   }
 }

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

@@ -3,8 +3,12 @@
 
 %pageflow-ui {
   @import "./ui/forms";
+  @import "./ui/table_view";
+  @import "./ui/table_cells/presence_table_cell";
+  @import "./ui/table_cells/delete_row_table_cell";
+  @import "./ui/table_cells/icon_table_cell";
   @import "./ui/tabs_view";
   @import "./ui/tooltip";
 }
 
-@import "./ui/input/extended_select_input";
+@import "./ui/input/extended_select_input";

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

@@ -85,63 +85,6 @@ textarea.short {
   padding-top: 10px;
 }
 
-.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;
-  }
-
-  a.edit_positioning {
-    @include icon-only-button();
-    @include doc-landscape-icon;
-
-    position: absolute;
-    top: 53px;
-    left: 70px;
-  }
-
-  .inline_help {
-    white-space: normal;
-  }
-}
-
 .page_reference_input {
   p {
     margin: 10px 0;
@@ -273,4 +216,8 @@ textarea.short {
   font-weight: normal;
   text-transform: none;
   font-size: 13px;
-}
+}
+
+.configuration_editor a {
+  text-decoration: underline;
+}

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

@@ -0,0 +1,7 @@
+.delete_row_table_cell {
+  .remove {
+    @include icon-only-button(#aaa);
+    @include trash-icon;
+    float: right;
+  }
+}

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

@@ -0,0 +1,16 @@
+.icon_table_cell {
+  font-size: 150%;
+  @include fa-exclamation-circle-icon;
+
+  &.subtitles {
+    @include fa-comments-o-icon;
+  }
+
+  &.captions {
+    @include fa-deafness-icon;
+  }
+
+  &.descriptions {
+    @include fa-low-vision-icon;
+  }
+}