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

Refactor CSS (some pages and components) #3574

Closed
wants to merge 5 commits into from
Closed

Refactor CSS (some pages and components) #3574

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
60d1c45
Refactored some pages and components
Oct 7, 2019
255609e
Fixed formating and identation -> yarn run lint:fix
Oct 8, 2019
56b991c
Revert the changes of styles of repository list section
Oct 8, 2019
e5d027a
Revert some changes (transitions, padding, mb) and changed name of class
Oct 9, 2019
4de2fdc
Reduced some margins and removed semicolons in sass
Oct 10, 2019
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
16 changes: 16 additions & 0 deletions src/renderer/assets/css/_spacing.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Comment on lines +20 to +35
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Creating for loop for margins might take a lot of space in terms of file size and we can easily add those to class based css inside components files.

2 changes: 2 additions & 0 deletions src/renderer/assets/css/_utilities.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
8 changes: 8 additions & 0 deletions src/renderer/assets/css/utilities/_alignment.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.text-left
text-align: left
.text-center
text-align: center
.text-right
text-align: right
.text-justify
text-align: justify
11 changes: 11 additions & 0 deletions src/renderer/assets/css/utilities/_display.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
40 changes: 40 additions & 0 deletions src/renderer/assets/css/utilities/_overflow.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
4 changes: 4 additions & 0 deletions src/renderer/components/TButton/TButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -65,6 +66,9 @@ export default {
width: 1px
style: solid
radius: 2rem

&:hover
transform: scale(1.02)

&__primary
color: #ffffff
Expand Down
6 changes: 5 additions & 1 deletion src/renderer/components/TLayouts/TScrollbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -20,6 +20,10 @@ export default {
width: {
type: String,
default: null
},
padding: {
type: String,
default: null
}
}
};
Expand Down
30 changes: 8 additions & 22 deletions src/renderer/components/commit/commitHistoryItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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
Publicker marked this conversation as resolved.
Show resolved Hide resolved

&__title
margin-bottom: 6px
color: black
font-weight: 500

&__author
font-size: 10px
Expand Down
6 changes: 2 additions & 4 deletions src/renderer/components/diff/diffPreview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
14 changes: 3 additions & 11 deletions src/renderer/components/navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand Down Expand Up @@ -246,5 +238,5 @@ export default {

.navbar__item
&:not(:last-child)
margin-right: 15px
margin-right: 1.5rem
Publicker marked this conversation as resolved.
Show resolved Hide resolved
</style>
17 changes: 4 additions & 13 deletions src/renderer/components/sidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -59,7 +50,7 @@ export default {

&__item
padding: 3px 20px
margin-bottom: 5px
margin-bottom: 1.5rem
Publicker marked this conversation as resolved.
Show resolved Hide resolved

svg
width: 20px
Expand Down
66 changes: 24 additions & 42 deletions src/renderer/pages/repository/workspace.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Publicker marked this conversation as resolved.
Show resolved Hide resolved
<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>
Expand All @@ -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>
Expand Down Expand Up @@ -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;
Publicker marked this conversation as resolved.
Show resolved Hide resolved

&__branch
.branch
background-color: #EFEFEF
padding: 10px 20px
border-bottom: 1px solid #DEE0E3
Expand All @@ -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
Expand Down
Loading