feat(SLIDER): add vertical slider option and improve design #672

timota · 2021-03-22T01:39:13Z

Add Vertical Slider tile.

Tile doesn't require any input from user, width and height will be calculated automatically based on Tile size.
Best to use with tile height > 1.
Also, some other options are available for user: sliderHeight and sliderWidth. If they are defined inside slider - they will be used in first place and take precedence via automated calculation.
Also, Tile supports icon. If icon doesn't defined it will be taken to consideration in case of automatic calculation.

Example:

{
    position: [0, 0],
    height: 3,
    id: 'light.entity',
    type: TYPES.SLIDER_VERTICAL,
    unit: '%',
    title: 'Slider',
    icon: 'mdi-lightbulb',
    state: false,
    filter: function (value) {
       var num = parseFloat(value) / 2.55 ;
       return num && !isNaN(num) ? num.toFixed() : 0;
    },
    value: '@attributes.brightness',
    slider: {
       max: 255,
       min: 0,
       step: 5,
       field: 'brightness',
       // sliderWidth: '60',
       // sliderHeight: '270',
       request: {
          type: "call_service",
          domain: "light",
          service: "turn_on",
          field: "brightness"
       },
    },
}

rchl · 2021-03-22T21:42:00Z

Will also need to be added to TILES.md (example) and README.md (at least the new type)

scripts/controllers/main.js

styles/main.less

scripts/controllers/main.js

scripts/directives/tile.html

styles/main.less

rchl · 2021-03-23T08:13:45Z

styles/themes.less

+  @sliderValueColor: #555;
+  @sliderTrackBg: #555;
+  @sliderColor: #aaa;
+  @sliderThumbColor: #777;
+
+  .slidervertical-inner {
+    &-value {
+      color: @sliderValueColor;
+      font-weight: 400;
+    }
+  }
+
+  .range-holder input[type="range"] {
+
+    &::-webkit-slider-runnable-track {
+      background-color: @sliderTrackBg;
+    }
+
+    &::-moz-range-track {
+      background-color: @sliderTrackBg;
+    }
+
+    &::-webkit-slider-thumb{
+      background: @sliderColor;
+      border-bottom:20px solid @sliderColor;
+      border-left:10px solid @sliderColor;
+      border-right:10px solid @sliderColor;
+      border-top:20px solid @sliderColor;
+      box-shadow: -350px 0 0 350px @sliderColor, inset 0 0 0 80px @sliderThumbColor;
+    }
+
+    &::-moz-range-thumb{
+      background: @sliderColor;
+      border-bottom:20px solid @sliderColor;
+      border-left: 12px solid @sliderColor;
+      border-right: 12px solid @sliderColor;
+      border-top:20px solid @sliderColor;
+      box-shadow: -350px 0 0 350px @sliderColor, inset 0 0 0 80px @sliderThumbColor;
+    }
+
+  }


I would hope there is some more generic way to do that that works in all themes because this is not very scalable.

I would expect to use some theme-specific color variables without repeating all those selectors in each theme.

Also, have you tested that it looks decent in every theme?

I would hope there is some more generic way to do that that works in all themes because this is not very scalable.
I would expect to use some theme-specific color variables without repeating all those selectors in each theme.

This can be changed to use parameterised mixins.

#lib-range-holder-input() { .range-holder-input() { generic_attr: attr; &::-webkit-slider-runnable-track { color: @Value1; } &::-moz-range-track { color: @Value2; } } } @Value1: green; @Value2: red; .range-holder input[type="range"] { #lib-range-holder-input.range-holder-input(); } .-theme-homekit { @Value1: black; @Value2: white; .range-holder input[type="range"] { extend_attr: extend; #lib-range-holder-input.range-holder-input(); &::-moz-range-track { extend_this: this; } } }

Result:

