Editor grids permissions refactor, enhancements, and fixes

.eslintrc.js

@@ -31,6 +31,7 @@ module.exports = {
         curly: ['error', 'all'],
         eqeqeq: ['error', 'smart'],
         'func-names': ['warn', 'as-needed'],
+        'guard-for-in': 'warn',
         indent: ['error', 4, {
             VariableDeclarator: 'first',
             SwitchCase: 1
@@ -39,15 +40,20 @@ module.exports = {
             code: 140,
             ignoreComments: true
         }],
+        'new-cap': 'warn',
         'no-continue': 'warn',
+        'no-global-assign': 'warn',
         'no-new': 'warn',
         'no-param-reassign': 'warn',
-        'no-plusplus': ['error', {
+        'no-plusplus': ['warn', {
             allowForLoopAfterthoughts: true
         }],
+        'no-restricted-syntax': 'warn',
         'no-underscore-dangle': 'warn',
         'no-unused-vars': ['error', { args: 'none' }],
         'no-use-before-define': ['error', 'nofunc'],
+        'no-useless-escape': 'warn',
+        'no-shadow': ['warn', { allow: ['response'] }],
         'object-shorthand': ['error', 'consistent'],
         'one-var': ['error', 'consecutive'],
         'prefer-arrow-callback': 'warn',

_build/templates/default/sass/_forms.scss

@@ -76,7 +76,7 @@ textarea.x-form-field,
   border-radius: $borderRadius;
   border: 1px solid $borderColor;
   position: relative;
-  transition: border-color .25s;
+  transition: border-color 0.25s;
 }
 
 .x-viewport .x-trigger-wrap-focus,
@@ -143,7 +143,7 @@ input::-moz-focus-inner {
       padding: 0 0 0 3px;
       top: 0;
       right: 0;
-      transition: all .25s;
+      transition: all 0.25s;
       width: 16px;
       height: 16px;
 
@@ -289,7 +289,7 @@ input::-moz-focus-inner {
     border: 1px solid $borderColor;
     border-radius: $borderRadius;
     padding: 5px;
-    transition: all .25s;
+    transition: all 0.25s;
 
     &:focus {
       border: 1px solid $borderColorFocus;
@@ -410,7 +410,7 @@ input::-moz-focus-inner {
   }
 
   &.toggle-slider-above {
-    margin: .3em 0;
+    margin: 0.3em 0;
     padding-left: 3.9em;
   }
 
@@ -422,15 +422,15 @@ input::-moz-focus-inner {
 
   .example-list {
     ul {
-      margin: .4em 0;
+      margin: 0.4em 0;
       li {
         position: relative;
-        margin-bottom: .25em;
+        margin-bottom: 0.25em;
         padding-left: 1.25em;
         &::before {
           @extend %pseudo-font;
           position: absolute;
-          left: .2em;
+          left: 0.2em;
           top: 0;
           content: fa-content($fa-var-angle-double-right);
           color: scale-color($mediumGray, $lightness: 20%);
@@ -440,7 +440,7 @@ input::-moz-focus-inner {
   }
   .example-input,
   .copy-this {
-    padding: 0 .3em;
+    padding: 0 0.3em;
     border-radius: 2px;
     transition: width 1s;
   }
@@ -478,7 +478,14 @@ input::-moz-focus-inner {
               }
           }
       }
-  }
+      &:active {
+        color: $darkGray;
+        &::after {
+          color: $darkGray;
+        }
+      }
+    }
+
   .feedback {
       margin-left: 1.4rem;
       color: scale-color($blue, $lightness: -35%);
@@ -507,7 +514,7 @@ input::-moz-focus-inner {
 .fs-toggle {
   padding-top: 1em;
   margin-top: 2em;
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
   border-top: 1px dashed $borderColor;
 }
 
@@ -636,7 +643,7 @@ input::-moz-focus-inner {
       transform: translate(-50%, -50%);
       text-align: center;
       width: 30px;
-      transition: opacity .25s;
+      transition: opacity 0.25s;
     }
 
     &.x-form-trigger-over,
@@ -932,11 +939,11 @@ input::-moz-focus-inner {
         left: unset;
       }
 
-      &+.x-form-cb-label,
-      &+.x-fieldset-header-text {
+      & + .x-form-cb-label,
+      & + .x-fieldset-header-text {
         position: relative;
         padding-left: 3.6em;
-        padding-top: .2em;
+        padding-top: 0.2em;
         margin-left: 0;
         cursor: pointer;
         box-sizing: border-box;
@@ -946,7 +953,7 @@ input::-moz-focus-inner {
         &:after {
           content: '';
           position: absolute;
-          transition: all .2s ease;
+          transition: all 0.2s ease;
           font-size: inherit;
         }
 
@@ -963,7 +970,7 @@ input::-moz-focus-inner {
         &:after {
           left: 0.1em;
           top: 0.8em;
-          margin-top: -.65em;
+          margin-top: -0.65em;
           height: 1.3em;
           width: 1.3em;
           border-radius: 50%;
@@ -973,9 +980,8 @@ input::-moz-focus-inner {
       }
 
       &:checked {
-
-        &+.x-form-cb-label,
-        &+.x-fieldset-header-text {
+        & + .x-form-cb-label,
+        & + .x-fieldset-header-text {
           &:after {
             left: 1.6em;
             top: 0.8em;
@@ -989,9 +995,8 @@ input::-moz-focus-inner {
       }
 
       &.danger:checked {
-
-        &+.x-form-cb-label,
-        &+.x-fieldset-header-text {
+        & + .x-form-cb-label,
+        & + .x-fieldset-header-text {
           &:before {
             background-color: $red;
             border-color: $red;
@@ -1000,9 +1005,8 @@ input::-moz-focus-inner {
       }
 
       &.warning:checked {
-
-        &+.x-form-cb-label,
-        &+.x-fieldset-header-text {
+        & + .x-form-cb-label,
+        & + .x-fieldset-header-text {
           &:before {
             background-color: $orange;
             border-color: $orange;
@@ -1089,13 +1093,13 @@ input::-moz-focus-inner {
           cursor: pointer;
           display: inline-block; /*font-size: 1px;*/
           outline: 0; /* fix firefox dotted outlines */
-          opacity: .6;
+          opacity: 0.6;
           filter: alpha(opacity=60); /* for IE <= 8 */
           padding: 0;
           position: absolute;
           top: 0;
           right: 0;
-          transition: opacity .25s;
+          transition: opacity 0.25s;
           width: 16px;
           height: 100%;
 
@@ -1226,21 +1230,22 @@ input::-moz-focus-inner {
 }
 
 .x-editor .x-form-check-wrap {
-  background-color: $white
-}
-
-/* fix combo on grid editor bug */
-.x-grid-editor .x-form-field-wrap {
-  background: #f6f2f7 url($imgPath + 'modx-theme/form/combo-bck.png') repeat-x scroll 0 100%;
+  background-color: $white;
 }
 
-.x-grid-editor .x-form-field-wrap input {
+.x-grid-editor {
+  z-index: 9002 !important;
+  .x-form-field-wrap {
+    background: #f6f2f7 url($imgPath + "modx-theme/form/combo-bck.png") repeat-x
+      scroll 0 100%;
+    input {
   background-color: transparent !important;
 }
-
-.x-grid-editor .x-form-field-wrap img {
+    img {
   background-color: $white;
-  background-image: url($imgPath + 'modx-theme/form/trigger.png');
+      background-image: url($imgPath + "modx-theme/form/trigger.png");
+    }
+  }
 }
 
 .x-form-grow-sizer {
@@ -1374,7 +1379,7 @@ input::-moz-focus-inner {
 
       .x-btn {
         padding: 1px;
-        transition: color .25s;
+        transition: color 0.25s;
 
         &.x-btn-over,
         &:hover,
@@ -1389,7 +1394,7 @@ input::-moz-focus-inner {
 
         &.x-item-disabled {
           color: $buttonColor;
-          opacity: .4;
+          opacity: 0.4;
         }
 
         button:before {
@@ -1433,7 +1438,11 @@ input::-moz-focus-inner {
     }
 
     /* the second text cell, "of X" */
-    .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell {
+    .x-toolbar-cell
+      + .x-toolbar-cell
+      + .x-toolbar-cell
+      + .x-toolbar-cell
+      + .x-toolbar-cell {
       .xtb-text {
         display: inline-block;
         position: absolute;
@@ -1445,7 +1454,15 @@ input::-moz-focus-inner {
     }
 
     /* the last regular button >>, yes, I know it's ugly but tell that Microsoft and say thanks for IE8 =) */
-    .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell {
+    .x-toolbar-cell
+      + .x-toolbar-cell
+      + .x-toolbar-cell
+      + .x-toolbar-cell
+      + .x-toolbar-cell
+      + .x-toolbar-cell
+      + .x-toolbar-cell
+      + .x-toolbar-cell
+      + .x-toolbar-cell {
       .x-btn {
         margin-right: 0;
       }
@@ -1454,13 +1471,13 @@ input::-moz-focus-inner {
     /* the refresh button */
     .x-toolbar-cell:last-child {
       opacity: 0;
-      transition: opacity .25s;
+      transition: opacity 0.25s;
 
       .x-btn {
         font-size: 12px;
         line-height: 1;
         margin: 0;
-        opacity: .4;
+        opacity: 0.4;
         padding: 0;
         position: absolute;
         bottom: 2px;
@@ -1549,11 +1566,11 @@ input::-moz-focus-inner {
 .x-date-mp-ybtn a.x-date-mp-prev,
 .x-date-mp-ybtn a.x-date-mp-next {
   display: inline-block;
-  opacity: .6;
+  opacity: 0.6;
   filter: alpha(opacity=60); /* for IE <= 8 */
   margin: 0 auto;
   position: relative;
-  transition: opacity .25s;
+  transition: opacity 0.25s;
 
   &:before {
     @extend %pseudo-font;
@@ -1810,6 +1827,6 @@ td.x-date-mp-sep {
     bottom: 0;
     padding: 10px 20px;
     color: #fff;
-    background-color: rgba(0, 0, 0, .8);
+    background-color: rgba(0, 0, 0, 0.8);
   }
 }

_build/templates/default/sass/_utility.scss

@@ -145,7 +145,6 @@
   }
 }
 
-
 /* Instead of writing the same code for every nav bar */
 @mixin navigation-list {
   list-style-type: none;
@@ -212,3 +211,13 @@
     }
   }
 }
+
+@mixin textLink {
+    color: $colorSplash;
+    text-decoration-style: dotted;
+    text-decoration-color: scale-color($colorSplash, $lightness: 50%);
+    &:hover {
+      color: $black;
+      border-bottom-color: scale-color($black, $lightness: 40%);
+    }
+}