Merge pull request #6 from JosunLP/FEATURE/DesignImprovements

Feature/design improvements

.editorconfig

@@ -0,0 +1,35 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+charset = utf-8
+
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{js,ts,svg,md}]
+charset = utf-8
+
+[*.{ts,js}]
+indent_style = tab
+indent_size = 4
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[*.{sass,scss}]
+indent_style = space
+indent_size = 2
+
+[*.{css,less}]
+indent_style = space
+indent_size = 2
+
+[*.{json,yml,yaml}]
+indent_style = space

.github/workflows/codeql-analysis.yml

@@ -18,7 +18,7 @@ on:
         # The branches below must be a subset of the branches above
         branches: ["main"]
     schedule:
-    - cron: '37 13 * * 4'
+        - cron: "37 13 * * 4"
 
 jobs:
     analyze:
@@ -32,7 +32,7 @@ jobs:
         strategy:
             fail-fast: false
             matrix:
-        language: [ 'javascript' ]
+                language: ["javascript"]
                 # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
                 # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
@@ -52,7 +52,6 @@ jobs:
                   # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
                   # queries: security-extended,security-and-quality
 
-        
             # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
             # If this step fails, then you should remove it and run the build manually (see below)
             - name: Autobuild

public/options.html

@@ -20,7 +20,7 @@
       </div>
     </div>
     <footer>
-      <script type="module" src="./js/classes/settings.js"></script>
+      <script type="module" src="./js/settings.js"></script>
     </footer>
   </body>
 </html>

src/components/button.ts

@@ -0,0 +1,63 @@
+import { customButton } from "../types/buttonType";
+
+export class BasicButton {
+
+    private type: customButton;
+
+    private text: string;
+
+    private id: string | undefined;
+
+    private className: string | undefined;
+
+    constructor(type: customButton, text: string, id?: string, className?: string) {
+        this.type = type;
+        this.text = text;
+        this.id = id;
+        this.className = className;
+    }
+
+    public render(): string {
+        const result = document.createElement('button');
+        result.type = "button";
+        result.className = this.type;
+        result.textContent = this.text;
+
+		switch (this.type) {
+			case "primary":
+				result.className = "btn btn-primary";
+				break;
+			case "success":
+				result.className = "btn btn-success";
+				break;
+			case "danger":
+				result.className = "btn btn-danger";
+				break;
+			case "warning":
+				result.className = "btn btn-warning";
+				break;
+			case "info":
+				result.className = "btn btn-info";
+				break;
+			case "light":
+				result.className = "btn btn-light";
+				break;
+			case "dark":
+				result.className = "btn btn-dark";
+				break;
+			default:
+				result.className = "btn btn-primary";
+				break;
+		}
+
+        if (this.id) {
+            result.id = this.id;
+        }
+        if (this.className) {
+            result.className += ' ' + this.className;
+        }
+
+        return result.outerHTML;
+    }
+
+}

src/sass/_button.sass

