promethee 1.2.31 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c9a70ffb1f45b6678af9d367859340a1309668ea
-  data.tar.gz: cfc2d052e35851ced703473ee919d59a282d174b
+  metadata.gz: b56ae5a14593b422b0f502837a6c11dc012884ef
+  data.tar.gz: d36689d35a72cf4f8e61dc051851558b59af3fc9
 SHA512:
-  metadata.gz: 9022e31d0450b34e060912409f4519654f2cb269a9873c6c0c3cf679c0265afb9d0ad4cfc569200dadde7c21a047b4bfafe36871b3c92e3e6afa999c77e2394e
-  data.tar.gz: 36da951c3fa84f269ee671509fb01aa3c2bb959c2c7f819dc1cf2501d49ba9efddf4e23827b4445c965dea4738d73628f7a44cc6df030b5b28123616cbf42076
+  metadata.gz: ffc47a777ea67e4b0bf5a7abd356965f9d8080c37534907d1c32c300ddf3e325aa01a2cf34804ac3d5e3a65caaeb7179dfc5f87da6a488eec87ceda29369b3f0
+  data.tar.gz: a3197b9c368d97b032faa1e5421a2f78683424b99962838f77ec796434121f0d501faf8a268c01dfe4c1aa72b49b42f185e27430a04ac2b3fd0a10d80c52896a

data/app/assets/stylesheets/promethee-edit.sass

@@ -3,7 +3,6 @@ $promethee-transparent-grey: transparentize($promethee-grey, .8)
 $promethee-light-grey: #eee
 $promethee-color: #ff9900 !default
 
-@import 'promethee-edit/write'
 @import 'promethee-edit/move'
 @import 'promethee-edit/preview'
 
@@ -18,9 +17,9 @@ $promethee-color: #ff9900 !default
   height: $real-height
   overflow: hidden
   position: relative
-  display: inline-block
+  text-align: center
 
-  &, &::after, &__button, &__thumb-preview
+  &, &::after, &__logo, &__button, &__thumb-preview
     cursor: pointer
 
   &::after
@@ -29,20 +28,20 @@ $promethee-color: #ff9900 !default
     height: 100%
     top: 0
     left: 0
-    border: 2px solid #253742
+    border: 1px solid #253742
     box-sizing: border-box
     position: absolute
     display: block
 
-  &__button
-    background: #253742
-    padding: 10px
-    margin-bottom: 5px
-    display: block
-    text-align: center
-    color: #fff
+  &__logo
+    padding: 20px
+    svg
+      width: 50px
+      height: 50px
 
   &__thumb-preview
+    margin-top: 20px
+    background: #eee
     width: $rendered-width
     height: $rendered-height
     border: none
@@ -60,14 +59,6 @@ $promethee-color: #ff9900 !default
   padding-top: 50px
   z-index: 10000
   overflow: auto
-  .promethee-edit__write
-    padding-right: 300px
-    padding-top: 15px
-  .promethee-edit__inspect
-    top: 65px
-
-  &--closed
-    display: none
 
   &__navbar
     background: #232323
@@ -91,31 +82,6 @@ $promethee-color: #ff9900 !default
     svg path
       fill: white
 
-  &__button
-    background: white
-    padding: 10px 15px
-    box-sizing: border-box
-    display: inline-block
-    font-size: 12px
-    color: #253742
-    text-align: center
-    line-height: normal
-    border-radius: 20px
-    cursor: pointer
-
-    &--squared
-      min-width: 20px
-      height: 20px
-      padding: 0 0 0 1px
-      line-height: 20px
-
-    &--bordered
-      border: 1px solid #253742
-
-    &--bordered#{&}--squared
-      min-width: 22px
-      height: 22px
-
   &__wrapper
     padding: 10px
 

data/app/assets/stylesheets/promethee-edit/_move.sass

@@ -1,40 +1,62 @@
 .promethee-edit__move
   width: 720px
   margin: 0 auto
-  padding-bottom: 200px
-  *
+  .promethee-edit__component
     font-size: 100%
     line-height: 100%
-    margin: 0
+    &__inner
+      min-height: 50px
+      position: relative
+      border: 1px solid #ccc
+    &--selected
+      > .promethee-edit__component__inner
+        border-color: black
+        > .header
+          background: black
+          color: white
+    &__close
+      position: absolute
+      top: 4px
+      right: 4px
+      padding: 1px 2px 1px 3px
+      background: white
+      font-size: 12px
+      line-height: 12px
+      z-index: 1
   &__columns
