Refactored some pages and components

gitthermal · Oct 7, 2019 · 60d1c45 · 60d1c45
1 parent db2231e
commit 60d1c45
Show file tree

Hide file tree

Showing 17 changed files with 195 additions and 205 deletions.
diff --git a/src/renderer/assets/css/_spacing.sass b/src/renderer/assets/css/_spacing.sass
@@ -17,3 +17,19 @@
 @for $i from 1 through 10
 	.m-#{$i}
 		margin: $i + rem
+
+@for $i from 1 through 10
+	.mt-#{$i}
+		margin-top: $i + rem
+
+@for $i from 1 through 10
+	.ml-#{$i}
+		margin-left: $i + rem
+
+@for $i from 1 through 10
+	.mb-#{$i}
+		margin-bottom: $i + rem
+
+@for $i from 1 through 10
+	.mr-#{$i}
+		margin-right: $i + rem
diff --git a/src/renderer/assets/css/_utilities.sass b/src/renderer/assets/css/_utilities.sass
@@ -1,5 +1,7 @@
+@import "utilities/alignment"
 @import "utilities/cursor"
 @import "utilities/display"
 @import "utilities/flex"
+@import "utilities/overflow"
 @import "utilities/scrollbar"
 @import "utilities/settings"
diff --git a/src/renderer/assets/css/utilities/_alignment.sass b/src/renderer/assets/css/utilities/_alignment.sass
@@ -0,0 +1,8 @@
+.text-left
+  text-align: left
+.text-center
+  text-align: center
+.text-right
+  text-align: right
+.text-justify
+  text-align: justify
diff --git a/src/renderer/assets/css/utilities/_display.sass b/src/renderer/assets/css/utilities/_display.sass
@@ -4,6 +4,17 @@
 .d-flex
 	display: flex
 
+.static
+	position: static
+.fixed
+	position: fixed
+.absolute
+	position: absolute
+.relative
+	position: relative
+.sticky
+	position: sticky
+
 .opacity-0
 	opacity: 0
 

