mirror of
https://github.com/JosunLP/BrowserExtensionTemplate.git
synced 2025-06-21 10:01:08 +00:00
improvements
This commit is contained in:
Jonas Pfalzgraf
parent
9145b60898
commit
1d3600de32
10 changed files with 486 additions and 90 deletions
35
.editorconfig
Normal file
35
.editorconfig
Normal file
|
|
@ -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
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
<footer>
|
||||||
<script type="module" src="./js/classes/settings.js"></script>
|
<script type="module" src="./js/settings.js"></script>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
63
src/components/button.ts
Normal file
63
src/components/button.ts
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
226
src/sass/_button.sass
Normal file
226
src/sass/_button.sass
Normal file
|
|
@ -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
|
||||||
40
src/sass/_input.sass
Normal file
40
src/sass/_input.sass
Normal file
|
|
@ -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
|
||||||
|
|
@ -1,86 +1,93 @@
|
||||||
@import "root"
|
@import "root"
|
||||||
|
|
||||||
@mixin respond-to($media)
|
@mixin respond-to($media)
|
||||||
@if $media == handhelds
|
@if $media == handhelds
|
||||||
@media only screen and (max-device-width: 40rem)
|
@media only screen and (max-device-width: 40rem)
|
||||||
@content
|
@content
|
||||||
|
|
||||||
@else if $media == medium-screens
|
@else if $media == medium-screens
|
||||||
@media only screen and (min-device-width: 40rem)
|
@media only screen and (min-device-width: 40rem)
|
||||||
@content
|
@content
|
||||||
|
|
||||||
@else if $media == wide-screens
|
@else if $media == wide-screens
|
||||||
@media only screen and (min-width: 1000px)
|
@media only screen and (min-width: 1000px)
|
||||||
@content
|
@content
|
||||||
|
|
||||||
@mixin partialButton
|
@mixin partialButton
|
||||||
button
|
width: 5rem !important
|
||||||
width: 5rem !important
|
height: 2rem !important
|
||||||
height: 2rem !important
|
text-align: center !important
|
||||||
text-align: center !important
|
margin: 0.5rem !important
|
||||||
margin: 0.5rem !important
|
border-color: $seccond-color !important
|
||||||
border-color: $seccond-color !important
|
border-radius: 0.5rem !important
|
||||||
border-radius: 0.5rem !important
|
|
||||||
|
|
||||||
@include respond-to(handhelds)
|
@include respond-to(handhelds)
|
||||||
font-size: 3rem
|
font-size: 3rem
|
||||||
|
|
||||||
@include respond-to(medium-screens)
|
@include respond-to(medium-screens)
|
||||||
font-size: 1.5rem
|
font-size: 1.5rem
|
||||||
|
|
||||||
@mixin hoverMe
|
@mixin hoverMe
|
||||||
&:hover
|
&:hover
|
||||||
button
|
button
|
||||||
color: grey !important
|
color: grey !important
|
||||||
|
|
||||||
@mixin shadow
|
@mixin shadow
|
||||||
box-shadow: 0px 0px 30px silver
|
box-shadow: 0px 0px 30px silver
|
||||||
|
|
||||||
@mixin noselect
|
@mixin noselect
|
||||||
-webkit-touch-callout: none
|
-webkit-touch-callout: none
|
||||||
-webkit-user-select: none
|
-webkit-user-select: none
|
||||||
-khtml-user-select: none
|
-khtml-user-select: none
|
||||||
-moz-user-select: none
|
-moz-user-select: none
|
||||||
-ms-user-select: none
|
-ms-user-select: none
|
||||||
user-select: none
|
user-select: none
|
||||||
pointer-events: 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
|
@mixin formBasic
|
||||||
display: block
|
display: block
|
||||||
padding: 2rem
|
padding: 2rem
|
||||||
background: $background-color-content
|
background: $background-color-content
|
||||||
border-radius: 0.7rem
|
border-radius: 0.7rem
|
||||||
min-height: 20rem
|
min-height: 20rem
|
||||||
margin: auto
|
margin: auto
|
||||||
margin-top: 2rem
|
margin-top: 2rem
|
||||||
margin-bottom: 2rem
|
margin-bottom: 2rem
|
||||||
@include shadow
|
@include shadow
|
||||||
|
|
||||||
@include respond-to(handhelds)
|
@include respond-to(handhelds)
|
||||||
font-size: 2.5em
|
font-size: 2.5em
|
||||||
margin-left: -0.8em
|
margin-left: -0.8em
|
||||||
margin-right: -0.8em
|
margin-right: -0.8em
|
||||||
border-radius: 0
|
border-radius: 0
|
||||||
|
|
||||||
@include respond-to(medium-screens)
|
@include respond-to(medium-screens)
|
||||||
max-width: 40rem
|
max-width: 40rem
|
||||||
|
|
||||||
@include respond-to(wide-screens)
|
@include respond-to(wide-screens)
|
||||||
max-width: 40rem
|
max-width: 40rem
|
||||||
|
|
||||||
input
|
input
|
||||||
@include respond-to(handhelds)
|
@include respond-to(handhelds)
|
||||||
font-size: 3rem
|
font-size: 3rem
|
||||||
border-radius: 0.5rem
|
border-radius: 0.5rem
|
||||||
|
|
||||||
.check
|
.check
|
||||||
position: static
|
position: static
|
||||||
@include respond-to(handhelds)
|
@include respond-to(handhelds)
|
||||||
width: 2rem !important
|
width: 2rem !important
|
||||||
height: 2rem !important
|
height: 2rem !important
|
||||||
|
|
||||||
button
|
button
|
||||||
@include respond-to(handhelds)
|
@include respond-to(handhelds)
|
||||||
font-size: 3rem
|
font-size: 3rem
|
||||||
padding: 1rem
|
padding: 1rem
|
||||||
border-radius: 1rem
|
border-radius: 1rem
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,20 @@
|
||||||
$main-font: 'Ubuntu', 'Staatliches'
|
$main-font: 'Ubuntu', 'Staatliches'
|
||||||
$main-font-color: white
|
$main-font-color: white
|
||||||
$main-font-color-hover: lightgrey
|
$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
|
$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: #77B2FF
|
||||||
$background-color-content: rgb(198, 223, 255)
|
$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')
|
$logo-image: url('../icons/icon128.png')
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,50 @@
|
||||||
@import 'root'
|
@import 'root'
|
||||||
@import 'mixin'
|
@import 'mixin'
|
||||||
@import 'content'
|
@import 'content'
|
||||||
|
@import 'button'
|
||||||
|
@import 'input'
|
||||||
|
|
||||||
body
|
body
|
||||||
height: 30rem
|
height: 30rem
|
||||||
width: 30rem
|
width: 30rem
|
||||||
background-color: $background-color
|
background-color: $background-color
|
||||||
text-align: center
|
text-align: center
|
||||||
|
margin: auto
|
||||||
|
padding: 1rem
|
||||||
|
color: $main-font-color
|
||||||
|
|
||||||
|
p
|
||||||
|
font-size: 1rem
|
||||||
|
font-weight: bold
|
||||||
margin: auto
|
margin: auto
|
||||||
padding: auto
|
padding: auto
|
||||||
color: $main-font-color
|
color: $main-font-color
|
||||||
|
text-align: center
|
||||||
@include partialButton
|
font-family: 'Roboto', sans-serif
|
||||||
|
|
||||||
h1, h2
|
h1, h2
|
||||||
@include noselect
|
@include noselect
|
||||||
|
|
||||||
form
|
form
|
||||||
@include formBasic
|
@include formBasic
|
||||||
|
|
||||||
.logo
|
.logo
|
||||||
width: 5rem
|
width: 5rem
|
||||||
height: auto
|
height: auto
|
||||||
padding-top: 2rem
|
padding-top: 2rem
|
||||||
@include noselect
|
@include noselect
|
||||||
|
|
||||||
svg
|
svg
|
||||||
@include noselect
|
@include noselect
|
||||||
|
|
||||||
table
|
table
|
||||||
color: $main-font-color !important
|
color: $main-font-color !important
|
||||||
|
|
||||||
th
|
th
|
||||||
@include noselect
|
@include noselect
|
||||||
|
|
||||||
a
|
a
|
||||||
color: $main-font-color
|
color: $main-font-color
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color: $background-color-content
|
color: $background-color-content
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import { Session } from "./session.js";
|
import { Session } from "./classes/session.js";
|
||||||
|
import { BasicButton } from "./components/button.js";
|
||||||
|
|
||||||
class Settings {
|
class Settings {
|
||||||
|
|
||||||
|
|
@ -10,13 +11,15 @@ class Settings {
|
||||||
|
|
||||||
private async renderSettings(): Promise<void> {
|
private async renderSettings(): Promise<void> {
|
||||||
const settings = <HTMLDivElement>document.getElementById('settings');
|
const settings = <HTMLDivElement>document.getElementById('settings');
|
||||||
|
const saveButton = new BasicButton('success', 'Save', 'saveSettings').render();
|
||||||
settings.innerHTML = `
|
settings.innerHTML = `
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="contentTest">Content Test</label>
|
<input type="text" class="form-control text-input" id="contentTest" placeholder="Enter content test" value="${this.session.contentTest}">
|
||||||
<input type="text" class="form-control" id="contentTest" placeholder="Enter content test" value="${this.session.contentTest}">
|
<label for="contentTest">Content Test</label>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-primary" id="saveSettings">Save</button>
|
|
||||||
`;
|
`;
|
||||||
|
settings.innerHTML += saveButton;
|
||||||
|
|
||||||
const saveSettings = <HTMLButtonElement>document.getElementById('saveSettings');
|
const saveSettings = <HTMLButtonElement>document.getElementById('saveSettings');
|
||||||
saveSettings.addEventListener('click', () => {
|
saveSettings.addEventListener('click', () => {
|
||||||
this.session.contentTest = (<HTMLInputElement>document.getElementById('contentTest')).value;
|
this.session.contentTest = (<HTMLInputElement>document.getElementById('contentTest')).value;
|
||||||
|
|
@ -26,4 +29,4 @@ class Settings {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
new Settings();
|
new Settings();
|
||||||
1
src/types/buttonType.ts
Normal file
1
src/types/buttonType.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export type customButton = "neutral" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
|
||||||
Loading…
Add table
Reference in a new issue