-    user-select: none
-    height: 100%
-    position: absolute
-    width: 730px
-    z-index: 0
-    opacity: 0.03
-    .col
-      height: 100%  
-      .color
-        height: 100%
-        background: black
+    .row
+      user-select: none
+      height: 100%
+      min-height: 50px
+      position: fixed
+      top: 0
+      bottom: 0
+      width: 730px
+      z-index: 0
+      opacity: 0.03
+      .col
+        height: 100%  
+        .color
+          height: 100%
+          background: black
   &__page
     z-index: 1
+  &__columns, &__page
+    .row
+      margin-left: -5px
+      margin-right: -5px
+    .col
+      padding-left: 5px
+      padding-right: 5px
   .header
-    background: #253742
-    padding: 5px 5px
+    background: #ccc
+    padding: 4px 5px 5px
     font-size: 8px
     color: white
     text-transform: uppercase
     margin-bottom: 5px
   &__component
     user-select: none
-  .row
-    margin-left: -5px
-    margin-right: -5px
-  .col
-    padding-left: 5px
-    padding-right: 5px
   &__droppable
     visibility: hidden
     opacity: .2
@@ -73,30 +95,6 @@
         right: -5px
         top: -10px
 
-  // All this is done to mask droppable that would put the draggable at the same position 
-    // &--hidden
-    //   visibility: hidden
-    //   pointer-events: none
-  //   &--row
-  //     &:not(&--first)
-  //       visibility: hidden
-  //       pointer-events: none
-
-  //     &--first
-  //       position: absolute
-  //       top: 0
-  //       left: -25px
-  //       width: 40px
-  //       height: 400px
-
-  //     &--inside-column
-  //       position: absolute
-  //       top: 0
-  //       right: -25px
-  //       width: 40px
-  //       height: 400px
-
-
   .ui-draggable-dragging
     z-index: 1000
     opacity: 0.5
@@ -118,4 +116,55 @@
       &.promethee-edit__move__droppable--row--first
         display: block
 
+  .promethee-edit__inspect
+    background: white
+    position: fixed
+    width: calc(50vw - 420px)
+    min-width: 100px
+    top: 80px
+    right: 30px
+    bottom: 15px
+    z-index: 1000
+    &-header
+      font-size: 18px
+      font-weight: bold
+      text-transform: uppercase
+      margin-bottom: 20px
+    &-content
+      overflow: scroll
 
+  .promethee-edit__library
+    background: white
+    position: fixed
+    width: calc(50vw - 420px)
+    min-width: 100px
+    top: 80px
+    left: 30px
+    bottom: 15px
+    z-index: 1000
+    &-header
+      font-size: 18px
+      font-weight: bold
+      text-transform: uppercase
+      margin-bottom: 20px
+    &-content
+      overflow: scroll
+    &__item
+      max-width: 300px
+      z-index: 100000
+      background-color: #253742
+      margin-bottom: 30px
+      height: 100px
+      min-width: 100px
+      padding-top: 10px
+      text-align: center
+      color: white
+      &__icon
+        display: block
+        svg
+          width: 60px
+      &__name
+        margin-top: -10px
+        font-size: 11px
+        font-weight: normal
+        text-transform: uppercase

data/app/views/promethee/_edit.html.erb

@@ -1,5 +1,6 @@
 <%
 promethee_data = Promethee::Data.new master_data
+logo = File.read "#{__dir__}/../../assets/images/icon-promethee.svg"
 %>
 
 <script type="text/javascript">
