From 8f23e8f3d6e30b3f39afe90ac95a416d61c18c98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Felix=20N=C3=BCsse?= Date: Wed, 22 Apr 2020 16:41:14 +0200 Subject: [PATCH 1/2] Add color to cards globally and locally --- dashmachine/main/models.py | 1 + dashmachine/main/read_config.py | 16 ++++++++++++++++ .../static/css/global/dashmachine-theme.css | 19 +++++++++++++++++++ dashmachine/templates/main/macros.html | 4 ++-- readme_cards.md | 3 ++- readme_settings.md | 1 + 6 files changed, 41 insertions(+), 3 deletions(-) diff --git a/dashmachine/main/models.py b/dashmachine/main/models.py index 013045a..51e0c87 100644 --- a/dashmachine/main/models.py +++ b/dashmachine/main/models.py @@ -30,6 +30,7 @@ class Apps(db.Model): tags = db.Column(db.String()) type = db.Column(db.String()) urls = db.Column(db.String()) + color = db.Column(db.String()) class DataSources(db.Model): diff --git a/dashmachine/main/read_config.py b/dashmachine/main/read_config.py index 15b203b..55dce82 100644 --- a/dashmachine/main/read_config.py +++ b/dashmachine/main/read_config.py @@ -49,6 +49,8 @@ def read_config(): settings.accent = config["Settings"].get("accent", "orange") + settings.cardcolor = config["Settings"].get("cardcolor", False) + settings.background = config["Settings"].get("background", "None") if "roles" in config["Settings"]: @@ -168,6 +170,20 @@ def read_config(): app.urls = config[section].get("urls", None) + app.color = config[section].get("color", None) + + if app.color is not None: + app.colorR = int(app.color[1:3], 16) + app.colorG = int(app.color[3:5], 16) + app.colorB = int(app.color[5:7], 16) + app.color = str(app.colorR)+","+str(app.colorG)+","+str(app.colorB) + + if app.color is None and settings.cardcolor == "True": + app.color = "var(--theme-primary-rgb)" + + if app.color is None: + app.color = "" + if "groups" in config[section]: for group_name in config[section]["groups"].split(","): if not Groups.query.filter_by(name=group_name.strip()).first(): diff --git a/dashmachine/static/css/global/dashmachine-theme.css b/dashmachine/static/css/global/dashmachine-theme.css index cd9f62f..45310b0 100644 --- a/dashmachine/static/css/global/dashmachine-theme.css +++ b/dashmachine/static/css/global/dashmachine-theme.css @@ -6,6 +6,7 @@ --theme-surface-1: #fcfcfc; --theme-surface-2: #e0e0e0; --theme-primary: #FF9966; + --theme-primary-rgb: 255, 153, 102; --theme-secondary: #9e9e9e; --theme-accent: #3399FF; --theme-color-font: #2c2f3a; @@ -28,65 +29,83 @@ } [data-accent="red"] { --theme-primary: #f44336; + --theme-primary-rgb: 244, 67, 54; } [data-accent="pink"] { --theme-primary: #e91e63; + --theme-primary-rgb: 233, 30, 99; } [data-accent="purple"] { --theme-primary: #9c27b0; + --theme-primary-rgb: 156, 39, 176; } [data-accent="deepPurple"] { --theme-primary: #673ab7; + --theme-primary-rgb: 103, 58, 183; } [data-accent="indigo"] { --theme-primary: #3f51b5; + --theme-primary-rgb: 63, 81, 181; } [data-accent="blue"] { --theme-primary: #2196f3; + --theme-primary-rgb: 33, 150, 243; } [data-accent="lightBlue"] { --theme-primary: #03a9f4; + --theme-primary-rgb: 3, 169, 244; --theme-on-primary: #2c2f3a; } [data-accent="cyan"] { --theme-primary: #00bcd4; + --theme-primary-rgb: 0, 188, 212; --theme-on-primary: #2c2f3a; } [data-accent="teal"] { --theme-primary: #009688; + --theme-primary-rgb: 0, 150, 136; } [data-accent="green"] { --theme-primary: #4caf50; + --theme-primary-rgb: 76, 175, 80; --theme-on-primary: #2c2f3a; } [data-accent="lightGreen"] { --theme-primary: #8bc34a; + --theme-primary-rgb: 139, 195, 74; --theme-on-primary: #2c2f3a; } [data-accent="lime"] { --theme-primary: #cddc39; + --theme-primary-rgb: 205, 220, 57; --theme-on-primary: #2c2f3a; } [data-accent="yellow"] { --theme-primary: #ffeb3b; + --theme-primary-rgb: 255, 235, 59; --theme-on-primary: #2c2f3a; } [data-accent="amber"] { --theme-primary: #ffc107; + --theme-primary-rgb: 255, 193, 7; --theme-on-primary: #2c2f3a; } [data-accent="deepOrange"] { --theme-primary: #ff5722; + --theme-primary-rgb: 255, 87, 34; } [data-accent="brown"] { --theme-primary: #795548; + --theme-primary-rgb: 121, 85, 72; } [data-accent="grey"] { --theme-primary: #9e9e9e; + --theme-primary-rgb: 158, 158, 158; --theme-on-primary: #2c2f3a; } [data-accent="blueGrey"] { --theme-primary: #607d8b; + --theme-primary-rgb: 96, 125, 139; } /* THEME CLASSES */ .theme-surface { diff --git a/dashmachine/templates/main/macros.html b/dashmachine/templates/main/macros.html index 7068263..aa75012 100644 --- a/dashmachine/templates/main/macros.html +++ b/dashmachine/templates/main/macros.html @@ -12,7 +12,7 @@ {% macro App(app) %}
-
+
{{ AppAnchor(app) }}
{% if app.data_sources.count() > 0 %} @@ -39,7 +39,7 @@
- {{ app.name }} + {{ app.name }} more_vert {% if app.data_sources.count() > 0 %} refresh diff --git a/readme_cards.md b/readme_cards.md index a4f41dd..810a315 100644 --- a/readme_cards.md +++ b/readme_cards.md @@ -22,10 +22,11 @@ groups = admin_only | open_in | Yes | open the app in the current tab, an iframe or a new tab | iframe, new_tab, this_tab | | icon | Yes | Icon for the dashboard. | /static/images/icons/yourpicture.png, external link to image | | sidebar_icon | No | Icon for the sidenav. | /static/images/icons/yourpicture.png, external link to image | -| description | No | A short description for the app. | HTML | +| description | No | A short description for the app. | HTML | | data_sources | No | Data sources to be included on the app's card.*Note: you must have a data source set up in the config above this application entry. | comma separated string | | tags | No | Optionally specify tags for organization on /home | comma separated string | | groups | No | Optionally specify the access groups that can see this app. | comma separated string | +| color | No | Optionally specify the color of the card | 6-Digit Hex Code (eg. #3399FF) | ##### Collection These entries provide a card on the dashboard containing a list of links. diff --git a/readme_settings.md b/readme_settings.md index 4b0f788..d1cb8a3 100644 --- a/readme_settings.md +++ b/readme_settings.md @@ -20,6 +20,7 @@ tags_expanded = True | [Settings] | Yes | Config section name. | [Settings] | | theme | Yes | UI theme. | light, dark | | accent | Yes | UI accent color | orange, red, pink, purple, deepPurple, indigo, blue, lightBlue,cyan, teal, green, lightGreen, lime, yellow, amber, deepOrange, brown, grey, blueGrey | +| cardcolor | Yes | Card Color. Defines if the card should use the UI-Accent color | True or False (Default: False) | | background | Yes | Background image for the UI | /static/images/backgrounds/yourpicture.png, external link to image, None, random | | roles | No | User roles for access groups. | comma separated string, if not defined, this is set to 'admin,user,public_user'. Note: admin, user, public_user roles are required and will be added automatically if omitted. | | home_access_groups | No | Define which access groups can access the /home page | Groups defined in your config. If not defined, default is admin_only | From f1d15106bdd10453b4149d4703158cc1e75cb07e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Felix=20N=C3=BCsse?= Date: Wed, 22 Apr 2020 16:45:23 +0200 Subject: [PATCH 2/2] Add color to collection --- dashmachine/templates/main/macros.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dashmachine/templates/main/macros.html b/dashmachine/templates/main/macros.html index aa75012..cfb639d 100644 --- a/dashmachine/templates/main/macros.html +++ b/dashmachine/templates/main/macros.html @@ -63,9 +63,9 @@ {% macro Collection(app) %}
-
+
- + {% if app.icon %} {{app.icon}} {% endif %}