Skip to content

Commit

Permalink
[MS] Restyle SidebarMenuPage
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabienSvtr
fabienSvtr committed Dec 3, 2024
1 parent e0fb3e2 commit c360fad
Show file tree
Hide file tree
Showing 6 changed files with 232 additions and 236 deletions.
120 changes: 120 additions & 0 deletions client/src/components/sidebar/SidebarMenuList.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->

<template>
<ion-list class="list-sidebar favorites">
<ion-header
lines="none"
class="list-sidebar-header title-h5"
:class="isContentVisible ? 'open' : 'close'"
@click="toggleContent"
>
<div class="list-sidebar-header-title">
<ion-icon
class="list-sidebar-header-title__icon"
:icon="icon"
/>
<ion-text class="list-sidebar-header-title__text">
{{ $msTranslate(title) }}
</ion-text>
</div>
<ion-icon
class="list-sidebar-toggle-icon"
:icon="isContentVisible ? remove : add"
/>
</ion-header>
<div
v-if="isContentVisible"
class="list-sidebar-content"
>
<slot />
</div>
</ion-list>
</template>

<script setup lang="ts">
import { IonList, IonHeader, IonIcon, IonText } from '@ionic/vue';
import { Translatable } from 'megashark-lib';
import { ref } from 'vue';
import { add, remove } from 'ionicons/icons';

const isContentVisible = ref(true);

defineProps<{
title: Translatable;
icon: string;
}>();

function toggleContent(): void {
isContentVisible.value = !isContentVisible.value;
}
</script>