@@ -0,0 +1,226 @@
+@import 'mixin'
+
+.btn-neutral
+  color: #fff
+  background-color: #000
+  border-color: #000
+  @include partialButton
+
+.btn-neutral:hover
+  color: #000
+  background-color: #fff
+  border-color: #fff
+
+.btn-neutral:focus, .btn-neutral.focus
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5)
+
+.btn-neutral.disabled, .btn-neutral:disabled
+  color: #fff
+  background-color: #000
+  border-color: #000
+
+.btn-neutral:not(:disabled):not(.disabled):active, .btn-neutral:not(:disabled):not(.disabled).active,
+.show > .btn-neutral.dropdown-toggle
+  color: #000
+  background-color: #fff
+  border-color: #fff
+
+.btn-primary
+  color: #fff
+  background-color: #007bff
+  border-color: #007bff
+  @include partialButton
+
+.btn-primary:hover
+  color: #fff
+  background-color: #0069d9
+  border-color: #0062cc
+
+.btn-primary:focus, .btn-primary.focus
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5)
+
+.btn-primary.disabled, .btn-primary:disabled
+  color: #fff
+  background-color: #007bff
+  border-color: #007bff
+
+.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
+.show > .btn-primary.dropdown-toggle
+  color: #fff
+  background-color: #0062cc
+  border-color: #005cbf
+
+.btn-secondary
+  color: #fff
+  background-color: #6c757d
+  border-color: #6c757d
+  @include partialButton
+
+.btn-secondary:hover
+  color: #fff
+  background-color: #5a6268
+  border-color: #545b62
+
+.btn-secondary:focus, .btn-secondary.focus
+  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5)
+
+.btn-secondary.disabled, .btn-secondary:disabled
+  color: #fff
+  background-color: #6c757d
+  border-color: #6c757d
+
+.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
+.show > .btn-secondary.dropdown-toggle
+  color: #fff
+  background-color: #545b62
+  border-color: #4e555b
+
+.btn-success
+  color: #fff
+  background-color: #28a745
+  border-color: #28a745
+  @include partialButton
+
+.btn-success:hover
+  color: #fff
+  background-color: #218838
+  border-color: #1e7e34
+
+.btn-success:focus, .btn-success.focus
+  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5)
+
+.btn-success.disabled, .btn-success:disabled
+  color: #fff
+  background-color: #28a745
+  border-color: #28a745
+
+.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
+.show > .btn-success.dropdown-toggle
+  color: #fff
+  background-color: #1e7e34
+  border-color: #1c7430
+
+.btn-info
+  color: #fff
+  background-color: #17a2b8
+  border-color: #17a2b8
+  @include partialButton
+
+.btn-info:hover
+  color: #fff
+  background-color: #138496
+  border-color: #117a8b
+
+.btn-info:focus, .btn-info.focus
+  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5)
+
+.btn-info.disabled, .btn-info:disabled
+  color: #fff
+  background-color: #17a2b8
+  border-color: #17a2b8
+
+.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
+.show > .btn-info.dropdown-toggle
+  color: #fff
+  background-color: #117a8b
+  border-color: #10707f
+
+.btn-warning
+  color: #212529
+  background-color: #ffc107
+  border-color: #ffc107
+  @include partialButton
+
+.btn-warning:hover
+  color: #212529
+  background-color: #e0a800
+  border-color: #d39e00
+
+.btn-warning:focus, .btn-warning.focus
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5)
+
+.btn-warning.disabled, .btn-warning:disabled
+  color: #212529
+  background-color: #ffc107
+  border-color: #ffc107
+
+.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
+.show > .btn-warning.dropdown-toggle
+  color: #212529
+  background-color: #d39e00
+  border-color: #c69500
+
+.btn-danger
+  color: #fff
+  background-color: #dc3545
+  border-color: #dc3545
+  @include partialButton
+
+.btn-danger:hover
+  color: #fff
+  background-color: #c82333
+  border-color: #bd2130
+
+.btn-danger:focus, .btn-danger.focus
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5)
+
+.btn-danger.disabled, .btn-danger:disabled
+  color: #fff
+  background-color: #dc3545
+  border-color: #dc3545
+
+.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
+.show > .btn-danger.dropdown-toggle
+  color: #fff
+  background-color: #bd2130
+  border-color: #b21f2d
+
+.btn-light
+  color: #212529
+  background-color: #f8f9fa
+  border-color: #f8f9fa
+  @include partialButton
+
+.btn-light:hover
+  color: #212529
+  background-color: #e2e6ea
+  border-color: #dae0e5
+
+.btn-light:focus, .btn-light.focus
+  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5)
+
+.btn-light.disabled, .btn-light:disabled
+  color: #212529
+  background-color: #f8f9fa
+  border-color: #f8f9fa
+
+.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
+.show > .btn-light.dropdown-toggle
+  color: #212529
+  background-color: #dae0e5
+  border-color: #d3d9df
+
+.btn-dark
+  color: #fff
+  background-color: #343a40
+  border-color: #343a40
+  @include partialButton
+
+.btn-dark:hover
+  color: #fff
+  background-color: #23272b
+  border-color: #1d2124
+
+.btn-dark:focus, .btn-dark.focus
+  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5)
+
+.btn-dark.disabled, .btn-dark:disabled
+  color: #fff
+  background-color: #343a40
+  border-color: #343a40
+
+.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
+.show > .btn-dark.dropdown-toggle
+  color: #fff
+  background-color: #1d2124
+  border-color: #171a1d

src/sass/_input.sass