@@ -27,11 +28,12 @@ promethee.controller('PrometheeController', ['$scope', 'summernoteConfig', funct
 
   $scope.promethee = {
     data: $scope.data,
+    definitions: [],
     inspected: null,
-    mode: 'write',
-    //mode: 'move',
+    mode: 'move',
     preview: 'desktop',
     fullscreen: false
+    // fullscreen: true
   };
 
   $scope.inspect = function(component, event) {
@@ -79,42 +81,43 @@ promethee.controller('PrometheeController', ['$scope', 'summernoteConfig', funct
 }]);
 </script>
 
-<div
-  id="promethee"
-  ng-app="Promethee"
-  ng-controller="PrometheeController as prometheeController"
->
+<div  id="promethee"
+      ng-app="Promethee"
+      ng-controller="PrometheeController as prometheeController"
+      ng-init="component = promethee.data">
 
-  <div class="promethee-open" ng-click="opened = true">
-    <span class="promethee-open__button">Open Prométhée Editor</span>
-    <iframe class="promethee-open__thumb-preview" id="thumb-preview"></iframe>
+  <div class="promethee-open" ng-click="promethee.fullscreen = true">
+    <div class="promethee-open__logo"><%= logo.html_safe %></div>
+    <div>Click to edit page</div>
+    <iframe class="promethee-open__thumb-preview" id="thumb-preview" name="thumb-preview"></iframe>
   </div>
 
-  <div class="promethee-edit" ng-class="{'promethee-edit--closed': !opened}">
+  <div class="promethee-edit" ng-show="promethee.fullscreen">
     <input type="hidden" name="page[data]" id="page_data" value="{{promethee.data}}" />
     <nav class="navbar navbar-default promethee-edit__navbar" ng-class="{'navbar-fixed-top': promethee.fullscreen }">
       <div class="container-fluid">
         <div class="navbar-header promethee-edit__icon">
-          <div class="navbar-brand"><%= File.read(__dir__ + '/../../assets/images/icon-promethee.svg').html_safe %></div>
+          <div class="navbar-brand"><%= logo.html_safe %></div>
         </div>
         <div id="navbar">
           <ul class="nav navbar-nav navbar-right">
-            <li ng-click="promethee.mode = 'write'" ng-class="{active: promethee.mode == 'write'}"><a><%= fa_icon :pencil %></a></li>
-            <li ng-click="promethee.mode = 'move'" ng-class="{active: promethee.mode == 'move'}"><a><%= fa_icon :arrows %></a></li>
+            <li ng-click="promethee.mode = 'move'" ng-class="{active: promethee.mode == 'move'}"><a><%= fa_icon :pencil %></a></li>
             <li ng-click="enablePreview()" ng-class="{active: promethee.mode == 'preview'}">
               <a data-toggle="dropdown"><%= fa_icon :eye %></a>
               <ul class="dropdown-menu" ng-show="promethee.mode == 'preview'">
-                <li ng-click="promethee.preview = 'desktop'" ng-class="{active: promethee.preview == 'desktop'}"><a><i class="fa fa-desktop"></i></a></li>
-                <li ng-click="promethee.preview = 'tablet'" ng-class="{active: promethee.preview == 'tablet'}"><a><i class="fa fa-tablet"></i></a></li>
-                <li ng-click="promethee.preview = 'mobile'" ng-class="{active: promethee.preview == 'mobile'}"><a><i class="fa fa-mobile"></i></a></li>
+                <li ng-click="promethee.preview = 'desktop'" 
+                    ng-class="{active: promethee.preview == 'desktop'}">
+                    <a><i class="fa fa-desktop"></i></a></li>
+                <li ng-click="promethee.preview = 'tablet'" 
+                    ng-class="{active: promethee.preview == 'tablet'}">
+                    <a><i class="fa fa-tablet"></i></a></li>
+                <li ng-click="promethee.preview = 'mobile'" 
+                    ng-class="{active: promethee.preview == 'mobile'}">
+                    <a><i class="fa fa-mobile"></i></a></li>
               </ul>
             </li>
-            <li ng-click="submit()">
-              <a><%= fa_icon :save %></a>
-            </li>
-            <li ng-click="opened = false">
-              <a><%= fa_icon :close %></a>
-            </li>
+            <li ng-click="submit()"><a><%= fa_icon :save %></a></li>
+            <li ng-click="promethee.fullscreen = false"><a><%= fa_icon :close %></a></li>
           </ul>
         </div>
       </div>
@@ -124,7 +127,6 @@ promethee.controller('PrometheeController', ['$scope', 'summernoteConfig', funct
       <%= render partial %>
     <% end %>
 
-    <%= render 'promethee/edit/write' %>
     <%= render 'promethee/edit/move' %>
     <%= render 'promethee/edit/preview' %>
   </div>

data/app/views/promethee/components/aside/_edit.define.html.erb

@@ -1,11 +1,152 @@
-<script>
-  angular.injector(['ng', 'Promethee']).get('definitions').push({
-    name: 'Aside',
-    thumb: 'http://via.placeholder.com/300x200',
-    data: {
-      type: 'aside',
-      attributes: {},
-      children: []
-    }
-  });
-</script>
+<% 
+icon = '
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<g id="Calque_10" display="none">
+  <rect x="-1.5" y="-1.5" display="inline" fill="#76868E" width="103" height="103"/>
+</g>
+<g id="Calque_2" display="none">
+  <rect x="18.9" y="28" display="inline" fill="none" stroke="#253742" stroke-miterlimit="10" width="62.1" height="44"/>
+  <g display="inline">
+    <path fill="#253742" d="M84.5,25v50h-69V25H84.5 M86.5,23h-73v54h73V23L86.5,23z"/>
+  </g>
+  <g display="inline">
+    <polygon fill="#253742" points="47.2,44.6 47.2,55.4 56.3,50     "/>
+    <g>
+      <path fill="#253742" d="M50,41.6c4.6,0,8.4,3.8,8.4,8.4s-3.8,8.4-8.4,8.4s-8.4-3.8-8.4-8.4S45.4,41.6,50,41.6 M50,40.6
+        c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4c5.2,0,9.4-4.2,9.4-9.4S55.2,40.6,50,40.6L50,40.6z"/>
+    </g>
+  </g>
+</g>
+<g id="Calque_3">
+  <g>
+    <g>
+      <path fill="#FFFFFF" d="M71.4,25v50H28.6V25H71.4 M73.4,23H26.6v54h46.9V23L73.4,23z"/>
+    </g>
+    <g>
+      <g>
+        <circle fill="#FFFFFF" cx="37.8" cy="36.5" r="2"/>
+        <line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="43.3" y1="36.5" x2="64.3" y2="36.5"/>
+      </g>
+      <g>
+        <circle fill="#FFFFFF" cx="37.8" cy="45.5" r="2"/>
+        <line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="43.3" y1="45.5" x2="64.3" y2="45.5"/>
+      </g>
+      <g>
+        <circle fill="#FFFFFF" cx="37.8" cy="54.5" r="2"/>
+        <line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="43.3" y1="54.5" x2="64.3" y2="54.5"/>
+      </g>
+      <g>
+        <circle fill="#FFFFFF" cx="37.8" cy="63.5" r="2"/>
+        <line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="43.3" y1="63.5" x2="64.3" y2="63.5"/>
+      </g>
+    </g>
+  </g>
+</g>
+<g id="Calque_4" display="none">
+  <g display="inline">
+    <path fill="#253742" d="M63.9,20.3l10.5,11.8v47.7H25.7V20.3H63.9 M64.8,18.3H23.7v63.4h52.7V31.3L64.8,18.3L64.8,18.3z"/>
+  </g>
+  <g display="inline">
+    <path fill="#253742" d="M67.9,24.3l2.4,2.4v49H29.7V24.3H67.9 M68.3,23.3H28.7v53.4h42.7V26.3L68.3,23.3L68.3,23.3z"/>
+  </g>
+  <polyline display="inline" fill="none" stroke="#253742" stroke-width="2" stroke-miterlimit="10" points="76.3,81.7 23.7,81.7 
+    23.7,18.3   "/>
+  <g display="inline">
+    <polygon fill="#FFFFFF" points="64.3,30.3 64.3,20.7 73.9,30.3     "/>
+    <path fill="#253742" d="M65.3,23.1l6.2,6.2h-6.2V23.1 M63.3,18.3v13h13L63.3,18.3L63.3,18.3z"/>
+  </g>
+  <g display="inline">
+    <g>
+      <path fill="#253742" d="M39.3,30.3L39.3,30.3c0.6,0,1.1,0.1,1.6,0.3c1,0.4,1.7,1.2,2.1,2.2c0.4,1,0.4,2.1-0.1,3.1
+        c-0.6,1.4-2.1,2.4-3.7,2.4c-0.6,0-1.1-0.1-1.6-0.3c-2-0.9-2.9-3.3-2-5.3C36.3,31.2,37.8,30.3,39.3,30.3 M39.3,29.3
+        c-1.9,0-3.7,1.1-4.6,3c-1.1,2.5,0,5.5,2.5,6.6c0.7,0.3,1.4,0.4,2,0.4c1.9,0,3.7-1.1,4.6-3c1.1-2.5,0-5.5-2.5-6.6
+        C40.7,29.4,40,29.3,39.3,29.3L39.3,29.3z"/>
+    </g>
+  </g>
+  <g display="inline">
+    <path fill="#253742" d="M40.7,46.6L48,60.3l0.5,1l0.9-0.6L59.7,54l10.6,9.7v12.5L30,75.7l-0.1-16.5L40.7,46.6 M40.8,44.8l-12,14
+      L29,76.7l42.4,0.6v-14L59.8,52.8l-11,7L40.8,44.8L40.8,44.8z"/>
+  </g>
+</g>
+<g id="Calque_5" display="none">
+</g>
+<g id="Calque_6" display="none">
+  <g display="inline">
+    <path fill="#FFFFFF" d="M38.8,40.8c0-1.6-0.1-3.3-0.3-5.2c2.3,0.1,6.1,0.1,11.5,0.1c5.4,0,9.2,0,11.4-0.1
+      c-0.2,1.9-0.3,3.7-0.3,5.2c0,1.4,0,2.5,0.1,3.3h-0.9c-0.2-2.1-0.5-3.7-0.8-4.7c-0.3-1-0.9-1.8-1.7-2.2c-0.8-0.5-2.1-0.7-3.7-0.7
+      h-2.2v23.2c0,1.1,0.1,2,0.3,2.5c0.2,0.5,0.6,0.9,1.2,1.1c0.6,0.2,1.4,0.3,2.6,0.4v0.8c-1.4-0.1-3.4-0.1-6-0.1c-2.7,0-4.7,0-6,0.1
+      v-0.8c1.2,0,2.1-0.2,2.6-0.4c0.6-0.2,0.9-0.6,1.2-1.1c0.2-0.5,0.3-1.3,0.3-2.5V36.5h-2.2c-1.7,0-2.9,0.2-3.7,0.7
+      c-0.8,0.5-1.4,1.2-1.7,2.2c-0.3,1-0.6,2.6-0.8,4.7h-0.9C38.8,43.3,38.8,42.2,38.8,40.8z"/>
+  </g>
+  <polygon display="inline" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="63.5,23 26.6,23 26.6,77 
+    73.4,77 73.4,32.4   "/>
+  <polyline display="inline" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="62.5,23 62.5,32.4 
+    72.4,32.4   "/>
+</g>
+<g id="Calque_7" display="none">
+  <g display="inline">
+    <path fill="#FFFFFF" d="M84,34v32H16V34H84 M86,32H14v36h72V32L86,32z"/>
+  </g>
+  <g display="inline">
+    <g>
+      <path fill="#FFFFFF" d="M27.8,38.7L27.8,38.7c0.6,0,1.1,0.1,1.6,0.3c1,0.4,1.7,1.2,2.1,2.2c0.4,1,0.4,2.1-0.1,3.1
+        c-0.6,1.4-2.1,2.4-3.7,2.4c-0.6,0-1.1-0.1-1.6-0.3c-2-0.9-2.9-3.3-2-5.3C24.8,39.6,26.2,38.7,27.8,38.7 M27.8,37.7
+        c-1.9,0-3.8,1.1-4.6,3c-1.1,2.5,0,5.5,2.5,6.6c0.7,0.3,1.4,0.4,2,0.4c1.9,0,3.8-1.1,4.6-3c1.1-2.5,0-5.5-2.5-6.6
+        C29.2,37.9,28.5,37.7,27.8,37.7L27.8,37.7z"/>
+    </g>
+  </g>
+  <polyline display="inline" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="81.2,57 62.1,51.3 49,54.8 39.5,47.3 
+    19.2,55   "/>
+  <path display="inline" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M75.8,65.3"/>
+  <path display="inline" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M25.4,65"/>
+  <g display="inline">
+    <path fill="#FFFFFF" d="M80.7,36.5v27H19.3v-27H80.7 M81.7,35.5H18.3v29h63.3V35.5L81.7,35.5z"/>
+  </g>
+</g>
+<g id="Calque_8" display="none">
+  <g display="inline">
+    <path fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M76.5,65.4"/>
+    <rect x="29.3" y="35.3" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="41.6" height="29.5"/>
+    <g>
+      <path fill="#FFFFFF" d="M72.5,33.9v32.2H27.6V33.9H72.5 M74.5,31.9H25.6v36.2h48.9V31.9L74.5,31.9z"/>
+    </g>
+    <polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="76.5,36.6 90.5,36.6 90.5,63.4 
+      76.5,63.4     "/>
+    <polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="23.5,63.4 9.5,63.4 9.5,36.6 23.5,36.6 
+          "/>
+  </g>
+</g>
+<g id="Calque_9" display="none">
+  <g display="inline">
+    <g>
+      <g>
+        <path fill="#FFFFFF" d="M84.5,16.5v67h-69v-67H84.5 M86.5,14.5h-73v71h73V14.5L86.5,14.5z"/>
+      </g>
+      <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="86.5" y1="31.5" x2="13.5" y2="31.5"/>
+      <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="23.5" y1="23.5" x2="30.5" y2="23.5"/>
+      <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="36.5" y1="23.5" x2="77.5" y2="23.5"/>
+    </g>
+    <g>
+      <rect x="18.8" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
+      <rect x="34.9" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
+      <rect x="51.1" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
+      <rect x="67.2" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
+    </g>
+  </g>
+</g>
+</svg>
+
+'
+%>
+<div ng-init="promethee.definitions.push({
+  name: 'Aside',
+  icon: '<%= icon %>',
+  data: {
+    type: 'aside',
+    attributes: {},
+    children: []
+  }
+})"></div>