@concretecms/bedrock 1.0.2 → 1.1.2

package/assets/cms/components/gallery/ImageDetail.vue

@@ -10,13 +10,13 @@
               @click="$emit('delete')"
               type="outline"
             >
-              Remove from Gallery
+              {{ i18n.removeFromGallery }}
             </IconButton>
-            <!-- <button type="button" class="btn btn-secondary" @click="$emit('delete')">Remove from Gallery</button> -->
+            <!-- <button type="button" class="btn btn-secondary" @click="$emit('delete')">{{ i18n.removeFromGallery }}</button> -->
         </div>
         <div class="image-details">
             <section>
-                <strong>Custom Attributes</strong>
+                <strong>{{ i18n.customAttributes }}</strong>
 
                 <p class="image-title">{{this.$props.image.title}}</p>
                 <p class="image-description">{{this.$props.image.description}}</p>
@@ -32,14 +32,14 @@
                       type="outline"
                       v-if="$props.image.detailUrl"
                     >
-                      Edit Attributes
+                      {{ i18n.editAttributes }}
                     </IconButton>
                 </div>
             </section>
 
             <section v-if="!this.$props.image.displayChoices.length">
                 <div class="mb-2">
-                    <strong>Display Options</strong>
+                    <strong>{{ i18n.displayOptions }}</strong>
                 </div>
                 <div v-for="(choice, index) in this.$props.image.displayChoices" :key="index">
                     <input v-if="choice.type === 'text'"
@@ -123,6 +123,23 @@ export default {
         IconButton,
         ...IconButton.components
     },
+    data: () => ({
+        i18n: {
+            removeFromGallery: 'Remove from Gallery',
+            customAttributes: 'Custom Attributes',
+            editAttributes: 'Edit Attributes',
+            displayOptions: 'Display Options'
+        }
+    }),
+    mounted() {
+        if (window.ccmi18n_gallery) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_gallery[key]) {
+                    this.i18n[key] = window.ccmi18n_gallery[key]
+                }
+            }
+        }
+    },
     props: {
         image: {
             type: Object,

package/assets/cms/components/groups/Chooser.vue

@@ -3,7 +3,7 @@
         <div class="mb-3 ccm-header-search-form">
             <form method="get" @submit="performSearch">
                 <div class="input-group">
-                    <input type="search" v-model="searchKeywords" placeholder="Search" class="form-control border-end-0" autocomplete="off">
+                    <input type="search" v-model="searchKeywords" :placeholder="i18n.search" class="form-control border-end-0" autocomplete="off">
                     <button type="submit" class="input-group-icon">
                         <svg width="16" height="16">
                             <use xlink:href="#icon-search"/>
@@ -18,8 +18,8 @@
                     <table class="border-top ccm-search-results-table">
                         <thead>
                         <tr>
-                            <th>ID</th>
-                            <th class="w-100">Name</th>
+                            <th>{{ i18n.id }}</th>
+                            <th class="w-100">{{ i18n.name }}</th>
                         </tr>
                         </thead>
                         <tbody>
@@ -31,7 +31,7 @@
                     </table>
                 </div>
                 <div v-else>
-                    No results found.
+                    {{ i18n.noResults }}
                 </div>
             </div>
             <div v-show="searchSubmitted === 'searching'">
@@ -65,6 +65,12 @@ export default {
     },
     data() {
         return {
+            i18n: {
+                search: 'Search',
+                id: 'ID',
+                name: 'Name',
+                noResults: 'No results found.'
+            },
             searchKeywords: '',
             searchResults: [],
             searchSubmitted: false,
@@ -91,6 +97,13 @@ export default {
         }
     },
     mounted() {
+        if (window.ccmi18n_groups) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_groups[key]) {
+                    this.i18n[key] = window.ccmi18n_groups[key]
+                }
+            }
+        }
         var my = this
         new ConcreteAjaxRequest({
             method: 'POST',

package/assets/cms/components/page/Chooser/ChooserSearch.vue

@@ -4,7 +4,7 @@
             <div class="col-md-4 ms-auto">
                 <form @submit.prevent="search">
                     <div class="ccm-header-search-form-input input-group">
-                        <input type="text" class="form-control border-end-0" placeholder="Search" autocomplete="false" v-model="searchText">
+                        <input type="text" class="form-control border-end-0" :placeholder="i18n.search" autocomplete="false" v-model="searchText">
                         <button type="submit" class="input-group-icon">
                             <svg width="16" height="16">
                                 <use xlink:href="#icon-search"/>
@@ -18,7 +18,7 @@
             <span class="search-icon my-4">
                 <Icon icon="search" type="fas" color="#f4f4f4"/>
             </span>
-            <p><b>Let's get some info on what you're looking for.</b></p>
+            <p><b>{{ i18n.initialPageSearchChooserTip }}</b></p>
         </div>
         <div v-if="keywords">
             <PageList
@@ -37,6 +37,10 @@ import PageList from './../PageList'
 export default {
     components: { Icon, PageList },
     data: () => ({
+        i18n: {
+            search: 'Search',
+            initialPageSearchChooserTip: "Let's get some info on what you're looking for."
+        },
         searchText: '',
         keywords: '',
         routePath: '/ccm/system/page/chooser/search/'
@@ -52,6 +56,15 @@ export default {
                 title: page.name
             })
         }
+    },
+    mounted() {
+        if (window.ccmi18n_sitemap) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_sitemap[key]) {
+                    this.i18n[key] = window.ccmi18n_sitemap[key]
+                }
+            }
+        }
     }
 }
 </script>

