pageflow 0.5.0 → 0.6.0

data/app/assets/javascripts/pageflow/widgets/share_menu.js

@@ -0,0 +1,60 @@
+(function($) {
+  $.widget('pageflow.shareMenu', {
+    _create: function() {
+      var $element = this.element,
+          options = this.options,
+          $links = options.links || $('a', $element),
+          $subMenu = options.subMenu || $($element.find('.sub_share')),
+          $subLinks = $('a', $subMenu),
+          $closeOnMouseLeaving = options.closeOnMouseLeaving,
+          scroller = options.scroller;
+
+      $links.on('touchend click', function(event) {
+        var $this = $(this),
+            $a = $this.find('a').length ? $this.find('a') : $this,
+            active = $a.hasClass('active');
+
+        $links.removeClass('active');
+        $a.addClass('active');
+
+        if ($a.data('share-page')) {
+          event.preventDefault();
+
+          var $currentPage = pageflow.slides.currentPage(),
+              id = $currentPage.attr('id') || $currentPage.data('perma-id'),
+              siteShareUrl = $a.data('share-page').replace(/permaId$/, id),
+              $insertAfter = options.insertAfter || $a;
+
+          $($subLinks[0]).attr('href', $a.attr('href'));
+          $($subLinks[1]).attr('href', siteShareUrl);
+
+          if (!$insertAfter.next().hasClass('sub_share')) {
+            $insertAfter.after($subMenu);
+          }
+
+          if (active) {
+            $subMenu.toggle();
+            $a.toggleClass('active');
+          }
+          else {
+            $subMenu.show();
+            $links.find('.button').removeClass('pressed');
+            $(this).find('.button').addClass('pressed');
+          }
+
+          if (scroller) {
+            scroller.refresh();
+          }
+        }
+      });
+
+      if(!!$closeOnMouseLeaving) {
+        $closeOnMouseLeaving.on('mouseleave', function() {
+          $links.removeClass('active');
+          $(this).find('.button').removeClass('pressed');
+          $subMenu.hide();
+        });
+      }
+    }
+  });
+}(jQuery));

data/app/assets/stylesheets/pageflow/admin.css.scss

@@ -3,6 +3,7 @@
 @import "pageflow/admin/columns";
 @import "pageflow/admin/entries";
 @import "pageflow/admin/quotas";
+@import "pageflow/admin/tabs_view";
 
 #wrapper {
   overflow: hidden;

data/app/assets/stylesheets/pageflow/admin/tabs_view.css.scss