.range-holder input[type="range"] { generic_attr: attr; } .range-holder input[type="range"]::-webkit-slider-runnable-track { color: green; } .range-holder input[type="range"]::-moz-range-track { color: red; } .-theme-homekit .range-holder input[type="range"] { extend_attr: extend; generic_attr: attr; } .-theme-homekit .range-holder input[type="range"]::-webkit-slider-runnable-track { color: black; } .-theme-homekit .range-holder input[type="range"]::-moz-range-track { color: white; } .-theme-homekit .range-holder input[type="range"]::-moz-range-track { extend_this: this; }

In this case you can get rid of all those selectors and manage all with variables, but potentially raw css will grow in size as all basic attrs can be populated inside themes selectors. Have to be careful with this.

Another way use parameterised mixins as functions;

#lib-range-holder-input() { .range-input(@Val1, @Val2) { color: @Val1; background: @Val2; } } @Val1: green; @Val2: red; .range-holder input[type="range"] { &::-webkit-slider-runnable-track { #lib-range-holder-input.range-input(@Val1, @Val2); } } .-theme-homekit { @Value1: black; @Value2: white; .range-holder input[type="range"] { &::-webkit-slider-runnable-track { #lib-range-holder-input.range-input(@Value1, @Value2); } } }

result:

.range-holder input[type="range"]::-webkit-slider-runnable-track { color: green; background: red; } .-theme-homekit .range-holder input[type="range"]::-webkit-slider-runnable-track { color: black; background: white; }

In this case we have to define selectors inside themes as well, but code looks more clear/readable as for me.

So please choose which you prefer.

styles/main.less

scripts/controllers/main.js

alphasixtyfive · 2021-03-23T10:12:43Z

I'm sorry to interrupt you guys, but here are my two thoughts:

This should probably be called VERTICAL_SLIDER rather than SLIDER_VERTICAL
I would think that default theme should not have rounded corners of the slider to better match the overall boxy style yet Homekit theme would be great with it.

timota · 2021-03-25T00:50:36Z

@alphasixtyfive

to be honest i like VERTICAL_SLIDER more than SLIDER_VERTICAL. I named it slider_vertical as this points to the same tile family - slider. If all parties are ok to rename - im ok with this.

default theme should not have rounded corners

for me it looks so cubic. at least, probably radius:2px ?

rchl

I've actually come to the realization that I'd like this functionality to be merged into SLIDER. It could just have a flag to switch to vertical mode. Otherwise, everything becomes inconsistent as SLIDER has a generic name but can only be horizontal, and also the styles for both of those are completely different. I think the styles for SLIDER don't really work that well for Tileboard as the slider is very small so it would make sense to consolidate that.

I can help with doing that work.

TILE_EXAMPLES.md

scripts/controllers/main.js

timota · 2021-04-08T19:49:21Z

Sorry for a long delay in work, was busy with family/work issues.

So, This commit contains Vertical and Horizontal sliders.
Vertical behaves same way as it was before (you can manage width/height on your own or leave it for auto-calculation)

New options:

  vertical: true,
  alignRow: false, - ignored when vertical is tru

alignRow, - ignored when vertical is true. it doesn't make sense

For Horizontal i have added new option to make Tile look column or 'row' aligned:

Column looks in similar to old(legacy) one, with some re-arrangements (icon added) and slider positioned horizontally.
Row on other side, re arrange items inside Tile to look in-line started with icon, slider and value. (more on screenshots)