<style scoped lang="scss">
.list-sidebar {
display: flex;
flex-direction: column;
flex: 1;
gap: 0.5rem;
margin-bottom: 1rem;
padding: 0.5rem;
border-radius: var(--parsec-radius-8);

&.list-file {
margin: 1rem 0;
}

&-header {
display: flex;
align-items: center;
justify-content: space-between;
transition: border 0.2s ease-in-out;
opacity: 0.8;
cursor: pointer;

&:hover {
opacity: 1;
}

&.open {
margin-bottom: 0.5rem;
}

&-title {
color: var(--parsec-color-light-secondary-inversed-contrast);
display: flex;
align-items: center;

&__icon {
font-size: 1rem;
margin-right: 0.5rem;
}

&__text {
margin-right: 0.5rem;
line-height: auto;
user-select: none;
}
}

&:active {
.list-sidebar-toggle-icon {
scale: 0.85;
}
}
}

&-toggle-icon {
user-select: none;
padding: 0.125rem;
font-size: 1.25rem;
border-radius: var(--parsec-radius-6);
color: var(--parsec-color-light-secondary-inversed-contrast);
}

&-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
}
</style>
75 changes: 41 additions & 34 deletions client/src/components/sidebar/SidebarRecentFileItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,17 @@
lines="none"
button
@click="$emit('fileClicked', file)"
class="sidebar-item menu-default"
class="sidebar-item button-medium ion-no-padding"
ref="itemRef"
>
<ion-text class="sidebar-item-file-label">{{ file.name }}</ion-text>
<div
class="file-option"
@click.stop="$emit('removeClicked', file)"
>
<ion-icon :icon="close" />
<div class="sidebar-item-file">
<ion-text class="sidebar-item-file__label">{{ file.name }}</ion-text>
<div
class="sidebar-item-file__option"
@click.stop="$emit('removeClicked', file)"
>
<ion-icon :icon="close" />
</div>
</div>
</ion-item>
</template>
Expand All @@ -37,45 +39,50 @@ defineEmits<{
.sidebar-item {
--background: none;
border-radius: var(--parsec-radius-8);
border: solid 1px var(--parsec-color-light-primary-800);
--padding-start: 1rem;
--padding-end: 1rem;
--padding-top: 0.5rem;
--min-height: 0;
--padding-start: 0.75rem;
--padding-end: 0.75rem;
--padding-bottom: 0.5rem;
--padding-top: 0.5rem;

&:active,
&.item-selected {
--background: var(--parsec-color-light-primary-30-opacity15);
}

.file-option {
color: var(--parsec-color-light-secondary-grey);
font-size: 1.2rem;
opacity: 1;
.sidebar-item-file {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;

&:hover {
color: var(--parsec-color-light-primary-30);
&__label {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: var(--parsec-color-light-secondary-premiere);
width: 100%;
}
}

&:hover {
border: solid 1px var(--parsec-color-light-primary-30-opacity15);
cursor: pointer;
&__option {
color: var(--parsec-color-light-secondary-light);
display: none;
margin-left: auto;
font-size: 1rem;

.file-option {
opacity: 1;
&:hover {
color: var(--parsec-color-light-primary-30);
}
}
}

&:active,
&.item-selected {
--background: var(--parsec-color-light-primary-30-opacity15);
}
&:hover {
outline: solid 1px var(--parsec-color-light-primary-30-opacity15);
cursor: pointer;

&-file-label {
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: var(--parsec-color-light-primary-100);
width: 100%;
.sidebar-item-file__option {
display: flex;
}
}
}
</style>
83 changes: 42 additions & 41 deletions client/src/components/sidebar/SidebarWorkspaceItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,23 @@
button
@click="$emit('workspaceClicked', workspace.handle)"
:class="currentRouteIsWorkspaceRoute(workspace.handle) ? 'item-selected' : 'item-not-selected'"
class="sidebar-item menu-default"
class="sidebar-item button-medium ion-no-padding"
ref="itemRef"
>
<ion-label class="sidebar-item-workspace-label">{{ workspace.currentName }}</ion-label>
<div
class="workspace-option"
@click.stop="$emit('contextMenuRequested', $event)"
>
<ion-icon :icon="ellipsisHorizontal" />
<div class="sidebar-item-workspace">
<ion-text class="sidebar-item-workspace__label">{{ workspace.currentName }}</ion-text>
<div
class="sidebar-item-workspace__option"
@click.stop="$emit('contextMenuRequested', $event)"
>
<ion-icon :icon="ellipsisHorizontal" />
</div>
</div>
</ion-item>
</template>

<script setup lang="ts">
import { IonItem, IonLabel, IonIcon } from '@ionic/vue';
import { IonItem, IonText, IonIcon } from '@ionic/vue';
import { WorkspaceInfo, WorkspaceHandle } from '@/parsec';
import { ellipsisHorizontal } from 'ionicons/icons';
import { currentRouteIsWorkspaceRoute } from '@/router';
Expand Down Expand Up @@ -53,51 +55,50 @@ onBeforeUnmount(async () => {
.sidebar-item {
--background: none;
border-radius: var(--parsec-radius-8);
border: solid 1px var(--parsec-color-light-primary-800);
--min-height: 0;
--padding-start: 0.75rem;
--padding-end: 0.75rem;
--padding-bottom: 0.5rem;
--padding-top: 0.5rem;

.workspace-option {
color: var(--parsec-color-light-secondary-grey);
text-align: right;
position: absolute;
&:active,
&.item-selected {
--background: var(--parsec-color-light-primary-30-opacity15);
}

.sidebar-item-workspace {
display: flex;
align-items: center;
top: 0;
right: 1rem;
font-size: 1.2rem;
padding-top: 0.5rem;
opacity: 0;
justify-content: space-between;
width: 100%;

&:hover {
color: var(--parsec-color-light-primary-30);
&__label {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: var(--parsec-color-light-secondary-premiere);
width: 100%;
}
}

&:hover {
border: solid 1px var(--parsec-color-light-primary-30-opacity15);
cursor: pointer;
&__option {
color: var(--parsec-color-light-secondary-light);
display: none;
margin-left: auto;
font-size: 1rem;

.workspace-option {
opacity: 1;
&:hover {
color: var(--parsec-color-light-primary-30);
}
}
}

&:active,
&.item-selected {
--background: var(--parsec-color-light-primary-30-opacity15);
}

& > ion-label {
--color: var(--parsec-color-light-primary-100);
}
&:hover {
outline: solid 1px var(--parsec-color-light-primary-30-opacity15);
cursor: pointer;

&-workspace-label {
position: relative;
margin-right: 1.1rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
--color: var(--parsec-color-light-primary-100);
.sidebar-item-workspace__option {
display: flex;
}
}
}
</style>
3 changes: 2 additions & 1 deletion client/src/components/sidebar/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS

import SidebarMenuList from '@/components/sidebar/SidebarMenuList.vue';
import SidebarRecentFileItem from '@/components/sidebar/SidebarRecentFileItem.vue';
import SidebarWorkspaceItem from '@/components/sidebar/SidebarWorkspaceItem.vue';

export { SidebarRecentFileItem, SidebarWorkspaceItem };
export { SidebarMenuList, SidebarRecentFileItem, SidebarWorkspaceItem };
Loading

0 comments on commit c360fad

Please sign in to comment.