Quick Create/Edit Window Refinements

Author: Jim Graham

_build/templates/default/sass/_breakpoint-medium.scss

@@ -0,0 +1,47 @@
+/* Medium screens, including small desktops and tablets */
+
+// Breakpoint for up to 1024px
+@include grid-media($tabletM) {
+
+}
+
+// Breakpoint for up to 960px
+@include grid-media($desktop) {
+    .x-window {
+        form {
+            .x-column-inner {
+                width: 100% !important;
+            }
+            .x-panel-body {
+                width: 100% !important;
+            }
+        }
+        .x-window-bc {
+            .x-window-footer {
+                padding: 15px;
+            }
+        }
+        &.qce-create,
+        &.qce-update {
+            .x-toolbar-cell {
+                margin-bottom: .75rem;
+                display: inline-block;
+                margin-right: 2%;
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+        &.qce-create {
+            .x-toolbar-cell {
+                width: 49%;
+            }
+        }
+        &.qce-update {
+            .x-toolbar-cell {
+                width: 32%;
+            }
+        }
+    }
+
+}

_build/templates/default/sass/_breakpoint-small.scss

@@ -0,0 +1,20 @@
+// Breakpoint for up to tablet (portrait orientation) size 768px
+@include grid-media($tabletP) {
+
+}
+
+// Breakpoint for mobile size
+@include grid-media($mobile) {
+
+    .x-window {
+        &.qce-create,
+        &.qce-update {
+            .x-toolbar-cell {
+                display: block;
+                margin-right: 0;
+                width: 100%;
+            }
+        }
+    }
+
+}

_build/templates/default/sass/_colors-and-vars.scss

@@ -3,6 +3,7 @@ $colorSplash: #234368;
 $colorSplashLight: lighten($colorSplash, 50%);
 $colorSplashMedium: lighten($colorSplash, 75%);
 $colorSplashDark: darken($colorSplash, 20%);
+$colorSplashShadow: scale-color($colorSplash, $lightness: -70%, $saturation: -25%);
 $colorSplashContrast: #FFFFFF; // needs much more adaption, should be used as text color for elements with $colorSplash background
 $silver: #CCCCCC;
 $gallery: #EEEEEE;
@@ -64,7 +65,7 @@ $borderRadius: 3px;
 
 // Shadows
 $boxShadow: 0 4px 6px rgba(0, 0, 0, 0.15);
-$boxShadowBig: 0 0 15px 0 rgba(0,0,0,0.2);
+$boxShadowBig: 0 0 15px 0 rgba($black,0.25);
 $shadowBorder: 0 0 0 1px $borderColor;
 $shadowBorderField: 0 0 0 1px $borderColor;
 $shadowBorderDark: 0 0 0 1px $softGray;

_build/templates/default/sass/_forms.scss

@@ -316,6 +316,10 @@ input::-moz-focus-inner {
   .x-form-element {
     padding: 0;
     font: $baseText;
+    /* add margin to element without label, primarily for checkboxes/radios appearing after a regular field or help element */
+    &.add-label-space {
+        margin-top: 28px;
+    }
   }
 
   /* .x-form-element */
@@ -818,11 +822,12 @@ input::-moz-focus-inner {
 /* .x-form-check-wrap */
 /* Special checboxes for resources and tv configs */
 #modx-resource-tabs,
-#modx-tv-tabs {
+#modx-tv-tabs,
+.x-window {
 
   .x-form-check-wrap,
   .x-fieldset-checkbox-toggle legend,
-  .x-fieldset legend {
+  .x-fieldset legend{
     [type="checkbox"]{
 
       position: absolute;
@@ -1150,7 +1155,7 @@ input::-moz-focus-inner {
 }
 
 .x-form-grow-sizer {
-  font: $fontSmall;
+  font: $baseText;
 }
 
 .x-form-invalid-msg {

_build/templates/default/sass/_windows.scss

@@ -268,6 +268,11 @@
           }
       }
   }
+  &.qce-window {
+      .x-window-body {
+          padding-top: 0;
+      }
+  }
 }
 
 /* .x-window */
@@ -299,20 +304,19 @@
 
 /* the window modal mask, but also the mask that covers a grid when reloading for example */
 .ext-el-mask {
-  background-color: $white;
+  background-color: $colorSplashShadow;
   opacity: 0;
-  filter: alpha(opacity=0); /* for IE <= 8 */
   transition: opacity .25s;
   /*z-index: 10;*/ /* this is handeled by extjs and set to 9000 on show */
 
   &.fade-in {
     opacity: .5;
-    filter: alpha(opacity=50); /* for IE <= 8 */
   }
 
+  // This affects the grid mask
   .x-masked & {
+    background-color: $white;
     opacity: .5;
-    filter: alpha(opacity=50); /* for IE <= 8 */
     z-index: 9; /* extjs standard is 100, 10 prevents overlapping the topnav dropdowns */
   }
 }

_build/templates/default/sass/index.scss

@@ -2388,3 +2388,6 @@ iframe[classname="x-hidden"] {
     margin-top: 0 !important;
   }
 }
+
+@import "breakpoint-medium";
+@import "breakpoint-small";

core/lexicon/en/chunk.inc.php

@@ -6,12 +6,12 @@
  * @package modx
  * @subpackage lexicon
  */
+
+// Entry out of alpha order because it must come before the entry it's used in below
+$_lang['example_tag_chunk_name'] = 'NameOfChunk';
+
 $_lang['chunk'] = 'Chunk';
-$_lang['chunk_desc_category'] = 'The Category this Chunk belongs in.';
-$_lang['chunk_desc_description'] = 'A short description of this chunk.';
-$_lang['chunk_desc_name'] = 'The name of this chunk. It will be available using the [[$nameOfChunk]] tags.';
-$_lang['chunk_code'] = 'Chunk code (html)';
-$_lang['chunk_desc'] = 'Description';
+$_lang['chunk_category_desc'] = 'Use to group Chunks within the Elements tree.';
 $_lang['chunk_delete_confirm'] = 'Are you sure you want to delete this chunk?';
 $_lang['chunk_duplicate_confirm'] = 'Are you sure you want to duplicate this chunk?';
 $_lang['chunk_err_create'] = 'An error occurred while trying to create the chunk.';
@@ -26,11 +26,31 @@
 $_lang['chunk_err_ns'] = 'Chunk not specified.';
 $_lang['chunk_err_ns_name'] = 'Please specify a name.';
 $_lang['chunk_lock'] = 'Lock chunk for editing';
-$_lang['chunk_lock_msg'] = 'Users must have the edit_locked attribute in order to edit this chunk.';
-$_lang['chunk_msg'] = 'Here you can create/edit chunks. Remember: Chunks are \'raw\' HTML code; so any PHP code won\'t be processed.';
-$_lang['chunk_name'] = 'Chunk name';
+$_lang['chunk_lock_desc'] = 'Only users with “edit_locked” permissions can edit this Chunk.';
+$_lang['chunk_name_desc'] = 'Place the content generated by this Chunk in a Resource, Template, or other Chunk using the following MODX tag: <span class="copy-this">[[$<span class="example-replace-name">'.$_lang['example_tag_chunk_name'].'</span>]]</span>';
 $_lang['chunk_new'] = 'Create Chunk';
 $_lang['chunk_properties'] = 'Default Properties';
+$_lang['chunk_tab_general_desc'] = 'Here you can enter the basic attributes for this <em>Chunk</em> as well as its content. The content must be HTML, either placed in the <a href="#x-form-el-modx-chunk-snippet">Chunk Code</a> field below or in a static external file, and may include MODX tags. Note, however, that PHP code will not run in this element.';
+$_lang['chunk_tag_copied'] = 'Chunk tag copied!';
 $_lang['chunk_title'] = 'Create/edit chunk';
 $_lang['chunk_untitled'] = 'Untitled Chunk';
 $_lang['chunks'] = 'Chunks';
+
+// Temporarily match old keys to new ones to ensure compatibility
+// --fields
+$_lang['chunk_desc_category'] = $_lang['chunk_category_desc'];
+$_lang['chunk_desc_name'] = $_lang['chunk_name_desc'];
+$_lang['chunk_lock_msg'] = $_lang['chunk_lock_desc'];
+
+// --tabs
+$_lang['chunk_msg'] = $_lang['chunk_tab_general_desc'];
+
+/*
+    Refer to default.inc.php for the keys below.
+    (Placement in this default file necessary to allow
+    quick create/edit panels access to them when opened
+    outside the context of their respective element types)
+
+    chunk_code
+    chunk_description_desc
+*/

core/lexicon/en/default.inc.php

@@ -559,3 +559,54 @@
 
 // Temporarily match old keys to new ones to ensure compatibility
 $_lang['clear_cache_on_save_msg'] = $_lang['clear_cache_on_save_desc'];
+
+/*
+    Shared lang entries for elements --
+
+    Necessary to to give quick create/edit panels
+    access when they are opened outside the
+    context of their respective element types
+*/
+
+// All
+
+// Chunks
+$_lang['chunk_code'] = 'Chunk Code (HTML)';
+$_lang['chunk_description_desc'] = 'Usage information for this Chunk shown in search results and as a tooltip in the Elements tree.';
+    // Temporarily match old keys to new ones to ensure compatibility
+    $_lang['chunk_desc_description'] = $_lang['chunk_description_desc'];
+
+// Plugins
+$_lang['plugin_code'] = 'Plugin Code (PHP)';
+$_lang['plugin_description_desc'] = 'Usage information for this Plugin shown in search results and as a tooltip in the Elements tree.';
+$_lang['plugin_disabled'] = 'Deactivate Plugin';
+$_lang['plugin_disabled_desc'] = 'When deactivated, this Plugin will not respond to events.';
+    // Temporarily match old keys to new ones to ensure compatibility
+    $_lang['plugin_desc'] = $_lang['description'];
+    $_lang['plugin_desc_description'] = $_lang['plugin_description_desc'];
+    $_lang['plugin_disabled_msg'] = $_lang['plugin_disabled_desc'];
+
+// Snippets
+$_lang['snippet_code'] = 'Snippet Code (PHP)';
+$_lang['snippet_description_desc'] = 'Usage information for this Snippet shown in search results and as a tooltip in the Elements tree.';
+    // Temporarily match old keys to new ones to ensure compatibility
+    $_lang['snippet_desc'] = $_lang['description'];
+    $_lang['snippet_desc_description'] = $_lang['snippet_description_desc'];
+
+// Templates
+$_lang['template_code'] = 'Template Code (HTML)';
+$_lang['template_description_desc'] = 'Usage information for this Template shown in search results and as a tooltip in the Elements tree.';
+    // Temporarily match old keys to new ones to ensure compatibility
+    $_lang['template_desc'] = $_lang['description'];
+    $_lang['template_desc_description'] = $_lang['template_description_desc'];
+
+// TVs
+$_lang['tv_tab_input_options'] = 'Input Options';
+$_lang['tv_type'] = 'Input Type';
+$_lang['tv_default'] = 'Default Value';
+$_lang['tv_default_desc'] = 'The content this TV will show if user-entered content is not provided.';
+$_lang['tv_caption_desc'] = 'The label shown for this TV in Resource editing pages (can be overridden per template or other criteria using <a href="?a=security/forms" target="_blank">Form Customization</a>).';
+$_lang['tv_category_desc'] = 'Use to group TVs in Resource editing pages and within the Elements tree.';
+$_lang['tv_description_desc'] = 'Usage information for this TV shown next to its caption in Resource editing pages and as a tooltip in the Elements tree.';
+$_lang['tv_elements'] = 'Input Option Values';
+$_lang['tv_elements_short_desc'] = 'Defines the selectable options for this TV, which may be manually entered or built with a one-line <a href="https://docs.modx.com/current/en/building-sites/elements/template-variables/bindings/select-binding" target="_blank">database query</a>.';

core/lexicon/en/plugin.inc.php

@@ -10,15 +10,9 @@
 $_lang['events'] = 'Events';
 $_lang['plugin'] = 'Plugin';
 $_lang['plugin_add'] = 'Add Plugin';
-$_lang['plugin_code'] = 'Plugin code (php)';
+$_lang['plugin_category_desc'] = 'Use to group Plugins within the Elements tree.';
 $_lang['plugin_config'] = 'Plugin configuration';
-$_lang['plugin_desc'] = 'Description';
-$_lang['plugin_desc_category'] = 'The Category this Plugin belongs in.';
-$_lang['plugin_desc_description'] = 'A short description of this Plugin.';
-$_lang['plugin_desc_name'] = 'The name of this Plugin.';
 $_lang['plugin_delete_confirm'] = 'Are you sure you want to delete this plugin?';
-$_lang['plugin_disabled'] = 'Inactive plugin';
-$_lang['plugin_disabled_msg'] = 'Plugin is deactivated and will not respond to events.';
 $_lang['plugin_duplicate_confirm'] = 'Are you sure you want to duplicate this plugin?';
 $_lang['plugin_err_create'] = 'An error occurred while creating the plugin.';
 $_lang['plugin_err_ae'] = 'A plugin already exists with the name "[[+name]]".';
@@ -37,14 +31,35 @@
 $_lang['plugin_event_msg'] = 'Select the events that you would like this plugin to listen to.';
 $_lang['plugin_event_plugin_remove_confirm'] = 'Are you sure you want to delete this plugin from this event?';
 $_lang['plugin_lock'] = 'Plugin locked for editing';
-$_lang['plugin_lock_msg'] = 'Users must have the edit_locked attribute in order to edit this plugin.';
+$_lang['plugin_lock_desc'] = 'Only users with “edit_locked” permissions can edit this Plugin.';
 $_lang['plugin_locked_message'] = 'This plugin is locked.';
 $_lang['plugin_management_msg'] = 'Here you can choose which plugin you wish to edit.';
-$_lang['plugin_msg'] = 'Here you can create/edit plugins. Plugins are \'raw\' PHP codes that are invoked whenever the selected System Events are triggered.';
-$_lang['plugin_name'] = 'Plugin name';
+$_lang['plugin_name_desc'] = 'The name of this Plugin.';
 $_lang['plugin_new'] = 'Create Plugin';
 $_lang['plugin_priority'] = 'Edit Plugin Execution Order by Event';
 $_lang['plugin_properties'] = 'Plugin Properties';
+$_lang['plugin_tab_general_desc'] = 'Here you can enter the basic attributes for this <em>Plugin</em> as well as its content. The content must be PHP, either placed in the <a href="#x-form-el-modx-plugin-plugincode">Plugin Code</a> field below or in a static external file. The PHP code entered runs in response to one or more MODX System Events that you specify.';
 $_lang['plugin_title'] = 'Create/edit plugin';
 $_lang['plugin_untitled'] = 'Untitled plugin';
 $_lang['plugins'] = 'Plugins';
+
+// Temporarily match old keys to new ones to ensure compatibility
+// --fields
+$_lang['plugin_desc_category'] = $_lang['plugin_category_desc'];
+$_lang['plugin_desc_name'] = $_lang['plugin_name_desc'];
+$_lang['plugin_lock_msg'] = $_lang['plugin_lock_desc'];
+
+// --tabs
+$_lang['plugin_msg'] = $_lang['plugin_tab_general_desc'];
+
+/*
+    Refer to default.inc.php for the keys below.
+    (Placement in this default file necessary to allow
+    quick create/edit panels access to them when opened
+    outside the context of their respective element types)
+
+    plugin_code
+    plugin_description_desc
+    plugin_disabled
+    plugin_disabled_desc
+*/

core/lexicon/en/snippet.inc.php

@@ -6,14 +6,11 @@
  * @package modx
  * @subpackage lexicon
  */
+$_lang['example_tag_snippet_name'] = 'NameOfSnippet';
 $_lang['snippet'] = 'Snippet';
 $_lang['snippets_available'] = 'Snippets available for you to include in your page';
-$_lang['snippet_code'] = 'Snippet code (php)';
+$_lang['snippet_category_desc'] = 'Use to group Snippets within the Elements tree.';
 $_lang['snippet_delete_confirm'] = 'Are you sure you want to delete this snippet?';
-$_lang['snippet_desc'] = 'Description';
-$_lang['snippet_desc_category'] = 'The Category this Snippet belongs in.';
-$_lang['snippet_desc_description'] = 'A short description of this Snippet.';
-$_lang['snippet_desc_name'] = 'The name of this Snippet. It will be available using the [[NameOfSnippet]] tags.';
 $_lang['snippet_duplicate_confirm'] = 'Are you sure you want to duplicate this snippet?';
 $_lang['snippet_duplicate_error'] = 'An error occurred while duplicating the snippet.';
 $_lang['snippet_err_create'] = 'An error occurred while creating the snippet.';
@@ -29,12 +26,32 @@
 $_lang['snippet_err_save'] = 'An error occurred while saving the snippet.';
 $_lang['snippet_execonsave'] = 'Execute snippet after saving.';
 $_lang['snippet_lock'] = 'Lock snippet for editing';
-$_lang['snippet_lock_msg'] = 'Users must have the edit_locked attribute in order to be able to edit this snippet.';
+$_lang['snippet_lock_desc'] = 'Only users with “edit_locked” permissions can edit this Snippet.';
 $_lang['snippet_management_msg'] = 'Here you can choose which snippet you wish to edit.';
-$_lang['snippet_msg'] = 'Here you can create/edit snippets. Remember, snippets are \'raw\' PHP code, and if you expect the output of the snippet to be shown at a certain point within the template, you need to return a value from within the snippet.';
-$_lang['snippet_name'] = 'Snippet name';
+$_lang['snippet_name_desc'] = 'Place the content generated by this Snippet in a Resource, Template, or Chunk using the following MODX tag: <span class="copy-this">[[<span class="example-replace-name">'.$_lang['example_tag_snippet_name'].'</span>]]</span>';
 $_lang['snippet_new'] = 'Create Snippet';
 $_lang['snippet_properties'] = 'Default Properties';
+$_lang['snippet_tab_general_desc'] = 'Here you can enter the basic attributes for this <em>Snippet</em> as well as its content. The content must be PHP, either placed in the <a href="#x-form-el-modx-snippet-snippet">Snippet Code</a> field below or in a static external file. To receive output from your Snippet at the point where it is called (within a Template or Chunk), a value must be returned from within the code.';
+$_lang['snippet_tag_copied'] = 'Snippet tag copied!';
 $_lang['snippet_title'] = 'Create/edit snippet';
 $_lang['snippet_untitled'] = 'Untitled snippet';
 $_lang['snippets'] = 'Snippets';
+
+// Temporarily match old keys to new ones to ensure compatibility
+// --fields
+$_lang['snippet_desc_category'] = $_lang['snippet_category_desc'];
+$_lang['snippet_desc_name'] = $_lang['snippet_name_desc'];
+$_lang['snippet_lock_msg'] = $_lang['snippet_lock_desc'];
+
+// --tabs
+$_lang['snippet_msg'] = $_lang['snippet_tab_general_desc'];
+
+/*
+    Refer to default.inc.php for the keys below.
+    (Placement in this default file necessary to allow
+    quick create/edit panels access to them when opened
+    outside the context of their respective element types)
+
+    snippet_code
+    snippet_description_desc
+*/