package/assets/cms/components/page/PageList.vue

@@ -8,9 +8,9 @@
                 <thead>
                 <tr>
                     <th><span>Type</span></th>
-                    <th :class="orderBy === 'cv.cvName' ? 'ccm-results-list-active-sort-' + orderByDirection : ''"><a href="#" @click="sortResults('cv.cvName', 'asc', $event)">Name</a></th>
-                    <th :class="orderBy === 'cv.cvDatePublic' ? 'ccm-results-list-active-sort-' + orderByDirection : ''"><a href="#" @click="sortResults('cv.cvDatePublic', 'asc', $event)">Date</a></th>
-                    <th :class="orderBy === 'c.cDateModified' ? 'ccm-results-list-active-sort-' + orderByDirection : ''"><a href="#" @click="sortResults('c.cDateModified', 'desc', $event)">Last Modified</a></th>
+                    <th :class="orderBy === 'cv.cvName' ? 'ccm-results-list-active-sort-' + orderByDirection : ''"><a href="#" @click="sortResults('cv.cvName', 'asc', $event)">{{ i118n.name }}</a></th>
+                    <th :class="orderBy === 'cv.cvDatePublic' ? 'ccm-results-list-active-sort-' + orderByDirection : ''"><a href="#" @click="sortResults('cv.cvDatePublic', 'asc', $event)">{{ i18n.date }}</a></th>
+                    <th :class="orderBy === 'c.cDateModified' ? 'ccm-results-list-active-sort-' + orderByDirection : ''"><a href="#" @click="sortResults('c.cDateModified', 'desc', $event)">{{ i18n.lastModified }}</a></th>
                     <th><span>Author</span></th>
                 </tr>
                 </thead>
@@ -58,6 +58,11 @@ import Pagination from '../Pagination'
 export default {
     components: { Pagination },
     data: () => ({
+        i18n: {
+            name: 'Name',
+            date: 'Date',
+            lastModified: 'Last Modified'
+        },
         currentPage: -1,
         latestSearchID: null,
         mouseOver: 0,
@@ -190,6 +195,13 @@ export default {
         }
     },
     mounted () {
+        if (window.ccmi18n_sitemap) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_sitemap[key]) {
+                    this.i18n[key] = window.ccmi18n_sitemap[key]
+                }
+            }
+        }
         this.fetchPages()
     }
 }

package/assets/cms/components/user/Chooser/Search.vue

@@ -4,7 +4,7 @@
             <div class="col-md-6 ms-auto">
                 <form @submit.prevent="search">
                     <div class="ccm-header-search-form-input input-group">
-                        <input type="text" class="form-control border-end-0" placeholder="Search" autocomplete="false" v-model="searchText">
+                        <input type="text" class="form-control border-end-0" :placeholder="i18n.search" autocomplete="false" v-model="searchText">
                         <button type="submit" class="input-group-icon">
                             <svg width="16" height="16">
                                 <use xlink:href="#icon-search"/>
