mxnticek/MNotes
1
0
Fork 0
mirror of https://github.com/thejakubruzicka/MNotes.git synced 2025-07-11 06:54:04 +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

25
components-wiki/figures/fab/extended-fabs.html Normal file
View file

@ -0,0 +1,25 @@
<div class="figure-wrapper">
<figure
class="types-image"
style="justify-content:center;"
title="There are two types of extended FABs with and without icon"
aria-label="2 examples of extended FABs">
<div class="wrapper">
<div>
<div class="fab-wrapper">
<md-fab label="navigate" variant="primary">
<md-icon slot="icon">navigation</md-icon>
</md-fab>
</div>
<span>1</span>
</div>
<div>
<div class="fab-wrapper">
<md-fab variant="surface" label="reroute">
</md-fab>
</div>
<span>2</span>
</div>
</div>
</figure>
</div>

65
components-wiki/figures/fab/fabs.html Normal file
View file

@ -0,0 +1,65 @@
<div class="figure-wrapper">
<figure
class="types-image"
style="justify-content:center;"
title="There are three sizes of floating action buttons: FAB, small FAB, and large FAB"
aria-label="The 3 sizes of FAB">
<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 .fab-wrapper {
height: 96px;
display: flex;
align-items: center;
}
</style>
<div class="wrapper">
<div>
<div class="fab-wrapper">
<md-fab variant="primary" aria-label="Accessibility">
<md-icon slot="icon">accessible_forward</md-icon>
</md-fab>
</div>
<span>1</span>
</div>
<div>
<div class="fab-wrapper">
<md-fab variant="tertiary" size="small" aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</div>
<span>2</span>
</div>
<div>
<div class="fab-wrapper">
<md-fab size="large" aria-label="Color Palette">
<md-icon slot="icon">palette</md-icon>
</md-fab>
</div>
<span>3</span>
</div>
</div>
</figure>
</div>

33
components-wiki/figures/fab/theming-branded.html Normal file
View file

@ -0,0 +1,33 @@
<div class="figure-wrapper">
<figure
class="styled-example branded"
aria-label="Image of two branded fabs, one regular, one extended with the visible label Add with a different theme applied"
style="padding-block: 16px;gap: 16px;display: flex;">
<style>
.styled-example.branded {
--md-sys-color-on-surface: #161d1d;
--md-fab-branded-label-text-font: system-ui;
--md-fab-branded-icon-size: 48px;
--md-fab-branded-container-shape: 0px;
}
</style>
<md-branded-fab size="small" aria-label="Add">
<svg slot="icon" viewBox="0 0 36 36">
<path fill="#34A853" d="M16 16v14h4V20z"></path>
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
<path fill="none" d="M0 0h36v36H0z"></path>
</svg>
</md-branded-fab>
<md-branded-fab size="small" label="Add">
<svg slot="icon" viewBox="0 0 36 36">
<path fill="#34A853" d="M16 16v14h4V20z"></path>
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
<path fill="none" d="M0 0h36v36H0z"></path>
</svg>
</md-branded-fab>
</figure>
</div>

17
components-wiki/figures/fab/theming-extended.html Normal file
View file

@ -0,0 +1,17 @@
<div class="figure-wrapper">
<figure
class="styled-example extended"
aria-label="Image of an extended FAB with a different theme applied"
style="padding-block: 16px;">
<style>
.styled-example.extended {
--md-fab-label-text-font: system-ui;
--md-fab-icon-size: 36px;
--md-fab-container-shape: 0px;
}
</style>
<md-fab label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</figure>
</div>

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

@ -0,0 +1,21 @@
<div class="figure-wrapper">
<figure
class="styled-example fab"
aria-label="Image of a fab with a different theme applied"
style="padding-block: 16px;">
<style>
.styled-example {
--md-sys-color-surface-container-high: #e3e9e9;
--md-sys-color-primary: #006a6a;
background-color: #f4fbfa;
}
.styled-example.fab {
--md-fab-icon-size: 36px;
--md-fab-container-shape: 0px;
}
</style>
<md-fab aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</figure>
</div>