To make it testing easier, below you can find Tiles examples.

                  {
                     position: [0, 0],
                     width: 2, height: 2,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (vertical 1)',
                     vertical: true,
                     alignRow: false,
                     unit: '%',
                     icon: 'mdi-lightbulb',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 50,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [2, 0],
                     width: 2, height: 1,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (vertical 2)',
                     vertical: true,
                     alignRow: true,
                     unit: '%',
                     icon: 'mdi-lightbulb',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 30,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [2, 1],
                     width: 1, height: 1,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (vertical 2)',
                     vertical: true,
                     alignRow: true,
                     unit: '%',
                     icon: '',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 30,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [4, 0],
                     width: 1, height: 2,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (vertical 3)',
                     vertical: true,
                     // alignRow: true,
                     unit: '%',
                     icon: 'mdi-lightbulb',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 120,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [5, 0],
                     width: 0.5, height: 2,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (vertical 4)',
                     vertical: true,
                     alignRow: true,
                     state: '',
                     unit: '%',
                     icon: 'mdi-lightbulb',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 120,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [0, 2],
                     width: 2, height: 2,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (horiz/col)',
                     vertical: false,
                     alignRow: false,
                     unit: '%',
                     icon: 'mdi-lightbulb',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 120,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [2, 2],
                     width: 2, height: 1,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (horiz/col)',
                     vertical: false,
                     alignRow: false,
                     unit: '%',
                     icon: 'mdi-lightbulb',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 120,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [2, 3],
                     width: 1, height: 1,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (horiz/col)',
                     vertical: false,
                     alignRow: false,
                     unit: '%',
                     icon: 'mdi-lightbulb',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 120,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [4, 2],
                     width: 1, height: 2,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (horiz/col)',
                     vertical: false,
                     alignRow: false,
                     unit: '%',
                     icon: 'mdi-lightbulb',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 120,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [5, 2],
                     width: 0.5, height: 2,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (horiz/col)',
                     vertical: false,
                     alignRow: false,
                     unit: '%',
                     icon: 'mdi-lightbulb',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 120,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [6, 0],
                     width: 2, height: 2,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (horiz/row)',
                     vertical: false,
                     alignRow: true,
                     unit: '%',
                     icon: 'mdi-lightbulb',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 120,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [8, 0],
                     width: 2, height: 1,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (horiz/row)',
                     vertical: false,
                     alignRow: true,
                     unit: '%',
                     icon: 'mdi-lightbulb',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 120,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [8, 1],
                     width: 1, height: 1,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (horiz/row)',
                     vertical: false,
                     alignRow: true,
                     unit: '%',
                     icon: '',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 120,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [6, 2],
                     width: 1, height: 2,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (horiz/row)',
                     vertical: false,
                     alignRow: true,
                     unit: '%',
                     icon: 'mdi-lightbulb',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 120,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [7, 2],
                     width: 3, height: 1,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (horiz/row)',
                     vertical: false,
                     alignRow: true,
                     unit: '%',
                     icon: 'mdi-lightbulb',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 120,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },
                  {
                     position: [7, 3],
                     width: 3, height: 0.5,
                     type: TYPES.SLIDER,
                     title: 'SLIDER (horiz/row)',
                     vertical: false,
                     alignRow: true,
                     state: '',
                     unit: '%',
                     icon: 'mdi-lightbulb',
                     id: 'light.f1_r2_light_tv_wall',
                     value: '@attributes.brightness',
                     slider: {
                        max: 255,
                        min: 0,
                        step: 5,
                        field: 'brightness',
                        // sliderHeight: 120,
                        // sliderWidth: 80,
                        request: {
                           type: "call_service",
                           domain: "light",
                           service: "turn_on",
                           field: "brightness"
                        },
                     }
                  },

If you will have questions - please let me know.

alphasixtyfive · 2021-04-08T20:50:53Z

Thanks for great work but I really think that the default theme should stay without rounded corners to keep the style consistent.

timota · 2021-04-08T21:11:40Z

Thanks for great work but I really think that the default theme should stay without rounded corners to keep the style consistent.

default theme has only radius 2px just to smooth edges. On screenshot homekit theme.

Below screenshot of default theme. Please check it

rchl · 2021-04-09T20:57:16Z

It will take me a while to review this properly so please be patient. :)

Just was quickly checking for now and noticed that it doesn't work that well with smaller tiles (tileSize 80):

rchl · 2021-04-09T21:00:56Z

Actually bigger tile size doesn't really help. It appears it's more about the colors of the input. I think you need to override more of its styles since it's probably picking OS styles (macOS/chrome here).

rchl · 2021-04-09T21:05:09Z

Is the alignRow option really needed? It looks rather cramped in the row configuration. And there is a lot of unused space in the tile. What would be the use case for that?