@@ -0,0 +1,50 @@
+.admin_tabs_view {
+  clear: both;
+  background-color: #f4f4f4;
+  @include inset-shadow(0, 1px, 4px, #ddd);
+
+  > .tabs {
+    @include gradient(#efefef, #dfe1e2);
+    box-shadow: 0 1px 1px rgba(0,0,0,0.10), 0 1px 0 0 rgba(255,255,255, 0.8) inset;
+    border: solid 1px #c7c7c7;
+    @include border-colors(#d3d3d3, #c7c7c7, #c2c2c2);
+    @include text-shadow;
+    color: $primary-color;
+    font-size: 0.9em;
+    padding: 0;
+    margin: 0;
+
+    li {
+      display: inline-block;
+
+      &.active {
+        @include gradient(#f4f4f4, #fff);
+        color: #444;
+        box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.1) inset;
+
+        a {
+          cursor: default;
+        }
+      }
+    }
+
+    a {
+      display: block;
+      padding: 10px 15px;
+      color: $section-header-text-color;
+      text-decoration: none;
+      font-weight: bold;
+    }
+  }
+
+  > .tab_container {
+    @extend .panel_contents;
+
+    display: none;
+    padding: 10px;
+
+    &.active {
+      display: block;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/application_with_simulated_media_queries.css.scss

@@ -0,0 +1,2 @@
+$simulated-media-queries: true;
+@import "pageflow/application";

data/app/assets/stylesheets/pageflow/base.css.scss

@@ -63,4 +63,5 @@ a {
 @import "./player_controls";
 @import "./text_variants";
 @import "./multimedia_alert";
-@import "./hide_text";
+@import "./hide_text";
+@import "./subshare";

data/app/assets/stylesheets/pageflow/editor/{image_positioning.css.scss → background_positioning.css.scss}

@@ -1,10 +1,13 @@
-.image_positioning {
+.background_positioning {
   .box {
     top: 5%;
     width: 90%;
-    max-width: 800px;
+    max-width: 1000px;
+    max-height: 745px;
     padding-bottom: 20px;
     overflow: hidden;
+    height: 80%;
+    overflow-y: scroll;
   }
 
   label {
@@ -44,57 +47,49 @@
 
   .wrapper {
     text-align: center;
-    margin-bottom: 40px;
+    margin: 20px;
   }
 
-  .container {
-    display: inline-block;
-    position: relative;
-    height: 100%;
+  .previews {
+    overflow: scroll;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    margin-bottom: 20px;
 
-    img {
-      border: solid 1px #444;
-      display: block;
-      max-height: 500px;
-      max-width: 800px;
+    > div {
+      height: 100%;
+      white-space: nowrap;
     }
   }
 
-  .mask {
-    position: absolute;
-    background-color: #000;
-    opacity: 0.3;
+  .preview {
+    display: inline-block;
+    margin: 5px 10px;
+    vertical-align: middle;
 
-    &.left {
-      top: 0;
-      left: 0;
-      height: 100%;
-      width: 200px;
-      border-right: solid 1px #eee;
+    .image {
+      border: solid 1px #444;
+      background-size: cover;
     }
 
-    &.top {
-      top: 0;
-      left: 0;
-      height: 100px;
-      border-bottom: solid 1px #eee;
-      width: 100%;
+    .label {
+      padding: 3px 0;
+      font-size: 11px;
+      color: #444;
     }
+  }
 
-    &.right {
-      top: 0;
-      right: 0;
-      height: 100%;
-      width: 200px;
-      border-left: solid 1px #eee;
-    }
+  .container {
+    display: inline-block;
+    position: relative;
+    height: 100%;
 
-    &.bottom {
-      bottom: 0;
-      left: 0;
-      height: 100px;
-      width: 100%;
-      border-top: solid 1px #eee;
+    img {
+      border: solid 1px #444;
+      display: block;
+      max-height: 300px;
+      max-width: 600px;
+      cursor: crosshair;
     }
   }
 
@@ -102,40 +97,46 @@
     position: absolute;
     border: none;
 
+    a {
+      @include background-icon-center($font-size: 20px);
+      @include arrow-combo-icon;
+      position: absolute;
+      display: block;
+      width: 40px;
+      height: 40px;
+      margin: 0;
+      background-color: #fff;
+      border: solid 1px #888;
+      border-radius: 4px;
+      left: auto;
+      top: auto;
+    }
+
     &.horizontal {
       bottom: 0;
-      left: 50px;
-      right: 50px;
+      left: 40px;
+      right: 40px;
       height: 0;
+
+      a {
+        @include transform(rotate(90deg));
+        margin-left: -20px;
+        margin-top: -20px;
+      }
     }
 
     &.vertical {
       right: 0;
-      top: 50px;
-      bottom: 50px;
+      top: 40px;
+      bottom: 40px;
       width: 0;
       height: auto;
-    }
-  }
 
-  .slider a {
-    @include background-icon-center($font-size: 20px);
-    @include arrow-combo-icon;
-    position: absolute;
-    display: block;
-    width: 40px;
-    height: 40px;
-    margin-left: -20px;
-    margin-top: -20px;
-    background-color: #fff;
-    border: solid 1px #888;
-    border-radius: 4px;
-    left: auto;
-    top: auto;
-  }
-
-  .slider.horizontal a {
-    @include transform(rotate(90deg));
+      a {
+        margin-left: -20px;
+        margin-bottom: -20px;
+      }
+    }
   }
 
   a.save {

data/app/assets/stylesheets/pageflow/editor/base.css.scss

@@ -1,5 +1,5 @@
 @import "bourbon";
-@import "pageflow/mixins";
+@import "pageflow/ui";
 @import "pageflow/animations";
 
 @import 'pageflow/jquery_ui';
@@ -7,12 +7,14 @@
 @import "./dialogs";
 @import "./colors";
 @import "./embedded";
-@import "./image_positioning";
+@import "./background_positioning";
 @import "./files_explorer";
 @import "./locked";
 @import "./help";
 
 .editor {
+  @extend %pageflow-ui;
+
   font-family: Helvetica, "Sans-Serif";
   font-size: 13px;
 
@@ -44,7 +46,6 @@
     text-decoration: none;
   }
 
-  @import "./forms";
   @import "./outline";
   @import "./failures";
   @import "./menu";
@@ -56,13 +57,13 @@
   @import "./file_stages";
   @import "./file_thumbnails";
   @import "./wysihtml5";
-  @import "./tabs_view";
   @import "./notifications";
   @import "./publish_entry";
   @import "./other_entry_item";
   @import "./select_button";
   @import "./quotas";
   @import "./back_button_decorator";
+  @import "./widgets";
 
   a.publish {
     @include eye-icon;
@@ -111,7 +112,8 @@
 
 main.ui-layout-pane {
   padding: 0;
-  overflow-x: hidden;
+  overflow: hidden;
+  border: 0;
 }
 
 main > .container {

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

@@ -13,6 +13,7 @@
   .pictogram {
     background-color: #444;
     @include background-icon-center($color: #eee, $font-size: 30px);
+    @include background-icon-animation(blink);
 
     &.audio {
       @include note-icon;
@@ -20,43 +21,40 @@
 
     &.uploading {
       @include up-bold-icon;
-      @include background-icon-animation(blink);
     }
 
     &.uploading_to_s3 {
       @include cloud-icon;
-      @include background-icon-animation(blink);
     }
 
     &.fetching_meta_data {
       @include clipboard-icon;
-      @include background-icon-animation(blink);
     }
 
     &.processing,
     &.encoding {
       @include cog-icon;
-      @include background-icon-animation(blink);
     }
 
     &.empty {
       @include picture-icon;
-    }
-
-    &.failed {
       @include background-icon-animation(none);
-      @include attention-icon;
     }
 
     &.action_required {
       @include bell-icon;
-      @include background-icon-animation(blink);
     }
   }
 
+  div.pictogram.failed {
+    @include attention-icon;
+    @include background-icon-animation(none);
+  }
+
   &.ready {
     .pictogram {
       display: none;
+      @include background-icon-animation(none);
     }
   }
 

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

@@ -14,21 +14,21 @@
     @include transition(visibility 200ms, opacity 200ms, top 200ms);
 
     position: absolute;
+    z-index: 1;
 
     padding: 10px;
 
-    top: 8px;
-    left: -9px;
+    top: 14px;
+    right: -10px;
   }
 
   .dropdown-menu {
     position: relative;
     background-color: #eee;
     border: 1px solid #ccc;
-    border-radius: 3px;
 
     li {
-      padding: 5px;
+      padding: 7px 10px;
       cursor: pointer;
     }
   }

data/app/assets/stylesheets/pageflow/editor/widgets.css.scss

@@ -0,0 +1,4 @@
+.edit_widget {
+  list-style: none;
+  padding: 5px 0;
+}