15
components-wiki/figures/fab/usage-branded-extended.html Normal file
View file

@ -0,0 +1,15 @@
<div class="figure-wrapper">
<figure
aria-label="An extended branded fab with a google-colored plus icon and the visible text Add"
style="padding-block: 16px;">
<md-branded-fab label="Add">
<svg slot="icon" viewBox="0 0 36 36">
<path fill="#34A853" d="M16 16v14h4V20z"></path>
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
<path fill="none" d="M0 0h36v36H0z"></path>
</svg>
</md-branded-fab>
</figure>
</div>

25
components-wiki/figures/fab/usage-branded-sizes.html Normal file
View file

@ -0,0 +1,25 @@
<div class="figure-wrapper">
<figure
aria-label="Two branded FABs next to each other with a google-branded plus icon. A medium sized one and a large one."
style="padding-block: 16px; gap: 16px; display: flex"
>
<md-branded-fab aria-label="Add">
<svg slot="icon" viewBox="0 0 36 36">
<path fill="#34A853" d="M16 16v14h4V20z"></path>
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
<path fill="none" d="M0 0h36v36H0z"></path>
</svg>
</md-branded-fab>
<md-branded-fab size="large" aria-label="Add">
<svg slot="icon" viewBox="0 0 36 36">
<path fill="#34A853" d="M16 16v14h4V20z"></path>
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
<path fill="none" d="M0 0h36v36H0z"></path>
</svg>
</md-branded-fab>
</figure>
</div>

15
components-wiki/figures/fab/usage-branded.html Normal file
View file

@ -0,0 +1,15 @@
<div class="figure-wrapper">
<figure
aria-label="A branded FAB with a google-colored plus icon."
style="padding-block: 16px;">
<md-branded-fab size="small" aria-label="Add">
<svg slot="icon" viewBox="0 0 36 36">
<path fill="#34A853" d="M16 16v14h4V20z"></path>
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
<path fill="none" d="M0 0h36v36H0z"></path>
</svg>
</md-branded-fab>
</figure>
</div>

15
components-wiki/figures/fab/usage-color.html Normal file
View file

@ -0,0 +1,15 @@
<div class="figure-wrapper">
<figure
aria-label="Three fabs with edit icons next to each other but the first is primary colored, second is secondary, and the last is tertiary colored."
style="padding-block: 16px;gap: 16px;display: flex;">
<md-fab variant="primary" aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab variant="secondary" aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab variant="tertiary" aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</figure>
</div>

9
components-wiki/figures/fab/usage-extended.html Normal file
View file

@ -0,0 +1,9 @@
<div class="figure-wrapper">
<figure
aria-label="An extended FAB with an edit icon and the visible text edit"
style="padding-block: 16px;">
<md-fab label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</figure>
</div>

9
components-wiki/figures/fab/usage-fab.html Normal file
View file

@ -0,0 +1,9 @@
<div class="figure-wrapper">
<figure
aria-label="A standard surface fab"
style="padding-block: 16px;">
<md-fab aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</figure>
</div>

9
components-wiki/figures/fab/usage-lowered.html Normal file
View file

@ -0,0 +1,9 @@
<div class="figure-wrapper">
<figure
aria-label="A standard fab with an edit icon and lowered in elevation"
style="padding-block: 16px;">
<md-fab lowered aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</figure>
</div>

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

@ -0,0 +1,19 @@
<div class="figure-wrapper">
<figure
aria-label="Four surface fabs side by side with edit icons of visual size size small, small, medium, and large"
style="padding-block: 16px; gap: 16px; display: flex"
>
<md-fab size="small" touch-target="none" aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab size="small" aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab size="large" aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</figure>
</div>

7
components-wiki/figures/fab/usage-without-icon.html Normal file
View file

@ -0,0 +1,7 @@
<div class="figure-wrapper">
<figure
aria-label="An extended FAB with a visible label saying reroute"
style="padding-block: 16px;">
<md-fab label="Reroute"></md-fab>
</figure>
</div>