Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[MS] Restyle SidebarMenuPage #9088

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[MS] Restyle SidebarMenuPage #9088

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 116 additions & 0 deletions client/src/components/sidebar/SidebarMenuList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<!-- 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="isContentVisible = !isContentVisible"
>
<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;
}>();
</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
Open in desktop
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
Open in desktop
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
Open in desktop
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