only icon style

Standarduser · Aug 13, 2024 · 9f7b23f · 9f7b23f
1 parent ff5ead3
commit 9f7b23f
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ The widgets are designed for VIS 1.x.
 ### **WORK IN PROGRESS**
 
 * Added option to show icons colored on tiles and radio
-* Added new styles "big" and "small" for all tiles
+* Added new styles "big", "small" and "only icon" for all tiles
 
 ### 0.3.1 (2024-07-12)
 

diff --git a/widgets/vis-homekittiles.html b/widgets/vis-homekittiles.html
@@ -379,7 +379,7 @@
 							</div>
 						</div>
 					</div>'
-	data-vis-attrs="description/custom,vis-homekittiles.infoText,hktSwitchBool;oid/id;icon/image;iconRound/checkbox;iconColored/checkbox;displaystyle[tile]/select,tile,tile big,tile small,indicator;"
+	data-vis-attrs="description/custom,vis-homekittiles.infoText,hktSwitchBool;oid/id;icon/image;iconRound/checkbox;iconColored/checkbox;displaystyle[tile]/select,tile,tile big,tile small,indicator,tile iconOnly;"
 	data-vis-attrs0="group.labelGroup1;label[Switch];label2pre;label2oid/id;label2unit;label2post;label2decimals[1];label2factor[1];label2comma[true]/checkbox;label2tdp/checkbox;"
 	data-vis-attrs1="group.labelGroup2;label3pre;label3oid/id;label3unit;label3post;label3decimals[1];label3factor[1];label3comma[true]/checkbox;label3tdp/checkbox;label4pre;label4oid/id;label4unit;label4post;label4decimals[1];label4factor[1];label4comma[true]/checkbox;label4tdp/checkbox;label5pre;label5oid/id;label5unit;label5post;label5decimals[1];label5factor[1];label5comma[true]/checkbox;label5tdp/checkbox;"
 	data-vis-attrs2="group.increment;oidIncrement/id;incrementPlusShow/checkbox;incrementMinusShow/checkbox;incrementPlusValue[1];incrementMinusValue[-1];incrementValueMax[100];incrementValueMin[0];incrementShowOnlyIfTrue/checkbox;"
@@ -452,7 +452,7 @@
 							</div>
 						</div>
 					</div>'
-	data-vis-attrs="description/custom,vis-homekittiles.infoText,hktViewInWidgetDialog;oidActive/id;icon/image;iconRound/checkbox;iconColored/checkbox;showLikeActive/checkbox;displaystyle[tile]/select,tile,tile big,tile small,indicator;"
+	data-vis-attrs="description/custom,vis-homekittiles.infoText,hktViewInWidgetDialog;oidActive/id;icon/image;iconRound/checkbox;iconColored/checkbox;showLikeActive/checkbox;displaystyle[tile]/select,tile,tile big,tile small,indicator,tile iconOnly;"
 	data-vis-attrs0="group.labelGroup1;label[Dialog];label2pre;label2oid/id;label2unit;label2post;label2decimals[1];label2factor[1];label2comma[true]/checkbox;label2tdp/checkbox;"
 	data-vis-attrs1="group.labelGroup2;label3pre;label3oid/id;label3unit;label3post;label3decimals[1];label3factor[1];label3comma[true]/checkbox;label3tdp/checkbox;label4pre;label4oid/id;label4unit;label4post;label4decimals[1];label4factor[1];label4comma[true]/checkbox;label4tdp/checkbox;label5pre;label5oid/id;label5unit;label5post;label5decimals[1];label5factor[1];label5comma[true]/checkbox;label5tdp/checkbox;"
 	data-vis-attrs2="group.increment;oidIncrement/id;incrementPlusShow/checkbox;incrementMinusShow/checkbox;incrementPlusValue[1];incrementMinusValue[-1];incrementValueMax[100];incrementValueMin[0];incrementShowOnlyIfTrue/checkbox;"

diff --git a/widgets/vis-homekittiles/css/style.css b/widgets/vis-homekittiles/css/style.css
@@ -479,6 +479,33 @@
 	color: var(--hkt-color-tile-off-foreground);
 }
 /*#endregion*/
+/*---------------------------------------------------------------*/
+/*#region Basic design for icon-only */
+.homekitTiles.tile.iconOnly {
+	border-radius: 0;
+}
+.homekitTiles.tile.iconOnly .labelGroup1,
+.homekitTiles.tile.iconOnly .labelGroup2 {
+	display: none;
+}
+.homekitTiles.tile.iconOnly.state-default,
+.homekitTiles.tile.iconOnly.state-active {
+	background-color: rgba(0,0,0,0);
+}
+.homekitTiles.tile.state-default .tileIcon:not(.iconColored) {
+	filter: grayscale(100);
+}
+.homekitTiles.tile.iconOnly .tileIcon {
+	width: 100%;
+	height: auto;
+	top: 0px;
+	left: 0px;
+	position: absolute;
+}
+.homekitTiles.tile.iconOnly .increment {
+	display: none
+}
+/*#endregion*/
 /*----------------------------------------------------------------*/
 /*#region Date-Picker */
 

diff --git a/widgets/vis-homekittiles/js/vis-homekittiles.js b/widgets/vis-homekittiles/js/vis-homekittiles.js
@@ -193,6 +193,7 @@ $.extend(
 		"texttemplate":					{	"en": "Text template",					"de": "Textvoreinstellung"					},
 		"tile":							{	"en": "Tile",							"de": "Kachel"								},
 		"tile big":						{	"en": "Tile (big)",						"de": "Kachel (groß)"						},
+		"tile iconOnly":				{	"en": "Only icon",						"de": "nur Icon"							},
 		"tile small":					{	"en": "Tile (small)",					"de": "Kachel (klein)"						},
 		"unit":							{	"en": "Unit",							"de": "Einheit"								},
 		"value_":						{	"en": "Value ",							"de": "Wert "								},