EDIT: But maybe the "cramped" issue is just a matter of adding some more padding. I guess it could be useful for creating tiles that take little space vertically...

rchl · 2021-04-09T21:10:28Z

Quick update. Looks saner when the slider is not at max value but still not good enough. Not enough contrast to be able to tell where the slider control is.

timota · 2021-04-09T21:13:16Z

It will take me a while to review this properly so please be patient. :)

Just was quickly checking for now and noticed that it doesn't work that well with smaller tiles (tileSize 80):

i will take a look what i can do

timota · 2021-04-09T21:15:07Z

Actually bigger tile size doesn't really help. It appears it's more about the colors of the input. I think you need to override more of its styles since it's probably picking OS styles (macOS/chrome here).

Thats really strange. i'm using mac/catalina/chrome and dont have access to WinOS at all. If you can help me to identify colours for that it will be great.

timota · 2021-04-09T21:17:03Z

Quick update. Looks saner when the slider is not at max value but still not good enough. Not enough contrast to be able to tell where the slider control is.

same as previous comment - for me colours look nice. I can make them a bit darker to look better. I will try android tablet to and hope i can find golden middle.

rchl · 2021-04-09T21:18:41Z

Thats really strange. i'm using mac/catalina/chrome and dont have access to WinOS at all. If you can help me to identify colours for that it will be great.

I'm on macOS also, not Windows. I'm on Big Sur though, which can make a difference.

timota · 2021-04-09T21:18:59Z

Is the alignRow option really needed? It looks rather cramped in the row configuration. And there is a lot of unused space in the tile. What would be the use case for that?

EDIT: But maybe the "cramped" issue is just a matter of adding some more padding. I guess it could be useful for creating tiles that take little space vertically...

I can be wrong but as for me slider horizontal/AlignRow as it should looks like.

scripts/globals/constants.js

timota · 2021-04-09T21:39:10Z

Thats really strange. i'm using mac/catalina/chrome and dont have access to WinOS at all. If you can help me to identify colours for that it will be great.

I'm on macOS also, not Windows. I'm on Big Sur though, which can make a difference.

can you be so kind and pickup colours that work well on Big Sur ? i can compare them with colours on Catalina and Android.
Thanks

rchl

can you be so kind and pickup colours that work well on Big Sur ? i can compare them with colours on Catalina and Android.
Thanks

Actually, I see now what's happening. Your entity is in "off" state so its background is a bit transparent, making the slider stand out. Turn that entity on and you will see the same as me.

styles/main.less

rchl · 2021-04-09T21:56:18Z

I haven't checked all themes but it seems to look decent with border: 1px solid #808080;

timota

these are done

scripts/globals/constants.js

styles/main.less

timota · 2021-04-14T12:09:26Z

So... in the latest commit i have rearrange styles a bit to fit into lowest possible(without modification) tileSize: 90px.
If tileSize < 90 - some inputs from user are required:

icon has to be removed to fit it nicely
state can be disabled as for me it doesnt make any sense as we have value

Below you can find screenshots:

tileSize: 90px

tileSize: 80px default view. Some tiles are marked FIXME

tileSize: 80px user modified (removed: icon, state)

Hopefully all these make sense.

timota · 2021-04-19T09:11:47Z

@rchl sorry for bothering, but did you have a chance to review this PR ?

rchl · 2021-04-19T10:32:23Z

Didn't have much time. Will try in the evening.

rchl · 2021-04-19T19:11:25Z

I'll be fixing those as I comment as I don't want to prolong this but just mentioning here so you are up to date.

In the default theme, the value text color should be white (to match existing tiles and make the contrast better):

rchl · 2021-04-19T19:27:08Z

TILE_EXAMPLES.md

