select, autocomplete, input: text alignment option added

close #99
Scrounger · Sep 16, 2020 · 5a2b1d0 · 5a2b1d0
1 parent f85a02e
commit 5a2b1d0
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -5469,14 +5469,16 @@ ical2CalendarWidget();
 * (Scrounger): Select & Autocomplete Widget: overriding icon bug fix
 * (Scrounger): Select & Autocomplete Widget: colors bug fixes
 * (Scrounger): Select & Autocomplete Widget: option to override the icon color of textfield for selected menu icon
+* (Scrounger): Select & Autocomplete Widget: text alignment option added
+* (Scrounger): Input Widget: text alignment option added
 * (Scrounger): JSON Chart Widget: option to force x-axis time unit added
 * (Scrounger): JSON Chart Widget: gradient colors for multipe dataset bug fixes
 * (Scrounger): JSON Chart: default tooltip title added
 * (Scrounger): Line History Chart: option for point color added
 * (Scrounger): Charts Widget: x-Axis time axis bug fixes
-* (Scrounger): Input Widget: bug fix for multiple masks
 * (Scrounger): Calendar Widget: option to show calendar week numbers in month view added
 * (Scrounger): Calendar Widget: option for custom date format added
+* (Scrounger): dependencies updated
 * (Scrounger): bug fixes
 
 ### 0.3.19 (2020-07-18)

diff --git a/admin/words.js b/admin/words.js
@@ -9857,5 +9857,17 @@ systemDictionary = {
         "es": "color de fuente",
         "pl": "kolor czcionki",
         "zh-cn": "字体颜色"
+    },
+    "inputAlignment": {
+        "en": "text alignment",
+        "de": "Textausrichtung",
+        "ru": "выравнивание текста",
+        "pt": "alinhamento do texto",
+        "nl": "tekstuitlijning",
+        "fr": "Alignement du texte",
+        "it": "allineamento del testo",
+        "es": "alineación del texto",
+        "pl": "wyrównanie tekstu",
+        "zh-cn": "文字对齐"
     }
 };
diff --git a/widgets/materialdesign.html b/widgets/materialdesign.html
@@ -499,7 +499,7 @@
         data-vis-name="Input"
         data-vis-update-style="true"
         data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,input;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;oid;inputType[text]/select,text,number,date,time,mask;inputMask;inputMaxLength/number;exportData/custom,materialdesign.viseditor.exportData,textfield;"
-        data-vis-attrs0="group.inputLayout;inputLayout[regular]/select,regular,solo,solo-rounded,solo-shaped,filled,filled-rounded,filled-shaped,outlined,outlined-rounded,outlined-shaped;inputLayoutBackgroundColor/color;inputLayoutBackgroundColorHover/color;inputLayoutBackgroundColorSelected/color;inputLayoutBorderColor/color;inputLayoutBorderColorHover/color;inputLayoutBorderColorSelected/color;inputTextFontFamily/fontname;inputTextFontSize/number;inputTextColor/color;"
+        data-vis-attrs0="group.inputLayout;inputLayout[regular]/select,regular,solo,solo-rounded,solo-shaped,filled,filled-rounded,filled-shaped,outlined,outlined-rounded,outlined-shaped;inputAlignment[left]/select,left,center,right;inputLayoutBackgroundColor/color;inputLayoutBackgroundColorHover/color;inputLayoutBackgroundColorSelected/color;inputLayoutBorderColor/color;inputLayoutBorderColorHover/color;inputLayoutBorderColorSelected/color;inputTextFontFamily/fontname;inputTextFontSize/number;inputTextColor/color;"
         data-vis-attrs1="group.inputLabel;inputLabelText;inputLabelColor/color;inputLabelColorSelected/color;inputLabelFontFamily/fontname;inputLabelFontSize/number,0,24,1;inputTranslateX/number;inputTranslateY/number;"
         data-vis-attrs2="group.inputAppendix;inputPrefix;inputSuffix;inputAppendixColor/color;inputAppendixFontSize/number;inputAppendixFontFamily/fontname;"
         data-vis-attrs3="group.inputSubText;showInputMessageAlways[true]/checkbox;inputMessage;inputMessageFontFamily/fontname;inputMessageFontSize/number;inputMessageColor/color;"
@@ -520,7 +520,7 @@
         data-vis-name="Autocomplete"
         data-vis-update-style="true"
         data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,autocomplete;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,input;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;oid;inputMode[write]/select,write,select;inputType[text]/select,text,date,time;vibrateOnMobilDevices[50]/number;exportData/custom,materialdesign.viseditor.exportData,autocomplete;"
