feat: new tab & sidebar design

bridge-core · Jul 21, 2022 · 300195c · 300195c
1 parent 712d375
commit 300195c
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 13 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -29,13 +29,17 @@
 			<v-row
 				no-gutters
 				class="d-flex fill-area"
-				:class="{ 'flex-row-reverse': isSidebarRight }"
+				:class="{
+					'ml-2': !isSidebarContentVisible && isSidebarRight,
+					'mr-2': !isSidebarContentVisible && !isSidebarRight,
+					'flex-row-reverse': isSidebarRight,
+				}"
 			>
 				<v-col
 					v-if="isSidebarContentVisible"
 					:cols="isSidebarContentVisible ? 3 + sidebarSize : 0"
 				>
-					<SidebarContent />
+					<SidebarContent :isSidebarRight="isSidebarRight" />
 				</v-col>
 
 				<v-col
@@ -50,11 +54,11 @@
 							height: `calc(${windowSize.currentHeight}px - ${appToolbarHeight})`,
 						}"
 					>
-						<v-divider
+						<!-- <v-divider
 							v-if="isSidebarContentVisible && !isSidebarRight"
 							style="z-index: 1"
 							vertical
-						/>
+						/> -->
 
 						<TabSystem
 							class="flex-grow-1"
@@ -75,10 +79,10 @@
 							:id="1"
 						/>
 
-						<v-divider
+						<!-- <v-divider
 							v-if="isSidebarContentVisible && isSidebarRight"
 							vertical
-						/>
+						/> -->
 					</div>
 					<WelcomeScreen
 						v-else
@@ -92,8 +96,6 @@
 					/>
 				</v-col>
 			</v-row>
-
-			<!--  -->
 		</v-main>
 
 		<ContextMenu

diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
@@ -6,11 +6,17 @@
 		v-model="isNavigationVisible"
 		:app="app"
 		absolute
+		floating
 		:right="isSidebarRight"
 		color="sidebarNavigation"
 		:height="`calc(100% - ${appToolbarHeight})`"
+		:class="{
+			'rounded-r-lg': !isSidebarRight,
+			'rounded-l-lg': isSidebarRight,
+		}"
+		class="my-2"
 		:style="{
-			maxHeight: `calc(100% - ${appToolbarHeight})`,
+			maxHeight: `calc(100% - ${appToolbarHeight} - 16px)`,
 			top: appToolbarHeight,
 		}"
 	>

diff --git a/src/components/TabSystem/Tab.vue b/src/components/TabSystem/Tab.vue
@@ -1,12 +1,16 @@
 <template>
 	<div
-		class="px-3 py-2 cursor-pointer"
+		class="cursor-pointer"
 		:class="{
 			selected: tab.isSelected,
 			'default-tab-style': true,
 			'd-flex': true,
 			'align-center': true,
 			inactive: !isActive,
+			'rounded-lg': true,
+			'px-3 py-2': tab.isSelected,
+			'px-2 pb-1 mx-1 mt-2 my-1': !tab.isSelected,
+			'ml-0 pl-3': isFirstTab,
 		}"
 		style="position: relative"
 		ref="tabElement"
@@ -125,6 +129,7 @@ export default {
 	props: {
 		tab: Tab,
 		isActive: Boolean,
+		isFirstTab: Boolean,
 	},
 	data: () => ({
 		hoveringBtn: false,

diff --git a/src/components/TabSystem/TabBar.vue b/src/components/TabSystem/TabBar.vue
@@ -12,10 +12,11 @@
 			:style="`display: flex; overflow-x: scroll; white-space: nowrap; width: 100%; height: 48px;`"
 		>
 			<TabSystemTab
-				v-for="tab in tabSystem.tabs"
+				v-for="(tab, i) in tabSystem.tabs"
 				:key="tab.uuid"
 				:tab="tab"
 				:isActive="tabSystem.isActive"
+				:isFirstTab="i === 0"
 			/>
 		</Draggable>
 		<ActionBar
@@ -69,9 +70,9 @@ export default {
 	background-color: var(--v-background-base);
 }
 *::-webkit-scrollbar-thumb {
-	border-radius: 0;
+	border: none !important;
+	background-color: var(--v-tabInactive-base);
 }
-
 .inactive-action-bar {
 	opacity: 0.5;
 }