mxnticek/MNotes
1
0
Fork 0
mirror of https://github.com/thejakubruzicka/MNotes.git synced 2025-07-10 22:44:05 +02:00
Code Issues Projects Releases Packages Wiki Activity

New version. Add Material UI implementation with theme customization, about dialog, and news system

Browse source
This commit is contained in:
VlastikYoutubeKo 2025-05-20 21:38:31 +02:00
parent 5bc9c9bdb1
commit 1d58835a65
190 changed files with 12296 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

66
components-wiki/figures/iconbutton/buttons.html Normal file
View file

@ -0,0 +1,66 @@
<div class="figure-wrapper">
<figure
class="types-image"
style="justify-content:center;"
title="1 - Standard Icon Button. 2 - Contained Icon Button (including filled, filled tonal, and outlined styles)"
aria-label="Side by side view of standard and contained icon buttons">
<style>
.types-image .wrapper,
.types-image .wrapper > * {
display: flex;
padding: 8px;
flex-wrap: wrap;
justify-content: center;
}
.types-image .wrapper > * {
flex-direction: column;
align-items: center;
padding-inline: 16px;
}
.types-image span {
display: inline-flex;
background-color: var(--md-sys-color-inverse-surface);
color: var(--md-sys-color-inverse-on-surface);
padding: 8px;
margin-block-start: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
justify-content: center;
align-items: center;
}
.types-image .wrapper > div > div {
display: flex;
gap: 8px;
}
</style>
<div class="wrapper">
<div>
<div>
<md-icon-button>
<md-icon>favorite</md-icon>
</md-icon-button>
<md-icon-button toggle selected>
<md-icon slot="selected" class="filled">bookmark</md-icon>
<md-icon class="filled">bookmark</md-icon>
</md-icon-button>
</div>
<span>1</span>
</div>
<div>
<div>
<md-filled-icon-button>
<md-icon>videocam</md-icon>
</md-filled-icon-button>
<md-filled-tonal-icon-button>
<md-icon>settings</md-icon>
</md-filled-tonal-icon-button>
<md-outlined-icon-button>
<md-icon>more_vert</md-icon>
</md-outlined-icon-button>
</div>
<span>2</span>
</div>
</div>
</figure>
</div>

20
components-wiki/figures/iconbutton/theming-filled-tonal.html Normal file
View file

@ -0,0 +1,20 @@
<div class="figure-wrapper">
<figure
class="styled-example tonal"
title="Filled tonal icon button theming example."
aria-label="Image of a filled tonal icon button with a different theme applied">
<style>
.styled-example.tonal {
--md-filled-tonal-icon-button-container-width: 80px;
--md-filled-tonal-icon-button-container-height: 80px;
--md-filled-tonal-icon-button-container-shape: 0px;
--md-filled-tonal-icon-button-icon-size: 40px;
--md-sys-color-secondary-container: #006A6A;
padding-block: 8px;
}
</style>
<md-filled-tonal-icon-button>
<md-icon>check</md-icon>
</md-filled-tonal-icon-button>
</figure>
</div>

20
components-wiki/figures/iconbutton/theming-filled.html Normal file
View file

@ -0,0 +1,20 @@
<div class="figure-wrapper">
<figure
class="styled-example filled red"
title="Filled icon button theming example."
aria-label="Image of a filled icon button with a different theme applied">
<style>
.styled-example.filled {
--md-filled-icon-button-container-width: 80px;
--md-filled-icon-button-container-height: 80px;
--md-filled-icon-button-icon-size: 40px;
--md-filled-icon-button-container-shape: 0px;
--md-sys-color-primary: #dc362e;
padding-block: 8px;
}
</style>
<md-filled-icon-button>
<md-icon>check</md-icon>
</md-filled-icon-button>
</figure>
</div>

21
components-wiki/figures/iconbutton/theming-outlined.html Normal file
View file

@ -0,0 +1,21 @@
<div class="figure-wrapper">
<figure
class="styled-example outlined"
title="Outlined icon button theming example."
aria-label="Image of an outlined icon button with a different theme applied">
<style>
.styled-example.outlined > * {
--md-outlined-icon-button-container-width: 80px;
--md-outlined-icon-button-container-height: 80px;
--md-outlined-icon-button-container-shape: 0px;
--md-outlined-icon-button-icon-size: 40px;
--md-outlined-icon-button-unselected-outline-width: 4px;
--md-sys-color-outline: #006A6A;
padding-block: 8px;
}
</style>
<md-outlined-icon-button>
<md-icon>check</md-icon>
</md-outlined-icon-button>
</figure>
</div>

