Top App Bar Widget: color option for menu icon added

Top App Bar Widget: color option for menu icon added close #171
Scrounger · May 20, 2021 · a502ff3 · a502ff3
1 parent 792926b
commit a502ff3
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -12834,6 +12834,10 @@ The adapter uses the following libraries:
  ### __WORK IN PROGRESS__
 -->
 
+<!-- omit in toc -->
+### __WORK IN PROGRESS__
+* (Scrounger) Top App Bar Widget: color option for menu icon added
+
 <!-- omit in toc -->
 ### 0.5.6 (2021-05-07)
 * (Scrounger) Html Widgets: escaping bug fix

diff --git a/admin/lib/colors.json b/admin/lib/colors.json
@@ -376,7 +376,7 @@
  "desc": "imageColor",
  "defaultValue": 5,
  "widget": "Dialog, Dialog iFrame"
- }, 
+ },
  {
  "id": "light.dialog.background",
  "desc": "backgroundColor",
@@ -412,7 +412,7 @@
  "desc": "pressColor",
  "defaultValue": 2,
  "widget": "Dialog, Dialog iFrame"
- }, 
+ },
  {
  "id": "light.dialog.close_button_icon",
  "desc": "fullscreenCloseIconColor",
@@ -935,6 +935,12 @@
  "defaultValue": 0,
  "widget": "Top App Bar"
  },
+ {
+ "id": "light.top_app_bar.icon",
+ "desc": "topAppBarIconColor",
+ "value": "#FFFFFF",
+ "widget": "Top App Bar"
+ },
  {
  "id": "light.top_app_bar.title",
  "desc": "colorTopAppBarTitle",
@@ -994,7 +1000,7 @@
  "desc": "subIconDrawerColor",
  "defaultValue": 0,
  "widget": "Top App Bar"
- }, 
+ },
  {
  "id": "light.top_app_bar.item_text_selected",
  "desc": "colorListItemTextSelected",
@@ -1192,7 +1198,7 @@
  "desc": "icon upgradeable",
  "value": "#ec0909",
  "widget": "AdapterStatus [Script]"
- }, 
+ },
  {
  "id": "light.scripts.adapterStatus.icons.logParser.warn",
  "desc": "logParser warn icon",

diff --git a/admin/lib/colorsDark.json b/admin/lib/colorsDark.json
@@ -935,6 +935,12 @@
  "defaultValue": 0,
  "widget": "Top App Bar"
  },
+ {
+ "id": "dark.top_app_bar.icon",
+ "desc": "topAppBarIconColor",
+ "value": "#FFFFFF",
+ "widget": "Top App Bar"
+ },
  {
  "id": "dark.top_app_bar.title",
  "desc": "colorTopAppBarTitle",

diff --git a/admin/words.js b/admin/words.js
@@ -11525,5 +11525,17 @@ systemDictionary = {
  "es": "color del icono del submenú",
  "pl": "kolor ikony podmenu",
  "zh-cn": "子菜单图标颜色"
+ },
+ "topAppBarIconColor": {
+ "en": "icon color",
+ "de": "Symbolfarbe",
+ "ru": "цвет значка",
+ "pt": "cor do ícone",
+ "nl": "pictogram kleur",
+ "fr": "couleur de l'icône",
+ "it": "colore dell'icona",
+ "es": "color del icono",
+ "pl": "kolor ikony",
+ "zh-cn": "图标颜色"
  }
 };
diff --git a/widgets/materialdesign.html b/widgets/materialdesign.html
@@ -671,7 +671,7 @@
  data-vis-name="Top App Bar"
  data-vis-update-style="true"
  data-vis-attrs="manual/custom,materialdesign.viseditor.manualLink,topAppBar;questionsAndAnswers/custom,materialdesign.viseditor.questionsAndAnswers,topAppBar;donate/custom,materialdesign.viseditor.bmc;onlineExampleProject/custom,materialdesign.viseditor.onlineExample;useTheme/custom,materialdesign.viseditor.useTheme;oid;showIndexNum/checkbox;navItemCount[1]/number;navDefaultValue[0]/number,0;selectedItemName_oid/id;debug/checkbox;"