@@ -0,0 +1,36 @@
+@import 'root'
+
+.text-input
+  width: 80%
+  height: 2rem
+  border: none
+  border-radius: 0.5rem
+  padding: 0.5rem
+  margin-bottom: 0.5rem
+  font-size: 1rem
+  font-family: 'Roboto', sans-serif
+  color: $seccondary-color
+  background-color: $background-color-content
+  &:focus
+    outline: none
+    background-color: $background-color-content-focus
+    color: $seccondary-color
+    box-shadow: 0px 0px 30px silver
+  &:disabled
+    background-color: $background-color-content-disabled
+    color: $seccondary-color-disabled
+    box-shadow: none
+  &:hover
+    background-color: $background-color-content-hover
+    color: $seccondary-color-hover
+    box-shadow: 0px 0px 30px silver
+  &:active
+    background-color: $background-color-content-active
+    color: $seccondary-color-active
+    box-shadow: 0px 0px 30px silver
+
+label
+  font-size: 1rem
+  font-family: 'Roboto', sans-serif
+  color: $main-font-color
+  margin-bottom: 0.5rem

src/sass/_mixin.sass

@@ -14,7 +14,6 @@
       @content
 
 @mixin partialButton
-	button
   width: 5rem !important
   height: 2rem !important
   text-align: center !important
@@ -45,6 +44,14 @@
   user-select: none
   pointer-events: none
 
+.form-group
+  margin-left: 2rem
+  margin-right: 2rem
+  margin-bottom: 0.5rem
+  flex-wrap: wrap
+  justify-content: center
+  display: flex
+
 @mixin formBasic
   display: block
   padding: 2rem

src/sass/_root.sass

@@ -1,8 +1,20 @@
 $main-font: 'Ubuntu', 'Staatliches'
 $main-font-color: white
 $main-font-color-hover: lightgrey
+$main-font-color-focus: lightgrey
+$main-font-color-disabled: lightgrey
+$main-font-color-active: lightgrey
 $main-uschrift-font: 'Ubuntu', Arial
-$seccond-color: lightgrey
+$seccond-color: #6c757d
+$seccondary-color: darkgrey
+$seccondary-color-hover: black
+$seccondary-color-focus: black
+$seccondary-color-disabled: black
+$seccondary-color-active: black
 $background-color: #77B2FF
 $background-color-content: rgb(198, 223, 255)
+$background-color-content-hover: rgb(198, 223, 255)
+$background-color-content-focus: rgb(198, 223, 255)
+$background-color-content-active: rgb(198, 223, 255)
+$background-color-content-disabled: rgb(198, 223, 255)
 $logo-image: url('../icons/icon128.png')

src/sass/app.sass

@@ -1,6 +1,8 @@
 @import 'root'
 @import 'mixin'
 @import 'content'
+@import 'button'
+@import 'input'
 
 body
   height: 30rem
@@ -8,10 +10,17 @@ body
   background-color: $background-color
   text-align: center
   margin: auto
-    padding: auto
+  padding: 1rem
   color: $main-font-color
 
-    @include partialButton
+  p
+    font-size: 1rem
+    font-weight: bold
+    margin: auto
+    padding: auto
+    color: $main-font-color
+    text-align: center
+    font-family: 'Roboto', sans-serif
 
 h1, h2
   @include noselect

src/settings.ts

@@ -1,4 +1,5 @@
-import { Session } from "./session.js";
+import { Session } from "./classes/session.js";
+import { BasicButton } from "./components/button.js";
 
 class Settings {
 
@@ -10,13 +11,15 @@ class Settings {
 
     private async renderSettings(): Promise<void> {
         const settings = <HTMLDivElement>document.getElementById('settings');
+		const saveButton = new BasicButton('success', 'Save', 'saveSettings').render();
         settings.innerHTML = `
             <div class="form-group">
+                <input type="text" class="form-control text-input" id="contentTest" placeholder="Enter content test" value="${this.session.contentTest}">
 				<label for="contentTest">Content Test</label>
-                <input type="text" class="form-control" id="contentTest" placeholder="Enter content test" value="${this.session.contentTest}">
             </div>
-            <button type="button" class="btn btn-primary" id="saveSettings">Save</button>
         `;
+		settings.innerHTML += saveButton;
+
         const saveSettings = <HTMLButtonElement>document.getElementById('saveSettings');
         saveSettings.addEventListener('click', () => {
             this.session.contentTest = (<HTMLInputElement>document.getElementById('contentTest')).value;

src/types/buttonType.ts

@@ -0,0 +1 @@
+export type customButton = "neutral" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";