diff --git a/src/renderer/assets/css/utilities/_overflow.sass b/src/renderer/assets/css/utilities/_overflow.sass
@@ -0,0 +1,40 @@
+.overflow-auto
+  overflow: auto
+
+.overflow-hidden
+  overflow: hidden
+
+.overflow-visible
+  overflow: visible
+
+.overflow-scroll
+  overflow: scroll
+
+.overflow-x-auto
+  overflow-x: auto
+
+.overflow-y-auto
+  overflow-y: auto
+
+.overflow-x-hidden
+  overflow-x: hidden
+
+.overflow-y-hidden
+  overflow-y: hidden
+
+.overflow-x-visible
+  overflow-x: visible
+
+.overflow-y-visible
+  overflow-y: visible
+
+.overflow-x-scroll
+  overflow-x: scroll
+
+.overflow-y-scroll
+  overflow-y: scroll
+
+.scrolling-touch
+  -webkit-overflow-scrolling: touch
+.scrolling-auto
+  -webkit-overflow-scrolling: auto
diff --git a/src/renderer/components/TButton/TButton.vue b/src/renderer/components/TButton/TButton.vue
@@ -50,6 +50,7 @@ export default {
 
 <style lang="sass">
 .t-button
+	transition: 0.15s cubic-bezier(0.34, 0, 0.58, 1), transform 0.15s cubic-bezier(0.34, 0, 0.58, 1)
 	cursor: pointer
 	opacity: 1
 	font:
@@ -65,6 +66,9 @@ export default {
 		width: 1px
 		style: solid
 		radius: 2rem
+	
+	&:hover
+    transform: scale(1.02)
 
 	&__primary
 		color: #ffffff

diff --git a/src/renderer/components/TLayouts/TScrollbar.vue b/src/renderer/components/TLayouts/TScrollbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<vue-scrollbar :style="{ height: height, width: width }">
+	<vue-scrollbar :style="{ height: height, width: width, margin: 0, padding: padding }">
 		<slot />
 	</vue-scrollbar>
 </template>
@@ -20,6 +20,10 @@ export default {
 		width: {
 			type: String,
 			default: null
+		},
+		padding: {
+			type: String,
+			default: null
 		}
 	}
 };

diff --git a/src/renderer/components/commit/commitHistoryItem.vue b/src/renderer/components/commit/commitHistoryItem.vue
@@ -1,22 +1,9 @@
 <template>
 	<t-flexbox flex-direction="column">
-		<a
-			class="history__item"
-			@mouseenter="showFiles(data.hash)"
-			@mouseleave="hideFiles()"
-		>
-			<div :title="data.message" class="history__item__title">
-				{{ data.message }}
-			</div>
-			<t-flexbox
-				flex-direction="row"
-				align-items="center"
-				class="history__item__author"
-			>
-				<img
-					class="history__item__author__image"
-					src="../../../../static/image/user_avatar.png"
-				/>
+		<a class="history__item" @mouseenter="showFiles(data.hash)" @mouseleave="hideFiles()">
+			<div :title="data.message" class="history__item__title">{{ data.message }}</div>
+			<t-flexbox flex-direction="row" align-items="center" class="history__item__author">
+				<img class="history__item__author__image" src="../../../../static/image/user_avatar.png" />
 				{{ data.author_name }} committed {{ data.date | moment("from", "now") }}
 			</t-flexbox>
 		</a>
@@ -28,9 +15,7 @@
 			class="history__files"
 		>
 			<dropdown-list class="history__files__dropdown">
-				<dropdown-item v-for="item in files.list" :key="item">
-					{{ item }}
-				</dropdown-item>
+				<dropdown-item v-for="item in files.list" :key="item">{{ item }}</dropdown-item>
 			</dropdown-list>
 		</t-flexbox>
 	</t-flexbox>
@@ -94,13 +79,14 @@ export default {
 <style lang="sass">
 .history
 	&__item
-		padding: 10px
+		padding: 14px
 		font-size: 12px
-		border-bottom: 1px solid #DEE0E3
+		margin-bottom: 0.8rem
 
 		&__title
 			margin-bottom: 6px
 			color: black
+			font-weight: 500
 
 		&__author
 			font-size: 10px

diff --git a/src/renderer/components/diff/diffPreview.vue b/src/renderer/components/diff/diffPreview.vue
@@ -1,9 +1,7 @@
 <template>
-	<t-scrollbar height="90vh">
+	<t-scrollbar padding="0.5rem" height="90vh">
 		<div>
-			<div v-for="(line, index) in preview" :key="index">
-				{{ line }}
-			</div>
+			<div v-for="(line, index) in preview" :key="index">{{ line }}</div>
 		</div>
 	</t-scrollbar>
 </template>

diff --git a/src/renderer/components/navbar.vue b/src/renderer/components/navbar.vue
@@ -10,11 +10,7 @@
 			<commitIcon />
 			<p>Commit</p>
 		</t-flexbox>
-		<t-flexbox
-			v-if="!!getRemoteUrl"
-			class="navbar__group"
-			:class="getRemoteFeature"
-		>
+		<t-flexbox v-if="!!getRemoteUrl" class="navbar__group" :class="getRemoteFeature">
 			<t-flexbox
 				flex-direction="column"
 				align-items="center"
@@ -33,11 +29,7 @@
 				<pushIcon />
 				<p>Push</p>
 			</t-flexbox>
-			<t-flexbox
-				flex-direction="column"
-				align-items="center"
-				class="navbar__item"
-			>
+			<t-flexbox flex-direction="column" align-items="center" class="navbar__item">
 				<fetchIcon />
 				<p>Fetch</p>
 			</t-flexbox>
@@ -246,5 +238,5 @@ export default {
 
 		.navbar__item
 			&:not(:last-child)
-				margin-right: 15px
+				margin-right: 1.5rem
 </style>
diff --git a/src/renderer/components/sidebar.vue b/src/renderer/components/sidebar.vue
@@ -1,28 +1,19 @@
 <template>
 	<t-flexbox class="repository__sidebar">
 		<t-flexbox flex-direction="column" class="repository__sidebar__group">
-			<router-link
-				class="repository__sidebar__item"
-				:to="{ name: 'repositoryWorkspace' }"
-			>
+			<router-link class="repository__sidebar__item" :to="{ name: 'repositoryWorkspace' }">
 				<t-flexbox align-items="center">
 					<folderIcon />
 					<p>Workspace</p>
 				</t-flexbox>
 			</router-link>
-			<router-link
-				class="repository__sidebar__item"
-				:to="{ name: 'repositoryHistory' }"
-			>
+			<router-link class="repository__sidebar__item" :to="{ name: 'repositoryHistory' }">
 				<t-flexbox align-items="center">
 					<clockIcon />
 					<p>History</p>
 				</t-flexbox>
 			</router-link>
-			<router-link
-				class="repository__sidebar__item"
-				:to="{ name: 'repositoryStats' }"
-			>
+			<router-link class="repository__sidebar__item" :to="{ name: 'repositoryStats' }">
 				<t-flexbox align-items="center">
 					<barIcon />
 					<p>Stats</p>
@@ -59,7 +50,7 @@ export default {
 
 		&__item
 			padding: 3px 20px
-			margin-bottom: 5px
+			margin-bottom: 1.5rem
 
 			svg
 				width: 20px

diff --git a/src/renderer/pages/repository/workspace.vue b/src/renderer/pages/repository/workspace.vue
@@ -1,53 +1,38 @@
 <template>
 	<t-flexbox flex-direction="row" :flex-grow="1">
-		<div ref="workspaceFiles" class="workspace__files">
-			<t-flexbox flex-direction="column" style="overflow: hidden;">
-				<t-flexbox
-					ref="branchName"
-					align-items="center"
-					class="workspace__branch"
-				>
+		<div ref="workspaceFiles" class="workspace">
+			<t-flexbox flex-direction="column" class="overflow-hidden">
+				<t-flexbox ref="branchName" align-items="center" class="branch">
 					<branchIcon />
 					<p>{{ this.$store.state.commit.activeBranch }}</p>
 				</t-flexbox>
-				<t-scrollbar
-					style="height: calc(100vh - (106px + 41px + 65px + 34px))"
-					width="100%"
-				>
-					<fileChangesSkeleton
-						v-if="this.$store.getters['commit/allFiles'].length < 1"
-					/>
+				<t-scrollbar style="height: calc(100vh - (106px + 41px + 65px + 34px))" width="100%">
+					<fileChangesSkeleton v-if="this.$store.getters['commit/allFiles'].length < 1" />
 					<div v-else>
 						<t-flexbox
 							v-for="file in this.$store.getters['commit/allFiles']"
 							:key="file.path"
-							class="workspace__changes__item"
+							class="changes__item"
 							align-items="center"
-							@click="previewFileChange(file)"
+							@click.native="previewFileChange(file)"
 						>
 							<input
 								v-show="getFeatureValue.commit"
 								v-model="stagedFile"
-								class="workspace__changes__item__checkbox"
+								class="checkbox"
 								type="checkbox"
 								:value="file.path"
 							/>
-							<label :title="file.path" :for="file.path">
+							<label class="cursor-pointer" :title="file.path" :for="file.path">
 								<t-flexbox>
-									<p class="workspace__changes__item__path__name">
-										{{ filePath(file.path) }}
-									</p>
-									<p class="workspace__changes__item__path__file">
-										{{ fileName(file.path) }}
-									</p>
+									<p class="path__name">{{ filePath(file.path) }}</p>
+									<p class="path__file">{{ fileName(file.path) }}</p>
 								</t-flexbox>
 							</label>
 							<div
 								:style="'background-color: #' + fileTypeColor(file)"
-								class="workspace__changes__item__type ml-auto"
-							>
-								{{ fileType(file) }}
-							</div>
+								class="type ml-auto"
+							>{{ fileType(file) }}</div>
 						</t-flexbox>
 					</div>
 				</t-scrollbar>
@@ -60,10 +45,7 @@
 				padding-right="10px"
 			/>
 		</div>
-		<diffPreview
-			v-if="this.$store.state.workspace.filePreview.isActive"
-			:preview="fileDiffPreview"
-		/>
+		<diffPreview v-if="this.$store.state.workspace.filePreview.isActive" :preview="fileDiffPreview" />
 		<blank-slate v-else />
 	</t-flexbox>
 </template>
@@ -223,11 +205,12 @@ export default {
 
 <style lang="sass">
 .workspace
-	&__files
-		border-right: 1px solid #DEE0E3
-		width: 300px
+	border-right: 1px solid #DEE0E3
+	width: 300px
+	max-width: 300px;
+	min-width: 300px;
 
-	&__branch
+	.branch
 		background-color: #EFEFEF
 		padding: 10px 20px
 		border-bottom: 1px solid #DEE0E3
@@ -242,22 +225,21 @@ export default {
 			font-size: 14px
 			font-weight: 600
 
-	&__changes
+	.changes
 		&__item
-			border-bottom: 1px solid #DEE0E3
+			padding: .8rem 10px
 			font-size: 12px
 			color: #2E3034
-			padding: 6px 10px
 			cursor: pointer
 
-			&__checkbox
+			.checkbox
 				margin-right: 5px
 
-			&__path
+			.path
 				&__name
 					color: #BEBEBE
 
-			&__type
+			.type
 				padding: 3px 5px
 				color: white
 				border-radius: 3px