studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Add counter on selected items

Browse source
This commit is contained in:
Timothée Goguely 2024-10-16 17:56:45 +02:00
parent eaf37f40d5
commit c35cf6e6aa
6 changed files with 44 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/assets/css/index.css
View file

@ -24,6 +24,7 @@
/* UTILITY CLASSES */
@import 'src/3.utilities.border.css';
@import 'src/3.utilities.colors.css';
@import 'src/3.utilities.counter.css';
@import 'src/3.utilities.flex.css';
@import 'src/3.utilities.flow.css';
@import 'src/3.utilities.icons.css';

13
src/assets/css/src/3.utilities.counter.css Normal file
View file

@ -0,0 +1,13 @@
/* COUNTER UTILITY */
.counter {
counter-reset: selected-items;
}
.counter > [aria-selected="true"]:first-of-type {
outline: 2px solid red;
}
.counter > [aria-selected="true"] {
counter-increment: selected-items;
}

17
src/components/project/client-brief/add-images-modal/AddImagesModal.vue
View file

@ -84,7 +84,6 @@ const deleteIsOpen = false;
<style>
#add-images {
--sidebar-width: 12.5rem;
counter-set: selected-images;
width: min(100vw - var(--gutter) * 2, 100rem);
height: min(100vh - var(--gutter) * 2, 60rem);
padding-top: var(--space-16);
@ -121,25 +120,9 @@ const deleteIsOpen = false;
aspect-ratio: 1/1;
}
#add-images .image {
counter-increment: selected-images;
aspect-ratio: 1/1;
border-radius: var(--rounded-xl);
}
#add-images .image::after {
content: counter(selected-images);
top: var(--space-12);
right: var(--space-12);
border-radius: 50%;
color: var(--color-white);
font-weight: 700;
background: var(--color-grey-800);
mask: none;
display: grid;
place-items: center;
text-align: center;
width: 1.5rem;
height: 1.5rem;
}
#add-images .image img {
height: 100%;
width: 100%;

5
src/components/project/client-brief/add-images-modal/ImagesResources.vue
View file

@ -1,9 +1,10 @@
<template>
<div class="auto-grid" style="--min: 15rem; --gap: 0.5rem">
<div class="auto-grid | counter" role="grid" multiselectable="true" style="--min: 15rem; --gap: 0.5rem">
<figure
v-for="image in tab.images"
class="image"
:class="{ selected: isSelected(image) }"
role="gridcell"
:aria-selected="isSelected(image)"
>
<img
:src="image.url"

5
src/components/project/client-brief/add-images-modal/MyImages.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="auto-grid" style="--min: 15rem; --gap: 0.5rem">
<div class="auto-grid | counter" role="grid" multiselectable="true" style="--min: 15rem; --gap: 0.5rem">
<FileUpload
mode="basic"
name="images[]"
@ -44,7 +44,8 @@
<figure
v-for="image in tab.images"
class="image"
:class="{ selected: isSelected(image) }"
role="gridcell"
:aria-selected="isSelected(image)"
>
<img
:src="image.url"

29
src/views/Project.vue
View file

@ -215,11 +215,7 @@ function setStepStatus(stepName) {
border-radius: var(--rounded-2xl);
overflow: hidden;
position: relative;
}
.image .tag {
position: absolute;
top: var(--space-12);
left: var(--space-12);
cursor: pointer;
}
.image.has-description::after {
content: "";
@ -235,6 +231,29 @@ function setStepStatus(stepName) {
top: 1.25rem;
right: 1.25rem;
}
.image[aria-selected="true"] {
outline: 2px solid var(--color-focus-ring);
}
.image[aria-selected="true"]::after {
content: counter(selected-items);
position: absolute;
top: var(--space-12);
right: var(--space-12);
border-radius: 50%;
color: var(--color-white);
font-weight: 700;
background: var(--color-grey-800);
display: grid;
place-items: center;
text-align: center;
width: 1.5rem;
height: 1.5rem;
}
.image .tag {
position: absolute;
top: var(--space-12);
left: var(--space-12);
}
/* Kanban */
.kanban {