@concretecms/bedrock 1.3.6 → 1.4.0

package/assets/cms/js/vue/Manager.js

@@ -51,9 +51,12 @@ export default class Manager {
      * @param {Function} callback (Vue, options) => new Vue(options)
      */
     activateContext(context, callback) {
-        return callback(Vue, {
-            components: this.getContext(context)
-        })
+        // This is stupid but sometimes activateContext and extendContext are called essentially simultaneously and we need this to fire after
+        setTimeout(() => {
+            return callback(Vue, {
+                components: this.getContext(context)
+            })
+        }, 10)
     }
 
     /**

package/assets/cms/scss/_base.scss

@@ -4,6 +4,7 @@
 @import 'buttons';
 @import 'tables';
 @import 'breadcrumb';
+@import 'cards';
 @import 'list-group';
 
 // Support classes
@@ -65,10 +66,6 @@
 // File Uploader
 @import './file-uploader';
 
-// Bootstrap Select
-@import 'bootstrap-select/sass/bootstrap-select';
-@import 'ajax-bootstrap-select/dist/css/ajax-bootstrap-select';
-
 // Forms
 @import './forms';
 
@@ -77,10 +74,6 @@
 // Previously wasn't throwing the error because Selectize includes the BS mixins
 @import '~bootstrap/scss/mixins';
 
-//TODO: Check Selectize replacement
-//@import '~selectize-bootstrap4-theme/scss/selectize.bootstrap4';
-//@import './selectize';
-
 // Miscellaneous components
 @import './vue';
 @import './boards';
@@ -90,6 +83,7 @@
 @import './tabs';
 @import './item-selector';
 @import './item-select-list';
+@import './select-combo-box';
 @import './permission-grid';
 @import './tooltips';
 @import 'spectrum-colorpicker2/dist/spectrum';

package/assets/cms/scss/_cards.scss

@@ -0,0 +1,7 @@
+.ccm-ui {
+  .card {
+    // Let's disable borders on the outside of the cards. We can't use the $card-border-width variable for this
+    // because it also disables borders between card headers and bodies and footers
+    border-width: 0;
+  }
+}

package/assets/cms/scss/_file-manager.scss

@@ -1,3 +1,4 @@
 // CSS for the chooser dialog window:
 @import 'file-manager/file-chooser';
 @import 'file-manager/image-cell';
+@import 'file-manager/thumbnail-image-editor';

package/assets/cms/scss/_file-uploader.scss

@@ -30,16 +30,26 @@
 
 .ccm-incoming-files-container {
   margin-bottom: 15px;
-  max-height: 400px;
+  max-height: 280px;
   overflow-y: scroll;
 }
 
 .ccm-directory-selector-container {
   margin-top: 15px;
 
-  .dropdown-item {
+  .item {
+    i {
+      margin-right: 10px;
+    }
+  }
+
+  .option {
     padding-left: 204px; // We need this default in order to handle the many levels of sub-nodes.
 
+    i {
+      margin-right: 5px; // item and option require diferent margins because one is flexbox and the other is not
+    }
+
     &.level-1 {
       padding-left: 12px;
     }
@@ -77,7 +87,7 @@
 
 .ccm-file-upload-container {
   display: block;
-  height: 400px;
+  height: 280px;
   overflow-y: auto;
   position: relative;
   user-select: none;

package/assets/cms/scss/_help.scss

@@ -18,6 +18,7 @@ div#ccm-toolbar {
 .ccm-ui {
   .ccm-help-tour {
     background-color: $help-tour-background-color;
+    border-color: $help-tour-background-color;
     font-size: 1rem;
     padding: $help-tour-padding;
 
@@ -127,9 +128,8 @@ div#ccm-toolbar {
         color: $help-tour-position-color !important;
         margin-left: 1rem;
 
-        &,
         &:hover {
-          text-decoration: none;
+          text-decoration: underline;
         }
       }
     }
@@ -144,3 +144,12 @@ div#ccm-toolbar {
     padding: 10px 20px;
   }
 }
+
+.ccm-help-media {
+  display: flex;
+  margin-top: 0.5rem;
+
+  > div {
+    margin-right: 1rem;
+  }
+}

package/assets/cms/scss/_item-selector.scss

@@ -2,6 +2,10 @@
  * New selector style
  */
 .ccm-item-selector-group {
+  .btn-group {
+    max-width: 100%;
+  }
+
   .btn {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -31,6 +35,12 @@
     }
   }
 
+  &.is-invalid {
+    .btn {
+      border-color: $danger;
+    }
+  }
+
 }
 
 

package/assets/cms/scss/_layouts.scss

@@ -88,3 +88,19 @@ div.ccm-area-layout-control-bar i {
   position: absolute;
   top: -2px;
 }
+
+// Ensure that many grids will display properly within our layout tools.
+// NOTE: If you implement a custom grid framework you must ensure that your row DIVs appear
+// with position: relative within the following two IDs.
+// This ensures that the layout tools work with this theme grid.
+// Note: This HAD been a part of the bedrock frontend toolkit, meant to be included by themes when they include
+// Bedrock. However, if a theme wasn't built on bedrock then it was borking in the layout tools, including Elemental
+// So instead, let's include the very basic implementation of this here, with div.row (which should catch BS4, BS5
+// and other derived grid frameworks). If you have a different series of classes you'll have to figure out your own
+// implementation based on this.
+div#ccm-theme-grid-temp,
+div#ccm-theme-grid-edit-mode-row-wrapper {
+  div.row {
+    position: relative; // This is necessary in order for the javascript to correctly use jquery position() calls
+  }
+}