Skip to content

Commit

Permalink
Merge pull request #53 from AnthonMS/bug-fixes-and-button-updates
Browse files Browse the repository at this point in the history
Bug fixes and button updates
  • Loading branch information
AnthonMS authored Feb 1, 2024
2 parents 14d026e + 49e4c63 commit afab638
Show file tree
Hide file tree
Showing 14 changed files with 731 additions and 513 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/release.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,4 @@ jobs:
with:
draft: true
generate_release_notes: true
files: dist/*.js
files: dist/*.js
116 changes: 65 additions & 51 deletions dist/dev/my-cards.js

Large diffs are not rendered by default.

32 changes: 23 additions & 9 deletions dist/my-button.js

Large diffs are not rendered by default.

116 changes: 65 additions & 51 deletions dist/my-cards.js

Large diffs are not rendered by default.

34 changes: 17 additions & 17 deletions dist/my-slider-v2.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/my-slider.js

Large diffs are not rendered by default.

9 changes: 3 additions & 6 deletions docs/cards/button.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,14 @@

## Description

My Slider V2 is a customizable card for light, input_number, covers, fans, switches, locks & media_player volume_level entity sliders, for the Home Assistant Lovelace frontend.
My Button is a customizable card for lights, covers, switches, for the Home Assistant Lovelace frontend.

It is completely customizable now and fully templatable.
It is completely customizable now and fully templatable. But is still very much under development. So be sure to be ready to update config if using this card. Nothing will be removed, but the default styling might change going forward, extra functionality might be added that is not wanted in your setup. I am trying to keep it as pretty and usable as I can make it without configuring it from yaml.

### Features
- Fully customizable slider card for lights, input_numbers, media_players, covers, fans, switches, and locks
- Fully customizable button card with built in slider for lights, covers, switches
- Templating
- Styles can be fully customized easily within the card itself
- Vertical
- Flipped
- Inverse

### Future features (Maybe)
- Animation on click. Make different animation configs for user to choose between. One for ripple, scale out/in for card, scale out/in for icon, loading around icon until action has been performed?.
Expand Down
3 changes: 3 additions & 0 deletions docs/cards/slider-v2.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@ It is completely customizable now and fully templatable.
| intermediate | boolean | false | If set to `true` the slider sends immediate updates while sliding. Not recommended by default, since it may generate too many updates. |
| disableScroll | boolean | true | Disable scrolling on touch devices when starting the touchmove from within the slider. Default true on covers. |
| allowTapping | boolean | true | Allow tapping on slider track to activate. If false only dragging by thumb will activate it. |
| marginOfError | number | 10 | Pixel distance the input can be from the thumb if allowTapping is set to false |
| allowSliding | boolean | true | Allow sliding on slider track to activate. This works well in conjuction with allowTapping false. It will only trigger when sliding in direction of slider or if sliding from thumb. |
| slideDistance | number | 10 | Distance input has to travel in slider direction for allowSliding to take effect |
| showMin | boolean | false | Show the minimum on the slider. If false, the min will be far left (if not flipped or vertical) |
| minThreshold | number | 15 | Only used for determining how much progress should be shown on a switch or lock |
| maxThreshold | number | 75 | Only used to determine how far users have to slide to activate toggle commands for switch and lock |
Expand Down
7 changes: 3 additions & 4 deletions src/cards/extras/const.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
export const CARD_VERSION = '2.0.2'
export const SLIDER_VERSION = '3.0.4'
export const BUTTON_VERSION = '1.0.0'
export const BUTTON_COVER_VERSION = '0.0.1'
export const CARD_VERSION = '2.0.3'
export const SLIDER_VERSION = '3.0.5'
export const BUTTON_VERSION = '1.0.1'
209 changes: 153 additions & 56 deletions src/cards/my-button.ts

Large diffs are not rendered by default.

299 changes: 178 additions & 121 deletions src/cards/my-slider.ts

Large diffs are not rendered by default.

251 changes: 123 additions & 128 deletions src/cards/styles/my-button.styles.ts
Original file line number Diff line number Diff line change
@@ -1,133 +1,128 @@
export const getStyle = (e:string, style:any = {}) => {
switch (e) {
case 'card':
return cardStyle(style)
case 'icon':
return iconStyle(style)
case 'label-wrapper':
return labelWrapperStyle(style)
case 'label':
return labelStyle(style)
case 'container':
return containerStyle(style)
case 'container-column':
return containerColumnStyle(style)
case 'row1':
return row1Style(style)
case 'row2':
return row2Style(style)
case 'row3':
return row3Style(style)
case 'column1':
return column1Style(style)
case 'column2':
return column2Style(style)
default:
console.log('Getting default styles')
return
export const getStyle = (e: string, styleToMerge: any = {}) => {
const style = styles[e]
if (style) {
return style(styleToMerge)
} else {
console.log(`${e}: Not found in styles`)
return
}
}

const cardStyle = (style:any) => {
return {
height: '125px',
width: '100%',
'min-width': 'fit-content',
background: 'var(--card-background-color)',
...style
}
}

const iconStyle = (style:any) => {
return {
'--mdc-icon-size': '100%',
height: '35px',
width: '35px',
display: 'inline-block',
padding: '10px 10px 10px 10px',
cursor: 'pointer',
color: 'var(--paper-item-active-icon-color)',
...style
}
}

const labelWrapperStyle = (style:any) => {
return {
width: '100%',
height: '100%',
display: 'flex',
// // 'flex-direction': 'column', /* align children vertically (column format) */
// 'justify-content': 'center', /* center children vertically */
// 'align-items': 'center', /* center column horizontally */
// // 'padding-left': '10px',
...style
}
}

