Added ability to change margin (#13)

* Added ability to specify custom margin CSS (optional)

* Added ability to specify custom margin CSS (optional)

* -Refactored margin/style implementation to tidy up
-Implemented alignment option

* Updated readme

* Changed margin to use variables in HA theme

* Removed old config item definition

README.md

@@ -40,17 +40,19 @@ resources:
 | ---- | ------ | ------------ | -------------------------- |
 | type | string | **Required** | `custom:text-divider-row` |
 | text | string | **Required** | Text to display in divider |
+| align | string | Optional | Specifies the text alignment. Must be: 'left', 'center' or 'right' |
 
 ## Theme Variables
 
 The following variables are available and can be set in your theme to change the appearance of the lock.
 Can be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically anything supported by CSS.
 
-| name | Default | Description |
-| ------------------------ | ---------------------- | ------------- |
-| `text-divider-color` | `secondary-text-color` | Divider color |
-| `text-divider-font-size` | `14px` | Font size |
-| `text-divider-line-size` | `1px` | Line size |
+| name | Default | Description |
+| ------------------------ | ---------------------- | -------------- |
+| `text-divider-color` | `secondary-text-color` | Divider color |
+| `text-divider-font-size` | `14px` | Font size |
+| `text-divider-line-size` | `1px` | Line size |
+| `text-divider-margin` | `1em 0` | Divider margin |
 
 ## [Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)
 

src/const.ts

@@ -1 +1 @@
-export const CARD_VERSION = '1.4.0';
+export const CARD_VERSION = '1.4.1';

src/text-divider-row.ts

@@ -21,13 +21,27 @@ class TextDividerRow extends LitElement {
  this._config = config;
  }
 
+ protected getClass(): string {
+ const allowedValues = ['center', 'left', 'right'];
+ if (this._config && this._config.align) {
+ if (allowedValues.includes(this._config.align)) {
+ return `text-divider text-divider-${this._config.align}`;
+ }
+ }
+ return 'text-divider text-divider-center';
+ }
+
  protected render(): TemplateResult | void {
  if (!this._config) {
  return html``;
  }
 
  return html`
- <h2 class="text-divider"><span>${this._config.text}</span></h2>
+ <div class="text-divider-container">
+ <h2 class="${this.getClass()}">
+ <span>${this._config.text}</span>
+ </h2>
+ </div>
  `;
  }
 
@@ -36,30 +50,51 @@ class TextDividerRow extends LitElement {
  :host {
  display: block;
  position: relative;
+ --background: var(--ha-card-background, var(--card-background-color));
  --divider-color: var(--text-divider-color, var(--secondary-text-color));
  --font-size: var(--text-divider-font-size, 14px);
  --line-size: var(--text-divider-line-size, 1px);
  }
+
  .text-divider {
- margin: 1em 0;
+ width: 100%;
+ border-bottom: var(--line-size) solid var(--divider-color);
  line-height: 0;
+ margin: 10px 0 20px;
+ }
+
+ .text-divider-container {
+ margin: var(--text-divider-margin, 1em 0);
+ }
+
+ .text-divider-center {
  text-align: center;
- white-space: nowrap;
- display: flex;
- align-items: center;
  }
+
+ .text-divider-left {
+ text-align: left;
+ }
+
+ .text-divider-right {
+ text-align: right;
+ }
+
  .text-divider span {
- padding: 1em;
  color: var(--divider-color);
  font-size: var(--font-size);
+ background: var(--background);
+ padding: 1px 1em;
  }
- .text-divider:before,
- .text-divider:after {
- content: '';
- background: var(--divider-color);
- display: block;
- height: var(--line-size);
- width: 100%;
+ .text-divider-center span {
+ margin: 0px;
+ }
+
+ .text-divider-left span {
+ margin: 0 0 0 1em;
+ }
+
+ .text-divider-right span {
+ margin: 0 1em 0 0;
  }
  `;
  }

src/types.ts

@@ -1,4 +1,5 @@
 export interface TextDividerRowConfig {
  type: string;
  text: string;
+ align: string;
 }