- data-vis-attrs0="group.topAppBarLayout;topAppBarLayout[standard]/select,standard,dense,short;titleTopAppBar[Material Design Widgets]/html;colorTopAppBarTitle[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.title]/color;colorTopAppBarBackground[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.background]/color;titleFont[#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.title]/fontname;titleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.top_app_bar.title]/number;showSelectedItemAsTitle[true]/checkbox;showSelectedItemIconInTitle[true]/checkbox;iconTitleHeight/dimension;topAppBarZ_index[998]/number;vibrateTopAppBarOnMobilDevices[50]/number;"
+ data-vis-attrs0="group.topAppBarLayout;topAppBarLayout[standard]/select,standard,dense,short;titleTopAppBar[Material Design Widgets]/html;colorTopAppBarTitle[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.title]/color;colorTopAppBarBackground[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.background]/color;titleFont[#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.title]/fontname;titleFontSize[#mdwTheme:vis-materialdesign.0.fontSizes.top_app_bar.title]/number;topAppBarIconColor/color;showSelectedItemAsTitle[true]/checkbox;showSelectedItemIconInTitle[true]/checkbox;iconTitleHeight/dimension;topAppBarZ_index[998]/number;vibrateTopAppBarOnMobilDevices[50]/number;"
  data-vis-attrs1="group.drawerLayout;drawerLayout[modal]/select,modal,permanent;drawerItemLayout[standard]/select,standard,backdrop;listItemDividerStyle[standard]/select,standard,padded,inset;drawerWidth/number;z_index[1000]/number;showHeader[true]/checkbox;headerLabel[<h4 class='mdc-drawer__title'>Material Design Widgets</h4><h6 class='mdc-drawer__subtitle'>by Scrounger</h6>]/html;showLabels[true]/checkbox;drawerIconHeight/number;listItemAlignment[left]/select,left,center,right;listItemTextFont[#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.item]/fontname;listItemTextFontDisabled[#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.item_disabled]/fontname;listItemTextSize[#mdwTheme:vis-materialdesign.0.fontSizes.top_app_bar.item]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;listItemHeaderFont[#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.header]/fontname;listItemHeaderTextSize[#mdwTheme:vis-materialdesign.0.fontSizes.top_app_bar.header]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;backdropLabelBackgroundHeight[30]/slider,0,100,1;vibrateDrawerOnMobilDevices[0]/number;"
  data-vis-attrs2="group.drawerColors;colorDrawerBackground[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.menu_background]/color;colorDrawerItemBackground[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_background]/color;colorDrawerHeaderBackground[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.header_background]/color;colorListItemHover[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_hover]/color;colorListItemSelected[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_selected]/color;colorListItemText[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_text]/color;colorListItemTextSelected[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_text_selected]/color;colorListItemTextDisabled[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_text_disabled]/color;colorListItemIconDisabled[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon_disabled]/color;colorListItemHeaders[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.header_text]/color;colorListItemDivider[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_divider]/color;colorSubItemToggleIcon[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon_toggle]/color;colorDrawerbackdropLabelBackground[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_backdrop_background_text_off]/color;colorDrawerbackdropLabelBackgroundActive[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_backdrop_background_text_on]/color;"
  data-vis-attrs3="group.drawerSubItemsLayout;drawerSubItemLayout[standard]/select,standard,backdrop;listSubItemDividerStyle[standard]/select,standard,padded,inset;colorListSubItemDivider[#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_divider]/color;drawerSubItemIconHeight/number;listSubItemAlignment[left]/select,left,center,right;listItemSubTextFont[#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.subItem]/fontname;listSubItemTextSize[#mdwTheme:vis-materialdesign.0.fontSizes.top_app_bar.subItem]/auto,headline1,headline2,headline3,headline4,headline5,headline6,subtitle1,subtitle2,body1,body2,caption,button,overline,xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger;listItemSubTextFontDisabled[#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.subItem_disabled]/fontname;showSubItemsLabels[true]/checkbox;backdropSubLabelBackgroundHeight/slider,0,100,1;"

diff --git a/widgets/materialdesign/css/widgets.css b/widgets/materialdesign/css/widgets.css
@@ -19,6 +19,7 @@
  --materialdesign-font-top-app-bar-sub-item: inherit;
  --materialdesign-font-top-app-bar-sub-item-disabled: inherit;
  --materialdesign-color-top-app-bar-header-background: #44739e;
+ --materialdesign-top-app-bar-color-burger-icon: #fff;
 
  --materialdesign-color-checkbox: #44739e;
  --materialdesign-color-checkbox-border: rgba(0, 0, 0, 0.54);
@@ -1402,6 +1403,10 @@ svg.materialdesign-widget .materialdesign-button__icon {
  padding-top: 0px;
 }
 
+.materialdesign-widget .mdc-icon-button.material-icons.mdc-top-app-bar__navigation-icon{
+ color: var(--materialdesign-top-app-bar-color-burger-icon);
+}
+
 .materialdesign-widget .materialdesign-list-item-backdrop-container {
  display: flex; 
  justify-content: center; 

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.topappbarnav.js b/widgets/materialdesign/js/widgets/materialdesign.topappbarnav.js
@@ -362,6 +362,7 @@ vis.binds.materialdesign.topappbarnav = {
  $mdcTopAppBar.get(0).style.setProperty("--materialdesign-font-top-app-bar-title", myMdwHelper.getValueFromData(data.titleFont, ''));
  $mdcTopAppBar.get(0).style.setProperty("--materialdesign-font-size-top-app-bar-title", myMdwHelper.getNumberFromData(data.titleFontSize, 20) + 'px');
  $mdcTopAppBar.get(0).style.setProperty("--materialdesign-color-top-app-bar-title", myMdwHelper.getValueFromData(data.colorTopAppBarTitle, ''));
+ $mdcTopAppBar.get(0).style.setProperty("--materialdesign-top-app-bar-color-burger-icon", myMdwHelper.getValueFromData(data.topAppBarIconColor, ''));
 
 
  $this.find(`.mdc-list-item`).not(".mdc-list-item.isSubItem").each(function (itemIndex) {