Skip to content

Commit

Permalink
Fix
Browse files Browse the repository at this point in the history
  • Loading branch information
fabienSvstr committed Dec 4, 2024
1 parent abcbf5d commit 5c8c926
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 81 deletions.
6 changes: 1 addition & 5 deletions client/src/components/sidebar/SidebarMenuList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
lines="none"
class="list-sidebar-header title-h5"
:class="isContentVisible ? 'open' : 'close'"
@click="toggleContent"
@click="isContentVisible = !isContentVisible"
>
<div class="list-sidebar-header-title">
<ion-icon
Expand Down Expand Up @@ -43,10 +43,6 @@ defineProps<{
title: Translatable;
icon: string;
}>();

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

<style scoped lang="scss">
Expand Down
193 changes: 117 additions & 76 deletions client/src/views/sidebar-menu/SidebarMenuPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,72 +219,77 @@
</div>

<!-- manage organization -->
<div
<ion-list
v-show="currentRouteIsOrganizationManagementRoute()"
class="manage-organization"
class="manage-organization list-sidebar"
>
<ion-label class="title-h4">
{{
userInfo && userInfo.currentProfile === UserProfile.Admin
? $msTranslate('SideMenu.manageOrganization')
: $msTranslate('SideMenu.organizationInfo')
}}
</ion-label>
<ion-header
lines="none"
class="list-sidebar-header title-h4"
>
<ion-text class="list-sidebar-header__title">
{{
userInfo && userInfo.currentProfile === UserProfile.Admin
? $msTranslate('SideMenu.manageOrganization')
: $msTranslate('SideMenu.organizationInfo')
}}
</ion-text>
</ion-header>
<!-- user actions -->
<ion-list class="manage-organization-list users">
<div class="list-sidebar-content">
<!-- users -->
<ion-item
button
lines="none"
class="sidebar-item menu-default users-title"
button
class="sidebar-item button-medium users-title"
:class="currentRouteIsUserRoute() ? 'item-selected' : 'item-not-selected'"
@click="navigateTo(Routes.Users)"
>
<ion-icon
:icon="people"
class="sidebar-item-icon"
slot="start"
/>
<ion-label>{{ $msTranslate('SideMenu.users') }}</ion-label>
<div class="sidebar-item-manage">
<ion-icon
:icon="people"
class="sidebar-item-icon"
/>
<ion-text class="sidebar-item-manage__label">{{ $msTranslate('SideMenu.users') }}</ion-text>
</div>
</ion-item>
</ion-list>
<!-- storage -->
<ion-list
class="manage-organization-list storage"
v-show="userInfo && userInfo.currentProfile === UserProfile.Admin && false"
>

<!-- storage -->
<ion-item
button
lines="none"
class="sidebar-item storage-title menu-default"
button
class="sidebar-item button-medium storage-title"
:class="currentRouteIs(Routes.Storage) ? 'item-selected' : 'item-not-selected'"
@click="navigateTo(Routes.Storage)"
v-show="userInfo && userInfo.currentProfile === UserProfile.Admin && false"
>
<ion-icon
:icon="pieChart"
class="sidebar-item-icon"
slot="start"
/>
<ion-label> {{ $msTranslate('SideMenu.storage') }}</ion-label>
<div class="sidebar-item-manage">
<ion-icon
:icon="pieChart"
class="sidebar-item-icon"
/>
<ion-text class="sidebar-item-manage__label">{{ $msTranslate('SideMenu.storage') }}</ion-text>
</div>
</ion-item>
</ion-list>
<!-- org info -->
<ion-list class="manage-organization-list organization">

<!-- org info -->
<ion-item
button
lines="none"
class="sidebar-item organization-title menu-default"
class="sidebar-item button-medium organization-title"
:class="currentRouteIs(Routes.Organization) ? 'item-selected' : 'item-not-selected'"
@click="navigateTo(Routes.Organization)"
>
<ion-icon
:icon="informationCircle"
class="sidebar-item-icon"
slot="start"
/>
<ion-label>{{ $msTranslate('SideMenu.organizationInfo') }}</ion-label>
<div class="sidebar-item-manage">
<ion-icon
:icon="informationCircle"
class="sidebar-item-icon"
/>
<ion-text class="sidebar-item-manage__label">{{ $msTranslate('SideMenu.organizationInfo') }}</ion-text>
</div>
</ion-item>
</ion-list>
</div>
</div>
</ion-list>
</ion-content>
</ion-menu>

Expand Down Expand Up @@ -593,7 +598,7 @@ async function removeRecentFile(file: RecentFile): Promise<void> {
z-index: 0;
}

.sidebar-content {
&-content {
--background: transparent;
position: relative;
z-index: 12;
Expand Down Expand Up @@ -742,8 +747,6 @@ async function removeRecentFile(file: RecentFile): Promise<void> {
}
}

// eslint-disable-next-line vue-scoped-css/no-unused-selector

ion-split-pane {
--side-min-width: var(--parsec-sidebar-menu-min-width);
--side-max-width: var(--parsec-sidebar-menu-max-width);
Expand All @@ -754,24 +757,59 @@ ion-menu {
user-select: none;
}

.list-sidebar__no-workspace {
color: var(--parsec-color-light-secondary-inversed-contrast);
opacity: 0.5;
}

.list-sidebar-divider {
background: var(--parsec-color-light-primary-30-opacity15);
.list-sidebar {
display: flex;
justify-content: center;
height: 1px;
width: 100%;
margin-bottom: 1.5rem;
flex-direction: column;
flex: 1;
gap: 0.5rem;
margin-bottom: 1rem;
padding: 0.5rem;
border-radius: var(--parsec-radius-8);

&-header {
display: flex;
align-items: center;
justify-content: space-between;
transition: border 0.2s ease-in-out;
border-top: 1px solid var(--parsec-color-light-primary-30-opacity15);
padding: 1.5em 0 1em 0.5rem;

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

&-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

&__no-workspace {
color: var(--parsec-color-light-secondary-inversed-contrast);
opacity: 0.5;
}

&-divider {
background: var(--parsec-color-light-primary-30-opacity15);
display: flex;
justify-content: center;
height: 1px;
width: 100%;
margin-bottom: 1.5rem;
}
}

.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;

&:active,
&.item-selected {
Expand All @@ -784,6 +822,26 @@ ion-menu {
margin: 0;
margin-inline-end: 12px;
}

.sidebar-item-manage {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;

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

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

.freeze-card {
Expand Down Expand Up @@ -888,21 +946,4 @@ ion-menu {
color: var(--parsec-color-light-primary-600);
}
}

.manage-organization {
display: flex;
flex-direction: column;
color: var(--parsec-color-light-secondary-inversed-contrast);
padding: 0 1.25rem;
gap: 0.5rem;

.title-h4 {
padding: 1.5em 0 1em;
border-top: 1px solid var(--parsec-color-light-primary-30-opacity15);
}

&-list {
padding: 0;
}
}
</style>

0 comments on commit 5c8c926

Please sign in to comment.