@concretecms/bedrock 1.1.18 → 1.2.0

package/assets/cms/js/edit-mode/containerblock.js

@@ -19,20 +19,39 @@ import _ from 'underscore'
             elem.children('.ccm-block-cover').remove()
             my.bindDrag()
             my.bindDelete()
+            my.bindEditDesign()
         },
 
         bindDelete: function ContainerBlockDelete() {
             var my = this
-            var deleter = my.getElem().find('>ul a[data-inline-command=delete-block]')
+            var deleter = my.getElem().find('ul.ccm-edit-mode-inline-container a[data-inline-command=delete-block]')
             deleter.unbind('click.containerDelete').on('click.containerDelete', function(e) {
                 e.preventDefault()
                 my.delete()
             })
         },
 
+        bindEditDesign: function ContainerBlockEditDesign() {
+            var my = this
+            var menuElem = my.getElem().find('ul.ccm-edit-mode-inline-container a[data-inline-command=edit-container-design]')
+            menuElem.off('click.edit-mode')
+                .on('click.edit-mode', function (e) {
+                    e.preventDefault()
+                    // we are going to place this at the END of the list.
+                    var $link = $(this)
+                    var bID = parseInt($link.attr('data-container-block-id'))
+                    var editor = Concrete.getEditMode()
+                    var block = _.findWhere(editor.getBlocks(), { id: bID })
+                    Concrete.event.fire('EditModeBlockEditInline', {
+                        block: block, event: e, action: CCM_DISPATCHER_FILENAME + '/ccm/system/dialogs/block/design'
+                    })
+                    return false
+                })
+        },
+
         bindDrag: function ContainerBlockBindDrag() {
             var my = this
-            var mover = my.getElem().find('>ul a[data-inline-command=move-block]').parent()
+            var mover = my.getElem().find('ul.ccm-edit-mode-inline-container a[data-inline-command=move-block]').parent()
 
             $.pep.unbind(mover)
             mover.pep(my.getPepSettings())

package/assets/cms/scss/_page-areas.scss

@@ -313,41 +313,46 @@ div#ccm-menu-highlighter.ccm-block-highlight {
  */
 ul.ccm-edit-mode-inline-commands {
   background-color: #fff;
-  height: 20px !important;
+  border-bottom-left-radius: 3px;
+  box-shadow: $popover-box-shadow;
+  display: flex;
+  height: 25px;
   list-style-type: none;
   margin: 0 !important;
   opacity: 0;
   padding: 0 !important;
   position: absolute;
-  right: 1px;
-  top: 1px;
+  right: 0;
+  top: 0;
   z-index: $index-level-inline-commands; // has to be over the click proxy
   li {
-    display: inline-block;
-    height: 20px !important;
-    line-height: 20px !important;
+    align-items: center;
+    display: flex;
     margin: 0 !important;
     padding: 0 !important;
 
+    span {
+      color: #888;
+      display: inline-block;
+      font-size: 12px;
+      font-weight: bold;
+      line-height: 12px;
+      padding-left: 4px;
+      padding-right: 4px;
+      text-transform: uppercase;
+    }
+
     a {
-      color: #555 !important;
+      color: #444 !important;
       display: inline-block;
       font-weight: lighter;
-      height: 20px !important;
-      line-height: 20px !important;
+      padding: 0;
       position: relative;
       text-align: center;
-      width: 20px !important;
+      width: 25px !important;
 
       &:hover {
-        color: #000 !important;
-      }
-
-      i {
-        left: 3px;
-        position: absolute;
-        top: 3px;
-        vertical-align: middle;
+        color: $blue !important;
       }
 
       &.ccm-edit-mode-inline-command-move {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@concretecms/bedrock",
-  "version": "1.1.18",
+  "version": "1.2.0",
   "description": "The asset framework and dependencies for Concrete CMS.",
   "scripts": {
     "lint": "standardx \"**/*.{js,vue}\" && stylelint assets/**/*.{scss,vue}",