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

fix: last minute fixes

Browse Source
This commit is contained in:
Torsten Dittmann
2024-09-16 19:12:10 +02:00
parent 27ace6524b
commit e05cff8f7f
5 changed files with 69 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/progressbar/ProgressBar.svelte
+65 -22
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { tooltip } from '$lib/actions/tooltip';
import type { ProgressbarData, ProgressbarProps } from '$lib/components';
type $$Props = ProgressbarProps;
@@ -8,42 +9,84 @@
*/
export let maxSize: $$Props['maxSize'];
/**
* The data for the progressbar
*/
export let data: $$Props['data'];
/**
* The remaining value of the progressbar
*/
let remainder = $$props.data.reduce(
(sum: number, item: ProgressbarData) => sum - item.size,
maxSize
);
$: remainder = 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"
class:progressbar__content-tooltip--has-link={item.tooltip.linkPath &&
item.tooltip.linkTitle}>
<div>
<span class="progressbar__content-tooltip-title">{item.tooltip.title}</span>
<span class="progressbar__content-tooltip-label">{item.tooltip.label}</span>
</div>
{#if item.tooltip.linkPath && item.tooltip.linkTitle}
<a href={item.tooltip.linkPath}>{item.tooltip.linkTitle}</a>
{/if}
</div>
{/if}
style:background-color={item.color}
style:width={`${(item.size / maxSize) * 100}%`}
use:tooltip={{
disabled: !item.tooltip,
allowHTML: true,
content: `<span class="u-bold">${item.tooltip.title}</span> ${item.tooltip.label}`
}}>
</div>
{/each}
{#if remainder > 0}
<div class="progressbar__content" style="width: {(remainder / maxSize) * 100}%;" />
<div class="progressbar__content" style:width={`${(remainder / maxSize) * 100}%`} />
{/if}
</section>
<style lang="scss">
@use './progressbar';
@include progressbar.base;
:root {
--progressbar-border-radius: 0.25rem;
--progressbar-tooltip-label-color: #818186;
--progressbar-tooltip-link-color: #6c6c71;
}
:global(.theme-dark) {
--progressbar-background-color: var(--neutral-800, #2d2d31);
--progressbar-tooltip-background-color: var(--neutral-800, #2d2d31);
--progressbar-tooltip-border-color: var(--neutral-80, #424248);
}
:global(.theme-light) {
--progressbar-background-color: var(--neutral-40, #f4f4f7);
--progressbar-tooltip-background-color: #ffffff;
--progressbar-tooltip-border-color: #ededf0;
}
.progressbar {
&__container {
height: 0.5rem;
background-color: var(--progressbar-background-color);
border-radius: var(--progressbar-border-radius);
display: flex;
flex-direction: row;
gap: 2px;
}
&__content {
height: 100%;
min-width: 4px;
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);
}
}
}
</style>
src/lib/components/progressbar/_progressbar.scss
-111
View File
@@ -1,111 +0,0 @@
@mixin base {
:root {
--progressbar-border-radius: 0.25rem;
--progressbar-tooltip-label-color: #818186;
--progressbar-tooltip-link-color: #6c6c71;
}
:global(.theme-dark) {
--progressbar-background-color: var(--neutral-800, #2d2d31);
--progressbar-tooltip-background-color: var(--neutral-800, #2d2d31);
--progressbar-tooltip-border-color: var(--neutral-80, #424248);
}
:global(.theme-light) {
--progressbar-background-color: var(--neutral-40, #f4f4f7);
--progressbar-tooltip-background-color: #ffffff;
--progressbar-tooltip-border-color: #ededf0;
}
.progressbar {
&__container {
height: 0.5rem;
background-color: var(--progressbar-background-color);
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: -3.75rem;
border: 1px solid var(--progressbar-tooltip-border-color);
border-radius: 0.5rem;
flex-direction: column;
gap: 0.25rem;
&--has-link {
margin-top: -5.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;
}
}
}
}
}
src/lib/components/progressbar/index.ts
+2 -2
View File
@@ -4,8 +4,8 @@ export type ProgressbarData = {
tooltip?: {
title: string;
label: string;
linkTitle?: string;
linkPath?: string;
// linkTitle?: string;
// linkPath?: string;
};
};
src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
+1 -1
View File
@@ -287,7 +287,7 @@
size: bytesToSize(data.organizationUsage.filesStorageTotal, 'GB'),
color: '#85DBD8',
tooltip: {
title: 'File storage total',
title: 'File storage',
label: `${Math.round(bytesToSize(data.organizationUsage.filesStorageTotal, 'GB') * 100) / 100}GB`
}
},
src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
+1 -1
View File
@@ -279,7 +279,7 @@
size: bytesToSize(data.usage.filesStorageTotal, 'MB'),
color: '#85DBD8',
tooltip: {
title: 'File storage total',
title: 'File storage',
label: `${Math.round(bytesToSize(data.usage.filesStorageTotal, 'MB') * 100) / 100}MB`
}
},