-        data-vis-attrs0="group.inputLayout;inputLayout[regular]/select,regular,solo,solo-rounded,solo-shaped,filled,filled-rounded,filled-shaped,outlined,outlined-rounded,outlined-shaped;inputLayoutBackgroundColor/color;inputLayoutBackgroundColorHover/color;inputLayoutBackgroundColorSelected/color;inputLayoutBorderColor/color;inputLayoutBorderColorHover/color;inputLayoutBorderColorSelected/color;inputTextFontFamily/fontname;inputTextFontSize/number;inputTextColor/color;"
+        data-vis-attrs0="group.inputLayout;inputLayout[regular]/select,regular,solo,solo-rounded,solo-shaped,filled,filled-rounded,filled-shaped,outlined,outlined-rounded,outlined-shaped;inputAlignment[left]/select,left,center,right;inputLayoutBackgroundColor/color;inputLayoutBackgroundColorHover/color;inputLayoutBackgroundColorSelected/color;inputLayoutBorderColor/color;inputLayoutBorderColorHover/color;inputLayoutBorderColorSelected/color;inputTextFontFamily/fontname;inputTextFontSize/number;inputTextColor/color;"
         data-vis-attrs1="group.inputLabel;inputLabelText;inputLabelColor/color;inputLabelColorSelected/color;inputLabelFontFamily/fontname;inputLabelFontSize/number,0,24,1;inputTranslateX/number;inputTranslateY/number;"
         data-vis-attrs2="group.inputAppendix;inputPrefix;inputSuffix;inputAppendixColor/color;inputAppendixFontSize/number;inputAppendixFontFamily/fontname;"
         data-vis-attrs3="group.inputSubText;showInputMessageAlways[true]/checkbox;inputMessage;inputMessageFontFamily/fontname;inputMessageFontSize/number;inputMessageColor/color;"
@@ -544,7 +544,7 @@
         data-vis-name="Select"
         data-vis-update-style="true"
         data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,select;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,input;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;oid;inputType[text]/select,text,date,time;vibrateOnMobilDevices[50]/number;exportData/custom,materialdesign.viseditor.exportData,select;"
-        data-vis-attrs0="group.inputLayout;inputLayout[regular]/select,regular,solo,solo-rounded,solo-shaped,filled,filled-rounded,filled-shaped,outlined,outlined-rounded,outlined-shaped;inputLayoutBackgroundColor/color;inputLayoutBackgroundColorHover/color;inputLayoutBackgroundColorSelected/color;inputLayoutBorderColor/color;inputLayoutBorderColorHover/color;inputLayoutBorderColorSelected/color;inputTextFontFamily/fontname;inputTextFontSize/number;inputTextColor/color;"
+        data-vis-attrs0="group.inputLayout;inputLayout[regular]/select,regular,solo,solo-rounded,solo-shaped,filled,filled-rounded,filled-shaped,outlined,outlined-rounded,outlined-shaped;inputAlignment[left]/select,left,center,right;inputLayoutBackgroundColor/color;inputLayoutBackgroundColorHover/color;inputLayoutBackgroundColorSelected/color;inputLayoutBorderColor/color;inputLayoutBorderColorHover/color;inputLayoutBorderColorSelected/color;inputTextFontFamily/fontname;inputTextFontSize/number;inputTextColor/color;"
         data-vis-attrs1="group.inputLabel;inputLabelText;inputLabelColor/color;inputLabelColorSelected/color;inputLabelFontFamily/fontname;inputLabelFontSize/number,0,24,1;inputTranslateX/number;inputTranslateY/number;"
         data-vis-attrs2="group.inputAppendix;inputPrefix;inputSuffix;inputAppendixColor/color;inputAppendixFontSize/number;inputAppendixFontFamily/fontname;"
         data-vis-attrs3="group.inputSubText;showInputMessageAlways[true]/checkbox;inputMessage;inputMessageFontFamily/fontname;inputMessageFontSize/number;inputMessageColor/color;"

diff --git a/widgets/materialdesign/css/widgets.css b/widgets/materialdesign/css/widgets.css
@@ -119,6 +119,7 @@
   --vue-text-field-message-font-size: 12px;
   --vue-text-field-message-font-family: inherit;
 
+  --vue-text-field-alignment: left;
   --vue-text-field-counter-color: rgba(0,0,0,.6);
   --vue-text-field-counter-font-size: 12px;
   --vue-text-field-counter-font-family: inherit;
@@ -3052,6 +3053,7 @@ svg.materialdesign-widget .materialdesign-button__icon {
 }
 .v-input input {
   max-height: 32px;
+  text-align: var(--vue-text-field-alignment);
 }
 .v-input input:invalid,
 .v-input textarea:invalid {
@@ -3689,6 +3691,10 @@ svg.materialdesign-widget .materialdesign-button__icon {
   color: inherit;
 }
 
+.v-select__selection.v-select__selection--comma{
+  text-align: var(--vue-text-field-alignment);
+}
+
 .theme--light.v-select .v-select__selections {
   color: var(--vue-text-field-input-text-color);
 }

diff --git a/widgets/materialdesign/css/widgets.min.css b/widgets/materialdesign/css/widgets.min.css
diff --git a/widgets/materialdesign/js/widgets.min.js b/widgets/materialdesign/js/widgets.min.js
diff --git a/widgets/materialdesign/js/widgets/materialdesign.00.vue.helper.js b/widgets/materialdesign/js/widgets/materialdesign.00.vue.helper.js
@@ -163,6 +163,9 @@ vis.binds.materialdesign.vueHelper = {
             // Icon: prepand-inner options
             $el.get(0).style.setProperty("--vue-text-icon-prepand-inner-size", myMdwHelper.getNumberFromData(data.prepandInnerIconSize, 16) + 'px');
             $el.get(0).style.setProperty("--vue-text-icon-prepand-inner-color", myMdwHelper.getValueFromData(data.prepandInnerIconColor, ''));
+
+            // Alignment
+            $el.get(0).style.setProperty("--vue-text-field-alignment", myMdwHelper.getValueFromData(data.inputAlignment, 'left'));
         }
     },
     select: {