From 1d3600de32bc7de67a82b4e549f68e63fb05386f Mon Sep 17 00:00:00 2001 From: Jonas Pfalzgraf Date: Fri, 19 Aug 2022 01:02:43 +0200 Subject: [PATCH 1/3] improvements --- .editorconfig | 35 ++++++ public/options.html | 2 +- src/components/button.ts | 63 ++++++++++ src/sass/_button.sass | 226 ++++++++++++++++++++++++++++++++++ src/sass/_input.sass | 40 ++++++ src/sass/_mixin.sass | 133 ++++++++++---------- src/sass/_root.sass | 14 ++- src/sass/app.sass | 49 +++++--- src/{classes => }/settings.ts | 13 +- src/types/buttonType.ts | 1 + 10 files changed, 486 insertions(+), 90 deletions(-) create mode 100644 .editorconfig create mode 100644 src/components/button.ts create mode 100644 src/sass/_button.sass create mode 100644 src/sass/_input.sass rename src/{classes => }/settings.ts (60%) create mode 100644 src/types/buttonType.ts diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..5c6f66e --- /dev/null +++ b/.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 diff --git a/public/options.html b/public/options.html index 1cd3cda..161fb1a 100644 --- a/public/options.html +++ b/public/options.html @@ -20,7 +20,7 @@ diff --git a/src/components/button.ts b/src/components/button.ts new file mode 100644 index 0000000..33f8a28 --- /dev/null +++ b/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; + } + +} diff --git a/src/sass/_button.sass b/src/sass/_button.sass new file mode 100644 index 0000000..de19aab --- /dev/null +++ b/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 diff --git a/src/sass/_input.sass b/src/sass/_input.sass new file mode 100644 index 0000000..7752c9b --- /dev/null +++ b/src/sass/_input.sass @@ -0,0 +1,40 @@ +@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 + &:hover + color: $main-font-color-hover + &:active + color: $main-font-color-active diff --git a/src/sass/_mixin.sass b/src/sass/_mixin.sass index 41422c9..ddd1d41 100644 --- a/src/sass/_mixin.sass +++ b/src/sass/_mixin.sass @@ -1,86 +1,93 @@ @import "root" @mixin respond-to($media) - @if $media == handhelds - @media only screen and (max-device-width: 40rem) - @content + @if $media == handhelds + @media only screen and (max-device-width: 40rem) + @content - @else if $media == medium-screens - @media only screen and (min-device-width: 40rem) - @content + @else if $media == medium-screens + @media only screen and (min-device-width: 40rem) + @content - @else if $media == wide-screens - @media only screen and (min-width: 1000px) - @content + @else if $media == wide-screens + @media only screen and (min-width: 1000px) + @content @mixin partialButton - button - width: 5rem !important - height: 2rem !important - text-align: center !important - margin: 0.5rem !important - border-color: $seccond-color !important - border-radius: 0.5rem !important + width: 5rem !important + height: 2rem !important + text-align: center !important + margin: 0.5rem !important + border-color: $seccond-color !important + border-radius: 0.5rem !important - @include respond-to(handhelds) - font-size: 3rem + @include respond-to(handhelds) + font-size: 3rem - @include respond-to(medium-screens) - font-size: 1.5rem + @include respond-to(medium-screens) + font-size: 1.5rem @mixin hoverMe - &:hover - button - color: grey !important + &:hover + button + color: grey !important @mixin shadow - box-shadow: 0px 0px 30px silver + box-shadow: 0px 0px 30px silver @mixin noselect - -webkit-touch-callout: none - -webkit-user-select: none - -khtml-user-select: none - -moz-user-select: none - -ms-user-select: none - user-select: none - pointer-events: none + -webkit-touch-callout: none + -webkit-user-select: none + -khtml-user-select: none + -moz-user-select: none + -ms-user-select: none + 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 - background: $background-color-content - border-radius: 0.7rem - min-height: 20rem - margin: auto - margin-top: 2rem - margin-bottom: 2rem - @include shadow + display: block + padding: 2rem + background: $background-color-content + border-radius: 0.7rem + min-height: 20rem + margin: auto + margin-top: 2rem + margin-bottom: 2rem + @include shadow - @include respond-to(handhelds) - font-size: 2.5em - margin-left: -0.8em - margin-right: -0.8em - border-radius: 0 + @include respond-to(handhelds) + font-size: 2.5em + margin-left: -0.8em + margin-right: -0.8em + border-radius: 0 - @include respond-to(medium-screens) - max-width: 40rem + @include respond-to(medium-screens) + max-width: 40rem - @include respond-to(wide-screens) - max-width: 40rem + @include respond-to(wide-screens) + max-width: 40rem - input - @include respond-to(handhelds) - font-size: 3rem - border-radius: 0.5rem + input + @include respond-to(handhelds) + font-size: 3rem + border-radius: 0.5rem - .check - position: static - @include respond-to(handhelds) - width: 2rem !important - height: 2rem !important + .check + position: static + @include respond-to(handhelds) + width: 2rem !important + height: 2rem !important - button - @include respond-to(handhelds) - font-size: 3rem - padding: 1rem - border-radius: 1rem + button + @include respond-to(handhelds) + font-size: 3rem + padding: 1rem + border-radius: 1rem diff --git a/src/sass/_root.sass b/src/sass/_root.sass index e3babc1..b380612 100644 --- a/src/sass/_root.sass +++ b/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') diff --git a/src/sass/app.sass b/src/sass/app.sass index 0b05a95..4c0cfae 100644 --- a/src/sass/app.sass +++ b/src/sass/app.sass @@ -1,41 +1,50 @@ @import 'root' @import 'mixin' @import 'content' +@import 'button' +@import 'input' body - height: 30rem - width: 30rem - background-color: $background-color - text-align: center + height: 30rem + width: 30rem + background-color: $background-color + text-align: center + margin: auto + padding: 1rem + color: $main-font-color + + p + font-size: 1rem + font-weight: bold margin: auto padding: auto color: $main-font-color - - @include partialButton + text-align: center + font-family: 'Roboto', sans-serif h1, h2 - @include noselect + @include noselect form - @include formBasic + @include formBasic .logo - width: 5rem - height: auto - padding-top: 2rem - @include noselect + width: 5rem + height: auto + padding-top: 2rem + @include noselect svg - @include noselect + @include noselect table - color: $main-font-color !important - - th - @include noselect + color: $main-font-color !important + + th + @include noselect a - color: $main-font-color + color: $main-font-color - &:hover - color: $background-color-content \ No newline at end of file + &:hover + color: $background-color-content diff --git a/src/classes/settings.ts b/src/settings.ts similarity index 60% rename from src/classes/settings.ts rename to src/settings.ts index 772b290..8e0af66 100644 --- a/src/classes/settings.ts +++ b/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 { const settings = document.getElementById('settings'); + const saveButton = new BasicButton('success', 'Save', 'saveSettings').render(); settings.innerHTML = `
- - + +
- `; + settings.innerHTML += saveButton; + const saveSettings = document.getElementById('saveSettings'); saveSettings.addEventListener('click', () => { this.session.contentTest = (document.getElementById('contentTest')).value; @@ -26,4 +29,4 @@ class Settings { } } -new Settings(); \ No newline at end of file +new Settings(); diff --git a/src/types/buttonType.ts b/src/types/buttonType.ts new file mode 100644 index 0000000..660d7f9 --- /dev/null +++ b/src/types/buttonType.ts @@ -0,0 +1 @@ +export type customButton = "neutral" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark"; \ No newline at end of file From b32594b1d1f071c0ffac046224cbe1ae33a9ed1c Mon Sep 17 00:00:00 2001 From: Jonas Pfalzgraf Date: Fri, 19 Aug 2022 01:12:34 +0200 Subject: [PATCH 2/3] label changes --- src/sass/_input.sass | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/sass/_input.sass b/src/sass/_input.sass index 7752c9b..4e4c4e8 100644 --- a/src/sass/_input.sass +++ b/src/sass/_input.sass @@ -34,7 +34,3 @@ label font-family: 'Roboto', sans-serif color: $main-font-color margin-bottom: 0.5rem - &:hover - color: $main-font-color-hover - &:active - color: $main-font-color-active From f754b0a5ed66657d6c802bafd082a30eeb9ac801 Mon Sep 17 00:00:00 2001 From: Jonas Pfalzgraf Date: Fri, 19 Aug 2022 01:15:04 +0200 Subject: [PATCH 3/3] codeQL fixes --- .github/workflows/codeql-analysis.yml | 95 +++++++++++++-------------- 1 file changed, 47 insertions(+), 48 deletions(-) diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 968170e..bfcc659 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -12,61 +12,60 @@ name: "CodeQL" on: - push: - branches: [ "main" ] - pull_request: - # The branches below must be a subset of the branches above - branches: [ "main" ] - schedule: - - cron: '37 13 * * 4' + push: + branches: ["main"] + pull_request: + # The branches below must be a subset of the branches above + branches: ["main"] + schedule: + - cron: "37 13 * * 4" jobs: - analyze: - name: Analyze - runs-on: ubuntu-latest - permissions: - actions: read - contents: read - security-events: write + analyze: + name: Analyze + runs-on: ubuntu-latest + permissions: + actions: read + contents: read + security-events: write - strategy: - fail-fast: false - matrix: - 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 + strategy: + fail-fast: false + matrix: + 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 - steps: - - name: Checkout repository - uses: actions/checkout@v3 + steps: + - name: Checkout repository + uses: actions/checkout@v3 - # Initializes the CodeQL tools for scanning. - - name: Initialize CodeQL - uses: github/codeql-action/init@v2 - with: - languages: ${{ matrix.language }} - # If you wish to specify custom queries, you can do so here or in a config file. - # By default, queries listed here will override any specified in a config file. - # Prefix the list here with "+" to use these queries and those in the config file. - - # 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 + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v2 + with: + languages: ${{ matrix.language }} + # If you wish to specify custom queries, you can do so here or in a config file. + # By default, queries listed here will override any specified in a config file. + # Prefix the list here with "+" to use these queries and those in the config file. - - # 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 - uses: github/codeql-action/autobuild@v2 + # 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 - # ℹī¸ Command-line programs to run using the OS shell. - # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun + # 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 + uses: github/codeql-action/autobuild@v2 - # If the Autobuild fails above, remove it and uncomment the following three lines. - # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance. + # ℹī¸ Command-line programs to run using the OS shell. + # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun - # - run: | - # echo "Run, Build Application using script" - # ./location_of_script_within_repo/buildscript.sh + # If the Autobuild fails above, remove it and uncomment the following three lines. + # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance. - - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v2 + # - run: | + # echo "Run, Build Application using script" + # ./location_of_script_within_repo/buildscript.sh + + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v2