22
components-wiki/figures/iconbutton/theming-standard.html Normal file
View file

@ -0,0 +1,22 @@
<div class="figure-wrapper">
<figure
class="styled-example standard red"
title="Standard icon button theming example."
aria-label="Image of a standard icon button with a different theme applied">
<style>
.styled-example {
background-color: white;
}
.styled-example.red {
background-color: #fff8f6;
}
.styled-example.standard {
--md-icon-button-icon-size: 32px;
--md-sys-color-on-surface-variant: #dc362e;
}
</style>
<md-icon-button>
<md-icon>check</md-icon>
</md-icon-button>
</figure>
</div>

10
components-wiki/figures/iconbutton/usage-filled-tonal.html Normal file
View file

@ -0,0 +1,10 @@
<div class="figure-wrapper">
<figure
style="justify-content:center;gap: 8px;"
title="Filled Tonal Icon Button"
aria-label="A filled tonal icon button with a check icon">
<md-filled-tonal-icon-button>
<md-icon>check</md-icon>
</md-filled-tonal-icon-button>
</figure>
</div>

10
components-wiki/figures/iconbutton/usage-filled.html Normal file
View file

@ -0,0 +1,10 @@
<div class="figure-wrapper">
<figure
style="justify-content:center;gap: 8px;"
title="Filled Icon Button"
aria-label="A circular button with a check icon">
<md-filled-icon-button>
<md-icon>check</md-icon>
</md-filled-icon-button>
</figure>
</div>

10
components-wiki/figures/iconbutton/usage-outlined.html Normal file
View file

@ -0,0 +1,10 @@
<div class="figure-wrapper">
<figure
style="justify-content:center;gap: 8px;"
title="Outlined Icon button"
aria-label="An outlined circular icon button with a check icon">
<md-outlined-icon-button>
<md-icon>check</md-icon>
</md-outlined-icon-button>
</figure>
</div>

10
components-wiki/figures/iconbutton/usage-standard.html Normal file
View file

@ -0,0 +1,10 @@
<div class="figure-wrapper">
<figure
style="justify-content:center;gap: 8px;"
title="Standard Icon Button with Check icon"
aria-label="A check icon">
<md-icon-button>
<md-icon>check</md-icon>
</md-icon-button>
</figure>
</div>

42
components-wiki/figures/iconbutton/usage-toggle.html Normal file
View file

@ -0,0 +1,42 @@
<div class="figure-wrapper">
<figure
style="gap:8px;flex-direction:column;padding-block:8px;"
aria-label="Two rows of toggling icon buttons, the top row is unselected and the bottom row is selected">
<div style="display:flex;gap:8px;">
<md-icon-button toggle>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-icon-button>
<md-filled-icon-button toggle>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-filled-icon-button>
<md-filled-tonal-icon-button toggle>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-filled-tonal-icon-button>
<md-outlined-icon-button toggle>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-outlined-icon-button>
</div>
<div style="display:flex;gap:8px;">
<md-icon-button toggle selected>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-icon-button>
<md-filled-icon-button toggle selected>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-filled-icon-button>
<md-filled-tonal-icon-button toggle selected>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-filled-tonal-icon-button>
<md-outlined-icon-button toggle selected>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-outlined-icon-button>
</div>
</figure>
</div>

19
components-wiki/figures/iconbutton/usage.html Normal file
View file

@ -0,0 +1,19 @@
<div class="figure-wrapper">
<figure
style="justify-content:center;gap: 8px;"
title="Icon buttons can be used within other components, such as a bottom app bar"
aria-label="A row of icon buttons">
<md-icon-button>
<md-icon>check</md-icon>
</md-icon-button>
<md-filled-icon-button>
<md-icon>check</md-icon>
</md-filled-icon-button>
<md-filled-tonal-icon-button>
<md-icon>check</md-icon>
</md-filled-tonal-icon-button>
<md-outlined-icon-button>
<md-icon>check</md-icon>
</md-outlined-icon-button>
</figure>
</div>