+![SLIDER](images/tile-screenshots/SLIDER_VERTICAL.png)
 ```js
 {
-   position: [6, 1],
-   id: 'input_number.casatunes_volume_6',
-   type: TYPES.SLIDER,
-   unit: '%',
-   state: false,
-   //bottom: true, // puts slider on bottom
-   slider: {
-      //max: 100,
-      //min: 0,
-      //step: 2,
-      request: {
-         type: "call_service",
-         domain: "input_number",
-         service: "set_value",
-         field: "value"
-      }
-   }
+    position: [0, 0],
+    height: 2,    // Best works with height > 1. In case height=1, better use custom sliderHeight to achieve your needs
+    id: 'light.entity',
+    type: TYPES.SLIDER_VERTICAL,
+    unit: '%',
+    title: 'Slider',
+    icon: 'mdi-lightbulb', // Can be defined or omited. Slider height will be calculated automatically
+    // legacy: true,  // old-style slider that only works in horizontal mode (defaults to `false`)
+    // bottom: true, // puts slider on the bottom (defaults to `true`)
+    // vertical: true,  // show vertical slider (defaults to `false` - horizontal)
+    state: false,
+    filter: function (value) {
+       var num = parseFloat(value) / 2.55;
+       return num && !isNaN(num) ? num.toFixed() : 0;
+    },
+    value: '@attributes.brightness',
+    slider: {
+       max: 255,
+       min: 0,
+       step: 5,
+       field: 'brightness',
+       // sliderWidth: '60',     // Custom slider width
+       // sliderHeight: '270',   // Custom slider height
+       request: {
+          type: "call_service",
+          domain: "light",
+          service: "turn_on",
+          field: "brightness"
+       },
+    },


A lot needs to be made up to date here. Also update screenshot to use the default theme, for consistency.

rchl · 2021-04-19T19:58:17Z

scripts/directives/tile.html

+            <span ng-bind="getSliderValue(item, entity, _c)"></span>
+            <span ng-if="(_unit = entityUnit(item, entity))" ng-bind="_unit"></span>


Existing classes need to be reused (with some overrides) instead of creating a completely new one as that is a recipe for creating inconsistencies with existing themes.

Actually didn't change much here as things are a bit messy currently.

rchl · 2021-04-19T21:49:00Z

OK, I did some updates that I wanted. Feel free to try it out and check if I did break something, before merging.

timota

Except one comment regarding custom slider height - all looks good

timota · 2021-04-20T08:55:19Z

scripts/controllers/main.js

+            if (sliderWidth <= 0 || sliderHeight <= 22) {
+               styles.display = 'none';
+            }


Not agree with this, as this can affect user entered values (sliderHeight). What if user has his own styles applied, and his tile can accommodate height lower than 22. I know that it too small to be useable but...

My thinking was that if the input is not visible then it should not have a layout since then it would be focusable. That said, focusing stuff with the keyboard is probably not something very relevant in TileBoard so it's more a theoretical issue. But OK, will revert that.

timota

thanks

timota · 2021-04-20T09:58:36Z

Thanks for all your help and effort. all looks good. If you are happy - can you merge it please.

rchl · 2021-04-20T10:03:08Z

Thanks for your work on this!

Add Vertical Slider

1f94ddd

timota mentioned this pull request Mar 22, 2021

Vertical Slider Tile #673

Closed

rchl suggested changes Mar 22, 2021

View reviewed changes

scripts/controllers/main.js Outdated Show resolved Hide resolved

styles/main.less Outdated Show resolved Hide resolved

timota added 5 commits March 22, 2021 22:11

Remove transforms prefixes. sort all properties lexicographically

8f57d34

Fix Tile size calculation when height not defined

7e9de20

Fix CUSTOM_THEMES.HOMEKIT style

a1b1ca5

remove empty lines

d6c17ba

fix height calculation. Consider icon defined and empty.

0b850a5

timota commented Mar 23, 2021

View reviewed changes

scripts/controllers/main.js Outdated Show resolved Hide resolved

Add description to TILE_EXAMPLES.md

f0d1d24

rchl suggested changes Mar 23, 2021

View reviewed changes

timota added 2 commits March 23, 2021 10:02

remove redundant condition

a9d27a4

add spaces

32dae6c

change calculation logic. Add some calculation to cache.

e09cc20

timota requested a review from rchl March 25, 2021 00:44

Add missing styles

2c6749f

rchl suggested changes Mar 25, 2021

View reviewed changes

TILE_EXAMPLES.md Outdated Show resolved Hide resolved

scripts/controllers/main.js Outdated Show resolved Hide resolved

rchl and others added 3 commits March 25, 2021 20:52

small review updates

f97901a

merge vertical slider into SLIDER

fe9d02e

add vertical/horizontal sliders with Row/Column alignment

094b2a3

timota requested a review from rchl April 8, 2021 19:50

timota commented Apr 9, 2021

View reviewed changes

scripts/globals/constants.js Outdated Show resolved Hide resolved

rchl reviewed Apr 9, 2021

View reviewed changes

styles/main.less Outdated Show resolved Hide resolved

timota commented Apr 14, 2021

View reviewed changes

scripts/globals/constants.js Outdated Show resolved Hide resolved

styles/main.less Outdated Show resolved Hide resolved

Fix outstanding issues. Rearrange styles to fit into 90px tileSize

2c41c07

timota requested a review from rchl April 14, 2021 12:10

rchl reviewed Apr 19, 2021

View reviewed changes

various small updates

3e60647

timota commented Apr 20, 2021

View reviewed changes

timota requested a review from rchl April 20, 2021 09:37

don't display:none

1c2821a

timota commented Apr 20, 2021

View reviewed changes

rchl changed the title ~~Add Vertical Slider~~ feat(SLIDER): add vertical slider option and improve design Apr 20, 2021

rchl merged commit e713089 into resoai:master Apr 20, 2021

		<span ng-bind="getSliderValue(item, entity, _c)"></span>
		<span ng-if="(_unit = entityUnit(item, entity))" ng-bind="_unit"></span>

feat(SLIDER): add vertical slider option and improve design #672

feat(SLIDER): add vertical slider option and improve design #672

Conversation

timota commented Mar 22, 2021 • edited Loading

rchl commented Mar 22, 2021

rchl Mar 23, 2021

Choose a reason for hiding this comment

timota Mar 25, 2021

Choose a reason for hiding this comment

alphasixtyfive commented Mar 23, 2021

timota commented Mar 25, 2021

rchl left a comment • edited Loading

Choose a reason for hiding this comment

timota commented Apr 8, 2021 • edited Loading

alphasixtyfive commented Apr 8, 2021

timota commented Apr 8, 2021 • edited Loading

rchl commented Apr 9, 2021

rchl commented Apr 9, 2021

rchl commented Apr 9, 2021 • edited Loading

rchl commented Apr 9, 2021

timota commented Apr 9, 2021

timota commented Apr 9, 2021

timota commented Apr 9, 2021

rchl commented Apr 9, 2021

timota commented Apr 9, 2021

timota commented Apr 9, 2021

rchl left a comment

Choose a reason for hiding this comment

rchl commented Apr 9, 2021

timota left a comment

Choose a reason for hiding this comment

timota commented Apr 14, 2021

timota commented Apr 19, 2021

rchl commented Apr 19, 2021

rchl commented Apr 19, 2021 • edited Loading

rchl Apr 19, 2021

Choose a reason for hiding this comment

rchl Apr 19, 2021

Choose a reason for hiding this comment

rchl Apr 19, 2021

Choose a reason for hiding this comment

rchl commented Apr 19, 2021

timota left a comment

Choose a reason for hiding this comment

timota Apr 20, 2021

Choose a reason for hiding this comment

rchl Apr 20, 2021

Choose a reason for hiding this comment

timota left a comment

Choose a reason for hiding this comment

timota commented Apr 20, 2021

rchl commented Apr 20, 2021

timota commented Mar 22, 2021 •

edited

Loading

rchl left a comment •

edited

Loading

timota commented Apr 8, 2021 •

edited

Loading

timota commented Apr 8, 2021 •

edited

Loading

rchl commented Apr 9, 2021 •

edited

Loading

rchl commented Apr 19, 2021 •

edited

Loading