merge of readme

AnthonMS · Feb 1, 2024 · 708e868 · 708e868
2 parents f2f5e40 + afab638
commit 708e868
Show file tree

Hide file tree

Showing 13 changed files with 728 additions and 513 deletions.
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -19,4 +19,4 @@ jobs:
               with:
                   draft: true
                   generate_release_notes: true
-                  files: dist/*.js
+                  files: dist/*.js
diff --git a/dist/dev/my-cards.js b/dist/dev/my-cards.js
diff --git a/dist/my-button.js b/dist/my-button.js
diff --git a/dist/my-cards.js b/dist/my-cards.js
diff --git a/dist/my-slider-v2.js b/dist/my-slider-v2.js
diff --git a/dist/my-slider.js b/dist/my-slider.js
diff --git a/docs/cards/button.md b/docs/cards/button.md
@@ -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?.

diff --git a/src/cards/extras/const.ts b/src/cards/extras/const.ts
@@ -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'
diff --git a/src/cards/my-button.ts b/src/cards/my-button.ts
diff --git a/src/cards/my-slider.ts b/src/cards/my-slider.ts
diff --git a/src/cards/styles/my-button.styles.ts b/src/cards/styles/my-button.styles.ts
@@ -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
+        }
     }
 }