@@ -18,7 +18,7 @@
             <span class="search-icon my-4">
                 <Icon icon="search" type="fas" color="#f4f4f4"/>
             </span>
-            <p><b>Let's get some info on what you're looking for.</b></p>
+            <p><b>{{ i18n.initialUserSearchChooserTip }}</b></p>
         </div>
         <div>
             <users v-if="keywords"
@@ -39,6 +39,10 @@ export default {
         Users
     },
     data: () => ({
+        i18n: {
+            search: 'Search',
+            initialUserSearchChooserTip: "Let's get some info on what you're looking for."
+        },
         keywords: '',
         searchText: '',
         selectedUsers: [],
@@ -59,6 +63,15 @@ export default {
         selectedUsers: function(value) {
             this.$emit('update:selectedUsers', value)
         }
+    },
+    mounted() {
+        if (window.ccmi18n_users) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_users[key]) {
+                    this.i18n[key] = window.ccmi18n_users[key]
+                }
+            }
+        }
     }
 }
 </script>

package/assets/cms/components/user/Chooser/Users.vue

@@ -6,11 +6,11 @@
                 <thead>
                     <tr>
                         <th></th>
-                        <th @click="sortBy('name')" :class="getSortColumnClassName('name')"><a href="javascript:void(0)">Username</a></th>
-                        <th @click="sortBy('email')" :class="getSortColumnClassName('email')"><a href="javascript:void(0)">Email</a></th>
-                        <th @click="sortBy('dateAdded')" :class="getSortColumnClassName('dateAdded')"><a href="javascript:void(0)">Date</a></th>
-                        <th>Status</th>
-                        <th @click="sortBy('totalLogins')" :class="getSortColumnClassName('totalLogins')"><a href="javascript:void(0)"># Logins</a></th>
+                        <th @click="sortBy('name')" :class="getSortColumnClassName('name')"><a href="javascript:void(0)">{{ i18n.username }}</a></th>
+                        <th @click="sortBy('email')" :class="getSortColumnClassName('email')"><a href="javascript:void(0)">{{ i18n.email }}</a></th>
+                        <th @click="sortBy('dateAdded')" :class="getSortColumnClassName('dateAdded')"><a href="javascript:void(0)">{{ i18n.date }}</a></th>
+                        <th>{{ i18n.status }}</th>
+                        <th @click="sortBy('totalLogins')" :class="getSortColumnClassName('totalLogins')"><a href="javascript:void(0)">{{ i18n.numLogins }}</a></th>
                     </tr>
                 </thead>
                 <tbody>
@@ -36,6 +36,13 @@
 export default {
     data() {
         return {
+            i18n: {
+                username: 'Username',
+                email: 'Email',
+                date: 'Date',
+                status: 'Status',
+                numLogins: '# Logins'
+            },
             isLoading: true,
             userList: [],
             selectedUsers: [],
@@ -111,6 +118,13 @@ export default {
         }
     },
     mounted() {
+        if (window.ccmi18n_users) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_users[key]) {
+                    this.i18n[key] = window.ccmi18n_users[key]
+                }
+            }
+        }
         this.getUsers()
     }
 }

package/assets/cms/components/user/Chooser.vue

@@ -2,8 +2,8 @@
     <div>
         <search :selectedUsers.sync="selectedUsers" :multiple-selection="multipleSelection"/>
         <div class="dialog-buttons">
-            <button class="btn btn-secondary" data-dialog-action="cancel">Cancel</button>
-            <button type="button" @click="chooseUsers" :disabled="selectedUsers.length === 0" class="btn btn-primary">Choose</button>
+            <button class="btn btn-secondary" data-dialog-action="cancel">{{ i18n.cancel }}</button>
+            <button type="button" @click="chooseUsers" :disabled="selectedUsers.length === 0" class="btn btn-primary">{{ i18n.choose }}</button>
         </div>
     </div>
 </template>
@@ -25,6 +25,10 @@ export default {
     },
     data() {
         return {
+            i18n: {
+                cancel: 'Cancel',
+                choose: 'Choose'
+            },
             selectedUsers: []
         }
     },
