Skip to content

Commit

Permalink
Refactor of TV Configuration and Management
Browse files Browse the repository at this point in the history 
A continuation of the work initiated in draft PR modxcms#15164, ported to 3.x. Many of the validation UX features (and more) that were originally in the referenced draft (and have since been implemented into 2.x via PR modxcms#15146) have been removed from this commit and pending PR for clarity.
  • Loading branch information
Jim Graham committed Jul 26, 2021
1 parent 0eddfe8 commit c66cb80
Show file tree
Hide file tree
Showing 47 changed files with 5,487 additions and 386 deletions.
3 changes: 2 additions & 1 deletion _build/templates/default/sass/_buttons.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "font-awesome/v4-shims";
// already imported from index.scss
// @import "font-awesome/v4-shims";

button {
margin: 2px; /* default in chrome, apply it to everybody */
Expand Down
192 changes: 173 additions & 19 deletions _build/templates/default/sass/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,45 +91,64 @@ input::-moz-focus-inner {
font-weight: normal;
}

.modx-tv-reset {
.modx-tv-reset,
.modx-field-utils {
cursor: pointer;
display: inline-block;
height: 16px;
position: relative;
opacity: 0;
filter: alpha(opacity=0); /* for IE <= 8 */
padding: 3px;
position: relative;
padding: 0 0 0 3px;
top: 0;
right: 0;
transition: all .25s;
width: 16px;
height: 16px;

&:before {
&::before {
@extend %pseudo-font;

box-sizing: border-box;
color: $coreFieldLabelColor;
content: fa-content($fa-var-sync);
color: scale-color($coreFieldLabelColor, $lightness: 50%);
content: fa-content($fa-var-undo-alt); /* better match IMO for the action being taken */
font-size: 14px;
position: relative;
bottom: 3px;
bottom: 2px;
left: 0;
text-align: center;
vertical-align: middle;
width: 16px;
height: 16px;
}
&.modx-field-reset {
&::before {
content: fa-content($fa-var-undo-alt);
}
&:hover::before {
color: $green;
}
}
&.modx-field-clear {
&::before {
content: fa-content($fa-var-eraser);
font-size: 15px;
margin-bottom: 4px;
}
&:hover::before {
color: $red;
}
}

&:hover:before {
color: $colorSplash;
color: $green;
}

&:active:before {
color: darken($colorSplash, 6%);
}
}

&:hover .modx-tv-reset {
&:hover .modx-tv-reset,
&:hover .modx-field-utils {
opacity: 1;
filter: alpha(opacity=100); /* for IE <= 8 */
}
Expand Down Expand Up @@ -264,8 +283,10 @@ input::-moz-focus-inner {

label.x-form-item-label {
display: inline-block; /* override extjs default theme styles */
margin: 0; /* override extjs default theme styles */
padding: 15px 0 4px 0;
// margin: 0; /* override extjs default theme styles */
// padding: 15px 0 4px 0;
margin: 15px 0 4px 0;
padding: 0;
}
}

Expand All @@ -288,6 +309,12 @@ input::-moz-focus-inner {
}
}

&.disabled {
label {
color: scale-color($coreFieldLabelColor, $lightness: 50%);
}
}

.x-form-element {
padding: 0;
font: $baseText;
Expand Down Expand Up @@ -324,18 +351,105 @@ input::-moz-focus-inner {
display: block;
font-size: 12px;
font-style: italic;
margin: 2px 0 0 0;
text-align: justify;
margin: .4em 0 0 0;

&.desc-checkbox {
margin: 0 0 4px 0;
&.toggle-slider-above {
margin: .3em 0;
padding-left: 3.9em;
}

.warning {
color: $red;
overflow: hidden;
padding: 0;
}

.example-list {
ul {
margin: .4em 0;
li {
position: relative;
margin-bottom: .25em;
padding-left: 1.25em;
&::before {
@extend %pseudo-font;
position: absolute;
left: .2em;
top: 0;
content: fa-content($fa-var-angle-double-right);
color: scale-color($mediumGray, $lightness: 20%);
}
}
}
}
.example-input,
.copy-this {
padding: 0 .3em;
border-radius: 2px;
transition: width 1s;
}

.example-input {
color: scale-color($green, $lightness: -5%, $saturation: -45%);
background-color: scale-color($green, $lightness: 94%, $saturation: -20%);
&:hover {
background-color: scale-color($green, $lightness: 89%, $saturation: -10%);
color: scale-color($green, $lightness: -20%, $saturation: -5%);
cursor: pointer;
}
}

.copy-this {
color: scale-color($blue, $lightness: -5%, $saturation: -40%);
background-color: scale-color($blue, $lightness: 92%, $saturation: -15%);
&:hover {
background-color: scale-color($blue, $lightness: 87%, $saturation: 5%);
color: scale-color($blue, $lightness: -35%);
cursor: pointer;
&::after {
@extend %pseudo-font;
content: fa-content($fa-var-copy);
color: scale-color($blue, $saturation: -40%);
display: inherit;
margin-left: .5em;
}
&:active {
color: $darkGray;
&::after {
color: $darkGray;
}
}
}
}
.feedback {
margin-left: .75em;
color: scale-color($blue, $lightness: -35%);
font-style: normal;
&.item-copied {
opacity: 1;
transition: opacity 1.5s;
}
}

a {
text-decoration: none;
border-bottom: 1px dotted $mediumGray;
color: $mediumGray;
&:hover {
color: $darkGray;
}
}

.deemphasize {
font-style: normal;
}

}

.fs-toggle {
padding-top: 1em;
margin-top: 2em;
border-top: 1px dashed $borderColor;
}

.x-fieldset {
Expand Down Expand Up @@ -366,6 +480,34 @@ input::-moz-focus-inner {
padding: 0 10px 10px 10px;
}
}

/* for toggled fieldsets */
&.form-row-wrapper {
.x-fieldset-bwrap {
.x-fieldset-body {
padding: 0 15px 15px 15px;
}
}
}

&#tv-input-opts-fs,
&#tv-output-opts-fs {
border: 0;
margin: 0;
.x-fieldset-bwrap {
.x-fieldset-body {
padding: 0;
}
}
.x-fieldset {
.x-fieldset-bwrap {
.x-fieldset-body {
padding: 0 15px 15px 15px;
}
}
}
}

}

.x-form-field {
Expand Down Expand Up @@ -550,6 +692,10 @@ input::-moz-focus-inner {
content: fa-content($fa-var-file-image);
}

#x-form-el-modx-tv-locked {
margin-top: 1em;
}

/* .x-form-field-wrap */

/* both, radio groups and checkbox groups are wrapped in a x-form-check-wrap */
Expand Down Expand Up @@ -671,8 +817,9 @@ input::-moz-focus-inner {
}

/* .x-form-check-wrap */
/* Special checboxes for resources */
#modx-resource-tabs {
/* Special checboxes for resources and tv configs */
#modx-resource-tabs,
#modx-tv-tabs {

.x-form-check-wrap,
.x-fieldset-checkbox-toggle legend,
Expand All @@ -690,6 +837,7 @@ input::-moz-focus-inner {
margin-left: 0;
cursor: pointer;
box-sizing: border-box;
line-height: 1; /* fixes vertical alignment with slider control */

&:before,
&:after {
Expand Down Expand Up @@ -766,6 +914,7 @@ input::-moz-focus-inner {
.x-form-radio-group {
/*overflow: visible; /* do not cut off the bottom of the input elements */
overflow: hidden; /* visible causes horizontal scrollbars in vertical tabs */
padding-bottom: 0.5em; /* prevent bottom-most sliders from being clipped */

.x-column {
/* we need this to have access to the first child */
Expand All @@ -776,6 +925,11 @@ input::-moz-focus-inner {
}
}
}
/* applies to new xcheckboxgroup custom checkbox group */
&.aggregated-group {
padding-left: 1em;
padding-right: 1em;
}
}


Expand Down
5 changes: 3 additions & 2 deletions _build/templates/default/sass/_tree.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import "font-awesome/variables";
@import "font-awesome/mixins";
// already imported from index.scss (in font-awesome/fontawesome)
// @import "font-awesome/variables";
// @import "font-awesome/mixins";

#modx-leftbar {

Expand Down
16 changes: 9 additions & 7 deletions core/lexicon/en/default.inc.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@
$_lang['class_key'] = 'Class Key';
$_lang['cleaningup'] = 'Cleaning up';
$_lang['clear_cache'] = 'Clear Cache';
$_lang['clear_cache_on_save'] = 'Clear Cache on Save';
$_lang['clear_cache_on_save_msg'] = 'If this is checked, it will clear this item\'s cache files when this item is saved.';
$_lang['clear_cache_on_save'] = 'Empty Cache'; // make consistent with how this appears on Resource editing panel
$_lang['clear_cache_on_save_desc'] = 'Clear cache files when this item is saved.'; // make more general, as this action clears more than just this item's cache files
$_lang['clear_filter'] = 'Clear Filter';
$_lang['click_to_change'] = 'Click to Change';
$_lang['close'] = 'Close';
Expand Down Expand Up @@ -175,10 +175,12 @@
$_lang['ext_minlenfield'] = 'The minimum length for this field is {0}';
$_lang['ext_minlenmaxfield'] = 'The minimum length can not be more than maximum length';
$_lang['ext_minvalfield'] = 'The minimum value for this field is {0}';
$_lang['ext_minvalmaxfield'] = 'The minimum value can not be more than maximum value';
$_lang['ext_maxdate'] = 'This date is after the maximum date.';
$_lang['ext_maxlenfield'] = 'The maximum length for this field is {0}';
$_lang['ext_maxlenminfield'] = 'The maximum length can not be less than minimum length';
$_lang['ext_maxvalfield'] = 'The maximum value for this field is {0}';
$_lang['ext_maxvalminfield'] = 'The maximum value can not be less than minimum value';
$_lang['ext_nanfield'] = '{0} is not a valid number.';
$_lang['ext_next'] = 'Next Page';
$_lang['ext_nextmonth'] = 'Next Month (Control+Right)';
Expand All @@ -196,7 +198,9 @@
$_lang['ext_today_tip'] = '{0} (Spacebar)';
$_lang['failure'] = 'Failure';
$_lang['female'] = 'Female';
$_lang['field_clear'] = 'Clear this field';
$_lang['field_required'] = 'This field is required.';
$_lang['field_reset'] = 'Reset field to its original value';
$_lang['files'] = 'Files';
$_lang['filter'] = 'Filter';
$_lang['filter_clear'] = 'Clear Filter';
Expand Down Expand Up @@ -491,11 +495,6 @@
$_lang['tree_refresh'] = 'Refresh tree';
$_lang['tree_sort'] = 'Sort tree';
$_lang['tv'] = 'TV';
$_lang['tv_default'] = 'Default Value';
$_lang['tv_default_desc'] = 'The default value will be stored if the user does not specify a value.';
$_lang['tv_elements'] = 'Input Option Values';
$_lang['tv_elements_desc'] = 'Option values for TVs with multiple selectable items, such as dropdown or tag (separate options with ||, e.g. Cat||Dog or White==#ffffff||Black==#000000).';
$_lang['tv_type'] = 'Input Type';
$_lang['tv_value_inherited'] = 'Value Inherited';
$_lang['type'] = 'Type';
$_lang['uncategorized'] = 'uncategorized';
Expand Down Expand Up @@ -558,3 +557,6 @@
$_lang['thursday'] = 'Thursday';
$_lang['friday'] = 'Friday';
$_lang['saturday'] = 'Saturday';

// Temporarily match old keys to new ones to ensure compatibility
$_lang['clear_cache_on_save_msg'] = $_lang['clear_cache_on_save_desc'];
15 changes: 10 additions & 5 deletions core/lexicon/en/element.inc.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
$_lang['element_static_source_immutable'] = 'The static file specified as the element source is not writable! You cannot edit the content of this element in the manager.';
$_lang['element_static_source_protected_invalid'] = 'You cannot point your Element to the MODX configuration directory; this is a protected, non-accessible directory.';
$_lang['is_static'] = 'Is Static';
$_lang['is_static_msg'] = 'Indicates if the element source is stored in an external file.';
$_lang['is_static_desc'] = 'Use an external file to store this element’s source code.';
$_lang['quick_create'] = 'Quick Create';
$_lang['quick_create_chunk'] = 'Quick Create Chunk';
$_lang['quick_create_plugin'] = 'Quick Create Plugin';
Expand All @@ -29,12 +29,17 @@
$_lang['property_preprocess'] = 'Pre-process tags in Property Values';
$_lang['property_preprocess_msg'] = 'If enabled, tags in Default Property/Property Set values will be processed before they are used for Element processing.';
$_lang['static_file'] = 'Static File';
$_lang['static_file_msg'] = 'An external file location where the element source is stored.';
$_lang['static_source'] = 'Media Source for Static File';
$_lang['static_source_msg'] = 'MODX will use this Media Source as a base path when looking for the Static Element file. Using "None" will assume you are specifying an absolute path.';
$_lang['static_file_desc'] = 'The external file location where the source code for this element is stored.';
$_lang['static_source'] = 'Media Source';
$_lang['static_source_desc'] = 'Sets the basePath for the Static File to the one specified in the chosen Media Source. Choose “None” when specifying an absolute path to the file.';
$_lang['tv_elements'] = 'Input Option Values';
$_lang['tv_default'] = 'Default Value';
$_lang['tv_type'] = 'Input Type';
$_lang['tv_output_type'] = 'Output Type';
$_lang['tv_output_type_properties'] = 'Output Type Properties';
$_lang['static_file_ns'] = 'You have to specify a static file.';
$_lang['static_file_ns'] = 'You have to specify a static file.';

// Temporarily match old keys to new ones to ensure compatibility
$_lang['is_static_msg'] = $_lang['is_static_desc'];
$_lang['static_file_msg'] = $_lang['static_file_desc'];
$_lang['static_source_msg'] = $_lang['static_source_desc'];
Loading

0 comments on commit c66cb80

Please sign in to comment.