Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Visual update progressbar component

Browse Source
This commit is contained in:
ernstmul
2024-09-12 16:40:16 +02:00
parent a8c8f2badf
commit ed38bed089
3 changed files with 117 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/progressBarBig.svelte
+6 -6
View File
@@ -29,11 +29,11 @@
</p>
</div>
{#if showBar}
<ProgressBar maxSize={100} data={[]}/>
<div
class="progress-bar-container u-margin-block-start-16"
class:is-warning={progress >= 75 && progress < 100}
class:is-danger={progress >= 100}
style:--graph-size={Math.max(Math.min(progress, maximum), minimum) + '%'} />
<ProgressBar maxSize={100} data={[{size: 10, color: '#85DBD8', tooltip: {title: "First Appwrite project", label: "107GB", linkTitle: "View usage", linkPath: "/something"}},{size: 20, color: '#68A3FE59', tooltip: {title: "Second Appwrite project", label: "107GB", linkTitle: "View usage", linkPath: "/something"}},{size: 10, color: '#7C67FE59', tooltip: {title: "Third Appwrite project", label: "107GB", linkTitle: "View usage", linkPath: "/something"}}]}/>
<!-- <div-->
<!-- class="progress-bar-container u-margin-block-start-16"-->
<!-- class:is-warning={progress >= 75 && progress < 100}-->
<!-- class:is-danger={progress >= 100}-->
<!-- style:&#45;&#45;graph-size={Math.max(Math.min(progress, maximum), minimum) + '%'} />-->
{/if}
</section>
src/lib/components/progressbar/ProgressBar.svelte
+22 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import type { ProgressbarProps } from '$lib/components';
import type { ProgressbarData, ProgressbarProps } from '$lib/components';
type $$Props = ProgressbarProps;
@@ -8,9 +8,29 @@
*/
export let maxSize: $$Props['maxSize'];
/**
* The remaining value of the progressbar
*/
let remainder = $$props.data.reduce((sum:number, item:ProgressbarData) => sum - item.size, maxSize);
</script>
<section class="progressbar__container">
{#each $$props.data as item}
<div class="progressbar__content" style="background-color:{item.color}; width: {(item.size/maxSize)*100}%;">
{#if item.tooltip}
<div class="progressbar__content-tooltip">
<div>
<span class="progressbar__content-tooltip-title">{item.tooltip.title}</span>
<span class="progressbar__content-tooltip-label">{item.tooltip.label}</span>
</div>
<a href="{item.tooltip.linkPath}">{item.tooltip.linkTitle}</a>
</div>
{/if}
</div>
{/each}
{#if remainder > 0}
<div class="progressbar__content" style="width: {(remainder/maxSize)*100}%;"/>
{/if}
</section>
src/lib/components/progressbar/_progressbar.scss
+89 -3
View File
@@ -1,5 +1,13 @@
@mixin base {
:root {
--progressbar-border-radius: 0.25rem;
--progressbar-tooltip-background-color: #FFFFFF;
--progressbar-tooltip-border-color: #EDEDF0;
--progressbar-tooltip-label-color: #818186;
--progressbar-tooltip-link-color: #6C6C71;
}
:global(.theme-dark) {
--progressbar-background-color: var(--neutral-800,#2D2D31);
}
@@ -7,14 +15,92 @@
--progressbar-background-color: var(--neutral-40, #F4F4F7);
}
.progressbar {
&__container {
height: 0.5rem;
background-color: var(--progressbar-background-color);
border-radius: 0.25rem;
border-radius: var(--progressbar-border-radius);
display: flex;
flex-direction: row;
gap: 2px;
}
&__content {
height: 100%;
display: flex;
justify-content: center;
&::before {
content: "";
height: 2.5rem;
margin-top: -1.25rem;
width: 100%;
}
&:first-child {
border-top-left-radius: var(--progressbar-border-radius);
border-bottom-left-radius: var(--progressbar-border-radius);
}
&:last-child {
border-top-right-radius: var(--progressbar-border-radius);
border-bottom-right-radius: var(--progressbar-border-radius);
}
&-tooltip {
display: none;
position: absolute;
background-color: var(--progressbar-tooltip-background-color);
padding: 0.75rem;
margin-top: -5.25rem;
border: 1px solid var(--progressbar-tooltip-border-color);
border-radius: 0.5rem;
flex-direction: column;
gap: 0.25rem;
&::before, &::after {
top: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&::after {
border-top-color: var(--progressbar-tooltip-background-color);
border-width: 10px;
margin-left: -10px;
}
&::before {
border-top-color: var(--progressbar-tooltip-border-color);;
border-width: 11px;
margin-left: -11px;
}
&:hover {
display: flex;
}
&-title {
font-weight: 600;
margin-right: 0.5rem;
}
&-label {
color: var(--progressbar-tooltip-label-color);
}
a{
color: var(--progressbar-tooltip-link-color);
text-decoration: underline;
}
}
&:hover {
.progressbar__content-tooltip {
display: flex;
}
}
}
}