@@ -32,6 +36,15 @@ export default {
         chooseUsers() {
             window.ConcreteEvent.publish('UserSearchDialogSelectUser.core', { users: this.selectedUsers })
         }
+    },
+    mounted() {
+        if (window.ccmi18n_users) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_users[key]) {
+                    this.i18n[key] = window.ccmi18n_users[key]
+                }
+            }
+        }
     }
 }
 </script>

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

@@ -173,8 +173,8 @@ ConcreteLayout.prototype._setupFormEvents = function () {
 ConcreteLayout.prototype.buildThemeGridGrid = function () {
     this.$element.html('')
 
-    var row = this.options.rowstart
-    row += '<div id="ccm-theme-grid-edit-mode-row-wrapper">'
+    var row = '<div id="ccm-theme-grid-edit-mode-row-wrapper">'
+    row += this.options.rowstart
 
     var columnSpans = this._getThemeGridColumnSpan(this.columns)
     $.each(columnSpans, function (i, spanInfo) {
@@ -213,8 +213,8 @@ ConcreteLayout.prototype._updateThemeGridView = function (presetLoad) {
 
 ConcreteLayout.prototype._buildThemeGridGridFromPresetColumns = function (arLayoutColumns) {
     this.$element.html('')
-    var row = this.options.rowstart
-    row += '<div id="ccm-theme-grid-edit-mode-row-wrapper">'
+    var row = '<div id="ccm-theme-grid-edit-mode-row-wrapper">'
+    row += this.options.rowstart
     $.each(arLayoutColumns, function (i, column) {
         var columnHTML = '<div id="ccm-edit-layout-column-' + i + '" class="ccm-theme-grid-column" ' +
             'data-offset="' + column.arLayoutColumnOffset + '" data-span="' + column.arLayoutColumnSpan + '"><div class="ccm-layout-column-highlight">' +

package/assets/cms/js/edit-mode/style-customizer/color.js

@@ -3,12 +3,16 @@
 function ConcreteStyleCustomizerColorPicker($element, options) {
     var my = this
     my.$element = $element
+    const defaulti18n = window.ccmi18n_styleCustomizer || null
     my.options = $.extend(true, {
         initialColor: '',
         i18n: {
-            cancel: 'Cancel',
-            choose: 'Choose',
-            clear: 'Clean'
+            cancel: defaulti18n && defaulti18n.cancel ? defaulti18n.cancel : 'Cancel',
+            choose: defaulti18n && defaulti18n.choose ? defaulti18n.choose : 'Choose',
+            clear: defaulti18n && defaulti18n.clearColorSelection ? defaulti18n.clearColorSelection : 'Clear Color Selection',
+            noColorSelected: defaulti18n && defaulti18n.noColorSelected ? defaulti18n.noColorSelected : 'No Color Selected',
+            togglePaletteMore: defaulti18n && defaulti18n.togglePaletteMore ? defaulti18n.togglePaletteMore : 'More',
+            togglePaletteLess: defaulti18n && defaulti18n.togglePaletteLess ? defaulti18n.togglePaletteLess : 'Less'
         }
     }, options || {})
     $element.spectrum({
@@ -22,6 +26,9 @@ function ConcreteStyleCustomizerColorPicker($element, options) {
         cancelText: my.options.i18n.cancel,
         chooseText: my.options.i18n.choose,
         clearText: my.options.i18n.clear,
+        noColorSelectedText: my.options.i18n.noColorSelected,
+        togglePaletteMoreText: my.options.i18n.togglePaletteMore,
+        togglePaletteLessText: my.options.i18n.togglePaletteLess,
         change: function() {
             ConcreteEvent.publish('StyleCustomizerControlUpdate')
         }

package/assets/cms/js/edit-mode/style-customizer/custom.js

@@ -16,7 +16,7 @@ function ConcreteStyleCustomizerCustomCss($element, options) {
             url: ''
         },
         i18n: {
-            editTitle: 'Custom CSS'
+            editTitle: window.ccmi18n_styleCustomizer && window.ccmi18n_styleCustomizer.customCSS ? window.ccmi18n_styleCustomizer.customCSS : 'Custom CSS'
         }
     }, options || {})
     $element

package/assets/cms/js/edit-mode/style-customizer/typography.js

@@ -46,12 +46,19 @@ function ConcreteTypographySelector($element, options) {
     })
 
     my.$colorpicker = my.$widget.find('input[data-style-customizer-field=color]')
+    const i18n = window.ccmi18n_styleCustomizer || null
     my.$colorpicker.spectrum({
         preferredFormat: 'rgb',
         showAlpha: true,
         className: 'ccm-widget-colorpicker',
         showInitial: true,
-        showInput: true
+        showInput: true,
+        cancelText: i18n && i18n.cancel ? i18n.cancel : 'Cancel',
+        chooseText: i18n && i18n.choose ? i18n.choose : 'Choose',
+        clearText: i18n && i18n.clearColorSelection ? i18n.clearColorSelection : 'Clear Color Selection',
+        noColorSelectedText: i18n && i18n.noColorSelected ? i18n.noColorSelected : 'No Color Selected',
+        togglePaletteMoreText: i18n && i18n.togglePaletteMore ? i18n.togglePaletteMore : 'More',
+        togglePaletteLessText: i18n && i18n.togglePaletteLess ? i18n.togglePaletteLess : 'Less'
     })
 
     my.$fontMenu.on('change', function() {

package/assets/cms/js/file-manager/file-manager.js

@@ -17,14 +17,7 @@ class ConcreteFileManager {
         }
 
         if (options.filters.length > 0) {
-            data['field[]'] = []
-
-            for (i = 0; i < options.filters.length; i++) {
-                var filter = $.extend(true, {}, options.filters[i]) // clone
-                data['field[]'].push(filter.field)
-                delete (filter.field)
-                $.extend(data, filter) // add all remaining fields to the data
-            }
+            data.filters = options.filters
         }
 
         $.fn.dialog.open({

package/assets/cms/scss/_inline-toolbar.scss

@@ -1,181 +1,7 @@
-.ccm-inline-toolbar {
-  border-radius: 3px;
-  box-shadow: 0 0 6px rgba(200, 200, 200, 0.5);
-  font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif !important;
-  height: 31px;
-  line-height: 0;
-  list-style: none;
-  margin: 0 !important;
-  opacity: 0;
-  padding: 0 !important;
-  position: relative;
-  z-index: $index-level-inline-toolbar;
-
-  /* stylelint-disable selector-class-pattern */
-  &.redactor_toolbar {
-    background: transparent;
-  }
-
-  /* stylelint-enable selector-class-pattern */
-
-  > li {
-    background: #fff;
-    border-bottom: 1px solid #c4c4c4;
-    border-right: 1px solid #e1e1e1;
-    border-top: 1px solid #c4c4c4;
-    display: table-cell;
-    font-size: $font-size-base !important;
-    list-style: none;
-    outline: none;
-    padding: 3px 8px;
-    vertical-align: middle;
-
-    label {
-      display: inline;
-      font-size: $font-size-sm;
-      margin: 0 0 8px;
-    }
-
-    &.ccm-inline-toolbar-inverse-cell {
-      background-color: #555;
-
-      a {
-        color: #fff;
-      }
-    }
-
-
-  }
-
-  > li:first-child {
-    border-bottom-left-radius: 3px;
-    border-left: 1px solid #c4c4c4;
-    border-top-left-radius: 3px;
-  }
-
-  > li:last-child {
-    border-bottom-right-radius: 3px;
-    border-right: 0;
-    border-top-right-radius: 3px;
-  }
-
-  > li.ccm-inline-toolbar-icon-cell {
-    @include gradient-y(#fff, #f1f1f1);
-    padding: 0;
-    position: relative;
-    text-align: center;
-    width: 30px;
-  }
-
-  > li.ccm-inline-toolbar-icon-cell > a {
-    color: #333;
-    cursor: pointer;
-    display: block;
-    height: 100%;
-    opacity: 0.7;
-    text-decoration: none;
-
-    i {
-      display: inline-block;
-      font-size: $font-size-sm;
-      line-height: 33px;
-    }
-  }
-
-  > li.ccm-inline-toolbar-icon-cell.ccm-inline-toolbar-icon-selected {
-    @include gradient-y(#e1e1e1, #cbcbcb);
-    border-right: 1px solid #c5c5c5;
-  }
-
-  > li.ccm-inline-toolbar-icon-cell.ccm-inline-toolbar-icon-selected > a {
-    opacity: 1;
-  }
-
-  > li.ccm-inline-toolbar-icon-cell > a:hover {
-    opacity: 1;
-  }
-
-  > li.ccm-inline-toolbar-button {
-    background: transparent;
-
-    padding: 0;
-
-    button {
-      background: #f3f3f3;
-      border: 0;
-      border-radius: 0;
-      color: #333;
-      display: inline-block;
-      font-size: $font-size-sm;
-      height: 33px;
-      padding: 0 20px;
-      text-align: center;
-      width: 100%;
-    }
-  }
-
-  > li.ccm-inline-toolbar-select {
-    select {
-      background-position: right 5px top 5px;
-      border: 0;
-      height: 27px;
-      padding: 2px 28px 2px 2px;
-    }
-  }
-
-  > li.ccm-inline-toolbar-button-cancel button {
-    @include gradient-y(#f3f3f3, #eaeaea);
-  }
-
-  > li.ccm-inline-toolbar-button-cancel button:hover {
-    background-color: #fff;
-    background-image: none;
-  }
-
-  > li.ccm-inline-toolbar-button-save {
-    border: 1px solid #007cce !important;
-  }
-
-  > li.ccm-inline-toolbar-button-save button {
-    @include gradient-y(#09f, #0094f6);
-    background: #09f;
-    color: #fff;
-  }
-
-  > li.ccm-inline-toolbar-button-save button:hover {
-    background-color: #007cce;
-    background-image: none;
-  }
-
-  li.ccm-inline-toolbar-icon-cell > div.ccm-dropdown-menu {
-    display: none;
-
-    &::before {
-      border-color: transparent transparent #000;
-      border-style: solid;
-      border-width: 0 5px 5px;
-      content: ' ';
-      height: 0;
-      left: 11px;
-      position: absolute;
-      top: -5px;
-      width: 0;
-    }
-
-    &.active {
-      box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.43);
-      display: block;
-      margin-top: 1px;
-      position: absolute;
-    }
-  }
-}
-
 #ccm-inline-toolbar-container {
   box-sizing: border-box;
   left: 0;
   opacity: 0;
-  padding: 10px 20px 0;
   position: absolute;
   top: 0;
   transition: opacity 0.3s ease-in;
@@ -185,10 +11,15 @@
 
 #ccm-inline-toolbar-container.ccm-inline-toolbar-affixed {
   background-color: rgba(0, 0, 0, 0.4);
+  padding: 10px 0;
   position: fixed;
   top: 0 !important;
 }
 
+/*
+ old customizer. delete.
+ */
+/*
 .ccm-panel-left {
   .sp-container {
     background-color: rgba(0, 0, 0, 0.95);
@@ -309,6 +140,7 @@
   }
 
 }
+ */
 
 .ccm-ui {
   div.dropdown-menu.ccm-inline-design-dropdown-menu,
@@ -470,15 +302,13 @@
 }
 
 /* new styles for new the area and block style customizer toolbar */
-.ccm-style-customizer-toolbar {
-  border-radius: 3px;
-  box-shadow: 0 0 6px rgba(200, 200, 200, 0.5);
-  font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif !important;
+.ccm-inline-toolbar {
+  border-radius: 2px;
+  display: table;
   height: 31px;
   line-height: 0;
   list-style: none;
   margin: 0 !important;
-  min-width: 600px;
   padding: 0 !important;
   position: relative;
   z-index: $index-level-inline-toolbar;
@@ -580,6 +410,7 @@
     display: table-cell;
     font-size: $font-size-base !important;
     list-style: none;
+    margin: 0;
     outline: none;
     padding: 3px 8px;
     vertical-align: middle;

package/assets/cms/scss/panels/_shared.scss

@@ -14,12 +14,12 @@ html.ccm-panel-detail-open {
 div.ccm-panel {
   background-color: $panel-background-color;
   height: 100%;
-  /* overflow: hidden; */ /* This causes problems with floating palettes inside the panels. So let's only apply this during transitions */
   position: fixed;
   top: 0;
   user-select: none;
   width: 320px;
   z-index: $index-level-panel; // has to come above the detail actions wrapper
+  /* overflow: hidden; */ /* This causes problems with floating palettes inside the panels. So let's only apply this during transitions */
   div.ccm-panel-close {
     position: absolute;
     right: 17px;