Merge pull request #39 from loupeteam/feature/material

Add a prebuilt material library
loupeteam · Jan 10, 2024 · 1c91858 · 1c91858
2 parents 1075d91 + d62f088
commit 1c91858
Show file tree

Hide file tree

Showing 12 changed files with 13,188 additions and 15 deletions.
diff --git a/example/HMI/app/css/dark.css b/example/HMI/app/css/dark.css
@@ -0,0 +1,51 @@
+.dark {
+  --md-sys-color-primary: rgb(165 200 255);
+  --md-sys-color-surface-tint: rgb(165 200 255);
+  --md-sys-color-on-primary: rgb(0 49 94);
+  --md-sys-color-primary-container: rgb(33 72 118);
+  --md-sys-color-on-primary-container: rgb(212 227 255);
+  --md-sys-color-secondary: rgb(188 199 220);
+  --md-sys-color-on-secondary: rgb(38 49 65);
+  --md-sys-color-secondary-container: rgb(61 71 88);
+  --md-sys-color-on-secondary-container: rgb(216 227 248);
+  --md-sys-color-tertiary: rgb(218 189 226);
+  --md-sys-color-on-tertiary: rgb(61 41 70);
+  --md-sys-color-tertiary-container: rgb(85 63 94);
+  --md-sys-color-on-tertiary-container: rgb(247 216 255);
+  --md-sys-color-error: rgb(255 180 171);
+  --md-sys-color-on-error: rgb(105 0 5);
+  --md-sys-color-error-container: rgb(147 0 10);
+  --md-sys-color-on-error-container: rgb(255 218 214);
+  --md-sys-color-background: rgb(17 19 24);
+  --md-sys-color-on-background: rgb(225 226 233);
+  --md-sys-color-surface: rgb(17 19 24);
+  --md-sys-color-on-surface: rgb(225 226 233);
+  --md-sys-color-surface-variant: rgb(67 71 78);
+  --md-sys-color-on-surface-variant: rgb(195 198 207);
+  --md-sys-color-outline: rgb(141 145 153);
+  --md-sys-color-outline-variant: rgb(67 71 78);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(225 226 233);
+  --md-sys-color-inverse-on-surface: rgb(46 48 53);
+  --md-sys-color-inverse-primary: rgb(60 96 144);
+  --md-sys-color-primary-fixed: rgb(212 227 255);
+  --md-sys-color-on-primary-fixed: rgb(0 28 58);
+  --md-sys-color-primary-fixed-dim: rgb(165 200 255);
+  --md-sys-color-on-primary-fixed-variant: rgb(33 72 118);
+  --md-sys-color-secondary-fixed: rgb(216 227 248);
+  --md-sys-color-on-secondary-fixed: rgb(17 28 43);
+  --md-sys-color-secondary-fixed-dim: rgb(188 199 220);
+  --md-sys-color-on-secondary-fixed-variant: rgb(61 71 88);
+  --md-sys-color-tertiary-fixed: rgb(247 216 255);
+  --md-sys-color-on-tertiary-fixed: rgb(39 20 48);
+  --md-sys-color-tertiary-fixed-dim: rgb(218 189 226);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(85 63 94);
+  --md-sys-color-surface-dim: rgb(17 19 24);
+  --md-sys-color-surface-bright: rgb(55 57 62);
+  --md-sys-color-surface-container-lowest: rgb(12 14 19);
+  --md-sys-color-surface-container-low: rgb(25 28 32);
+  --md-sys-color-surface-container: rgb(29 32 36);
+  --md-sys-color-surface-container-high: rgb(40 42 47);
+  --md-sys-color-surface-container-highest: rgb(50 53 58);
+}
diff --git a/example/HMI/app/css/light.css b/example/HMI/app/css/light.css
@@ -0,0 +1,52 @@
+
+.light {
+  --md-sys-color-primary: rgb(60 96 144);
+  --md-sys-color-surface-tint: rgb(60 96 144);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(212 227 255);
+  --md-sys-color-on-primary-container: rgb(0 28 58);
+  --md-sys-color-secondary: rgb(84 95 113);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(216 227 248);
+  --md-sys-color-on-secondary-container: rgb(17 28 43);
+  --md-sys-color-tertiary: rgb(109 86 118);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(247 216 255);
+  --md-sys-color-on-tertiary-container: rgb(39 20 48);
+  --md-sys-color-error: rgb(186 26 26);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(255 218 214);
+  --md-sys-color-on-error-container: rgb(65 0 2);
+  --md-sys-color-background: rgb(249 249 255);
+  --md-sys-color-on-background: rgb(25 28 32);
+  --md-sys-color-surface: rgb(249 249 255);
+  --md-sys-color-on-surface: rgb(25 28 32);
+  --md-sys-color-surface-variant: rgb(224 226 236);
+  --md-sys-color-on-surface-variant: rgb(67 71 78);
+  --md-sys-color-outline: rgb(116 119 127);
+  --md-sys-color-outline-variant: rgb(195 198 207);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(46 48 53);
+  --md-sys-color-inverse-on-surface: rgb(240 240 247);
+  --md-sys-color-inverse-primary: rgb(165 200 255);
+  --md-sys-color-primary-fixed: rgb(212 227 255);
+  --md-sys-color-on-primary-fixed: rgb(0 28 58);
+  --md-sys-color-primary-fixed-dim: rgb(165 200 255);
+  --md-sys-color-on-primary-fixed-variant: rgb(33 72 118);
+  --md-sys-color-secondary-fixed: rgb(216 227 248);
+  --md-sys-color-on-secondary-fixed: rgb(17 28 43);
+  --md-sys-color-secondary-fixed-dim: rgb(188 199 220);
+  --md-sys-color-on-secondary-fixed-variant: rgb(61 71 88);
+  --md-sys-color-tertiary-fixed: rgb(247 216 255);
+  --md-sys-color-on-tertiary-fixed: rgb(39 20 48);
+  --md-sys-color-tertiary-fixed-dim: rgb(218 189 226);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(85 63 94);
+  --md-sys-color-surface-dim: rgb(217 218 224);
+  --md-sys-color-surface-bright: rgb(249 249 255);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(242 243 250);
+  --md-sys-color-surface-container: rgb(237 237 244);
+  --md-sys-color-surface-container-high: rgb(231 232 238);
+  --md-sys-color-surface-container-highest: rgb(225 226 233);
+}
diff --git a/example/HMI/app/css/main.css b/example/HMI/app/css/main.css
@@ -0,0 +1,3 @@
+body{
+    background-color: var(--md-sys-color-background, #303030);
+}
diff --git a/example/HMI/app/index.html b/example/HMI/app/index.html
@@ -19,11 +19,14 @@
 	</script>
 
 	<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link href="app/css/dark.css" rel="stylesheet">
+	<link href="app/css/light.css" rel="stylesheet">
+	<link href="app/css/main.css" rel="stylesheet">
 
 	<title>Test Components</title>
 </head>
 
-<body>
+<body class='light'>
 
 	<!-- Begin page content - This is a placeholder that tmplits will load the page into after loading-->
 	<div class="container" id="main">

diff --git a/example/HMI/app/views/main.handlebars b/example/HMI/app/views/main.handlebars
@@ -1,3 +1,6 @@
+
+<md-filled-button>Theme</md-filled-button>
+
 <lui-tab-control class='lux-value' value="0" data-var-name='tmplitTest:tmplit.MultiSelect_INT' >
     <template title="Station 1">
         {{#tmplit 'Columns' }}

diff --git a/example/HMI/package.json b/example/HMI/package.json
@@ -16,28 +16,29 @@
     "@loupeteam/loupe-ux": "^2.0.1",
     "@loupeteam/tmplits": "file:../../src/HMI/",
     "@loupeteam/tmplits-button": "file:../../src/tmplits/tmplits-button/",
-    "@loupeteam/tmplits-led": "file:../../src/tmplits/tmplits-led/",
     "@loupeteam/tmplits-checkbox": "file:../../src/tmplits/tmplits-checkbox/",
-    "@loupeteam/tmplits-numeric": "file:../../src/tmplits/tmplits-numeric/",
-    "@loupeteam/tmplits-text": "file:../../src/tmplits/tmplits-text/",
-    "@loupeteam/tmplits-valueupdown": "file:../../src/tmplits/tmplits-valueupdown/",
     "@loupeteam/tmplits-columns": "file:../../src/tmplits/tmplits-columns/",
     "@loupeteam/tmplits-columnsbs": "file:../../src/tmplits/tmplits-columnsbs/",
-    "@loupeteam/tmplits-slider": "file:../../src/tmplits/tmplits-slider/",
+    "@loupeteam/tmplits-directorybrowser": "file:../../src/tmplits/tmplits-directorybrowser/",
+    "@loupeteam/tmplits-directorybrowserwindow": "file:../../src/tmplits/tmplits-directorybrowserwindow/",
     "@loupeteam/tmplits-dropdown": "file:../../src/tmplits/tmplits-dropdown/",
     "@loupeteam/tmplits-dropdowntable": "file:../../src/tmplits/tmplits-dropdowntable/",
-    "@loupeteam/tmplits-tableselect": "file:../../src/tmplits/tmplits-tableselect/",
-    "@loupeteam/tmplits-tabs": "file:../../src/tmplits/tmplits-tabs/",
-    "@loupeteam/tmplits-multiselect": "file:../../src/tmplits/tmplits-multiselect/",
+    "@loupeteam/tmplits-globalclasses": "file:../../src/tmplits/tmplits-globalclasses/",
     "@loupeteam/tmplits-labeledlist": "file:../../src/tmplits/tmplits-labeledlist/",
-    "@loupeteam/tmplits-pageselect": "file:../../src/tmplits/tmplits-pageselect/",
-    "@loupeteam/tmplits-page": "file:../../src/tmplits/tmplits-page/",
-    "@loupeteam/tmplits-directorybrowser": "file:../../src/tmplits/tmplits-directorybrowser/",
-    "@loupeteam/tmplits-directorybrowserwindow": "file:../../src/tmplits/tmplits-directorybrowserwindow/",
+    "@loupeteam/tmplits-led": "file:../../src/tmplits/tmplits-led/",
+    "@loupeteam/tmplits-multiselect": "file:../../src/tmplits/tmplits-multiselect/",
+    "@loupeteam/tmplits-numeric": "file:../../src/tmplits/tmplits-numeric/",
     "@loupeteam/tmplits-numgrid": "file:../../src/tmplits/tmplits-numgrid/",
+    "@loupeteam/tmplits-page": "file:../../src/tmplits/tmplits-page/",
+    "@loupeteam/tmplits-pageselect": "file:../../src/tmplits/tmplits-pageselect/",
     "@loupeteam/tmplits-robotscene": "file:../../src/tmplits/tmplits-robotscene/",
+    "@loupeteam/tmplits-slider": "file:../../src/tmplits/tmplits-slider/",
+    "@loupeteam/tmplits-tableselect": "file:../../src/tmplits/tmplits-tableselect/",
+    "@loupeteam/tmplits-tabs": "file:../../src/tmplits/tmplits-tabs/",
+    "@loupeteam/tmplits-text": "file:../../src/tmplits/tmplits-text/",
     "@loupeteam/tmplits-utilities": "file:../../src/tmplits/tmplits-utilities/",
-    "@loupeteam/tmplits-globalclasses": "file:../../src/tmplits/tmplits-globalclasses/",
+    "@loupeteam/tmplits-valueupdown": "file:../../src/tmplits/tmplits-valueupdown/",
+    "@loupeteam/tmplits-material": "file:../../src/tmplits/tmplits-material/",
     "app": "file:./app/",
     "bootstrap": "^3.3.4",
     "handlebars": "*",
@@ -47,4 +48,4 @@
   "lpm": {
     "type": "project"
   }
-}
+}
diff --git a/src/tmplits/tmplits-material/README.md b/src/tmplits/tmplits-material/README.md
@@ -0,0 +1,39 @@
+# Tmplit-material
+
+This tmplit is a prebuilt material design library for tmplits. By installing this library you can use material design components in your tmplits project. Tmplits will automatically load the material design css and javascript files for you after installing this library.
+
+### Usage
+
+npm install tmplits-material
+
+Use it in your tmplits project:
+
+```html
+<md-filled-button >I'm a button!</md-filled-button>
+```
+
+### To use a theme
+
+```html
+    <!-- Include the themes you support -->
+    <link href="app/css/dark.css" rel="stylesheet">
+	<link href="app/css/light.css" rel="stylesheet">
+
+    <!-- Add the class for the active theme to the body tag-->
+    <body class='light'>
+    ...
+```
+
+
+### Updating the library
+
+Install the version of material you want to use:
+
+```bash
+npm install --save-dev @material/web
+```
+
+Then run the build script:
+```bash
+npm run build
+```
diff --git a/src/tmplits/tmplits-material/index.js b/src/tmplits/tmplits-material/index.js
@@ -0,0 +1,2 @@
+//Import all the material components so that rollup can bundle them
+import "@material/web/all"
diff --git a/src/tmplits/tmplits-material/library.handlebars b/src/tmplits/tmplits-material/library.handlebars
@@ -0,0 +1,2 @@
+{{!-- DO NOT DELETE THIS FILE - Doing so will cause 404 errors on the client side which will not break anything, but will throw errors in the console. --}}
+<h1>Hello World!</h1>
diff --git a/src/tmplits/tmplits-material/loader.js b/src/tmplits/tmplits-material/loader.js
@@ -0,0 +1,9 @@
+//DO NOT DELETE THIS FILE 
+//- Doing so will cause 404 errors on the client side which will not break anything, but will throw errors in the console.
+
+//This file will get loaded as a javascript file (not a module), meaning you can't import other modules from here.
+
+//Define your tmplit functions here and they will be globally available
+//function TmplitHelloWorld(context, args){
+//    return `Hello ${context[0]}!`
+//}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		//Import all the material components so that rollup can bundle them
		import "@material/web/all"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		{{!-- DO NOT DELETE THIS FILE - Doing so will cause 404 errors on the client side which will not break anything, but will throw errors in the console. --}}
		<h1>Hello World!</h1>