const labelStyle = (style:any) => {
return {
padding: '0',
margin: '0 10px',
color: 'var(--primary-text-color)',
'font-weight': 'bold',
...style
}
}

// Vertical Layout
const containerStyle = (style:any) => {
return {
padding: '0',
margin: '0',
display: 'flex',
'flex-flow': 'column',
height: '100%',
...style
}
}

const row1Style = (style:any) => {
return {
flex: '0 1 auto',
...style
}
}

const row2Style = (style:any) => {
return {
flex: '1 1 auto',
...style
}
}
const row3Style = (style:any) => {
return {
flex: '0 1 auto',
margin: '0 2px 2px 2px',
...style
}
}

// Horizontal Style
const containerColumnStyle = (style:any) => {
return {
padding: '0',
margin: '0',
display: 'flex',
'flex-flow': 'row',
height: '100%',
...style
}
}
const column1Style = (style:any) => {
return {
flex: '1',
...style
}
}
const column2Style = (style:any) => {
return {
flex: '0',
padding: '3px 3px 3px 0',
...style
const styles = {
card: (style: any) => {
return {
height: '125px',
width: '100%',
'min-width': 'fit-content',
background: 'var(--card-background-color)',
overflow: 'hidden',
cursor: 'pointer',
...style
}
},
icon: (style: any) => {
return {
'--mdc-icon-size': '100%',
height: '35px',
width: '35px',
display: 'inline-block',
padding: '10px 0 0 10px',
color: 'var(--paper-item-icon-color)',
...style
}
},
stats: (style: any) => {
return {
'margin-left': 'auto',
'margin-right': '5px',
'margin-top': '5px',
'margin-bottom': '5px',
'color': 'var(--primary-text-color)',
// 'border-radius': '50%',
'display': 'grid',
'place-items': 'center',
'aspect-ratio': '1 / 1',
// 'box-shadow': '0px 0px 10px 0px rgba(0,0,0,0.75)',
'font-family': '"Arial", sans-serif',
'font-size': '11px',
'text-align': 'center',
'text-shadow': '2px 2px 4px rgba(0, 0, 0, 0.5)',
// 'transform': 'scale(0.9)',
...style
}
},
'label-wrapper': (style: any) => {
return {
width: '100%',
height: '100%',
display: 'flex',
// // 'flex-direction': 'column', /* align children vertically (column format) */
// 'justify-content': 'center', /* center children vertically */
// 'align-items': 'center', /* center column horizontally */
// // 'padding-left': '10px',
...style
}
},
label: (style: any) => {
return {
padding: '0',
margin: '0 10px',
color: 'var(--primary-text-color)',
'font-weight': 'bold',
cursor: 'pointer',
...style
}
},
container: (style: any) => {
return {
padding: '0',
margin: '0',
display: 'flex',
'flex-flow': 'column',
height: '100%',
...style
}
},
row1: (style: any) => {
return {
flex: '0 1 auto',
display: 'flex',
'justify-content': 'space-between',
...style
}
},
row2: (style: any) => {
return {
flex: '1 1 auto',
...style
}
},
row3: (style: any) => {
return {
flex: '0 1 auto',
...style
}
},
'container-column': (style: any) => {
return {
padding: '0',
margin: '0',
display: 'flex',
'flex-flow': 'row',
height: '100%',
...style
}
},
column1: (style: any) => {
return {
flex: '1',
...style
}
},
column2: (style: any) => {
return {
flex: '0',
...style
}
}
}
Loading

0 comments on commit afab638

Please sign in to comment.