huanld/speckle-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(ui): adds dark mode 🌛

Browse Source
This commit is contained in:
Matteo Cominetti
2020-10-16 18:52:14 +01:00
parent 24072685a0
commit 8dc157772d
17 changed files with 198 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/AppFrontend.vue
+103 -8
View File
@@ -1,6 +1,6 @@
<template>
<v-app id="speckle">
<v-app-bar app color="white" flat>
<v-app-bar app color="background2" flat>
<v-container class="py-0 fill-height">
<v-btn text to="/">
<v-img
@@ -11,8 +11,8 @@
/>
<div class="mt-1">
<span class="primary--text"><b>SPECKLE</b></span>
&nbsp;
<span class="font-weight-light">ADMIN</span>
<!-- &nbsp;
<span class="font-weight-light">ADMIN</span> -->
</div>
</v-btn>
@@ -27,8 +27,7 @@
</v-btn>
<v-spacer></v-spacer>
<!-- TODO ADD SEARCH -->
<!-- <v-responsive max-width="260">
<v-responsive max-width="260">
<v-text-field
dense
flat
@@ -36,23 +35,108 @@
rounded
solo-inverted
></v-text-field>
</v-responsive> -->
</v-responsive>
<v-menu v-if="user" bottom left offset-y>
<template #activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
height="38"
width="38"
class="ml-3"
v-on="on"
>
<v-avatar color="background" size="38">
<v-img v-if="user.avatar" :src="user.avatar" />
<v-img
v-else
:src="`https://robohash.org/` + user.id + `.png?size=38x38`"
/>
</v-avatar>
</v-btn>
</template>
<v-list dense class="userMenu" color="background2">
<v-list-item>
<v-list-item-content class="caption">
Signed in as:
<strong>{{ user.name }}</strong>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list-item-group>
<v-list-item v-if="!isDark" inactive>
<v-list-item-content>Dark mode</v-list-item-content>
<v-list-item-action>
<v-btn icon @click="toggleDark">
<v-icon>mdi-weather-night</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-list-item v-else inactive>
<v-list-item-content>Light mode</v-list-item-content>
<v-list-item-actions>
<v-btn icon @click="toggleDark">
<v-icon>mdi-white-balance-sunny</v-icon>
</v-btn>
</v-list-item-actions>
</v-list-item>
<v-divider></v-divider>
<!-- <v-list-item href="https://speckle.systems/" target="_blank">
<v-list-item-content>SpeckleSystems</v-list-item-content>
</v-list-item> -->
<v-list-item @click="signOut">
<v-list-item-content>Sign out</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-menu>
</v-container>
</v-app-bar>
<v-main class="grey lighten-3">
<v-main :style="background">
<router-view></router-view>
</v-main>
</v-app>
</template>
<script>
import userQuery from "./graphql/user.gql"
export default {
data: () => ({
navLinks: [
{ link: "/streams", name: "streams" },
{ link: "/help", name: "help" }
]
})
}),
apollo: {
user: {
prefetch: true,
query: userQuery
}
},
computed: {
background() {
let theme = this.$vuetify.theme.dark ? "dark" : "light"
return `background-color: ${this.$vuetify.theme.themes[theme].background};`
},
isDark() {
let isDark = localStorage.getItem("darkModeEnabled") ?? false
return isDark
}
},
mounted() {
this.$vuetify.theme.dark = this.isDark
},
methods: {
toggleDark() {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark
localStorage.setItem("darkModeEnabled", this.$vuetify.theme.dark)
},
signOut() {
localStorage.clear()
location.reload()
}
}
}
</script>
<style>
@@ -72,4 +156,15 @@ a {
a:hover {
text-decoration: underline;
}
.userMenu a:hover {
text-decoration: none;
}
.userMenu .v-list-item--active::before {
opacity: 0;
}
.theme--dark {
color: #cfcdcc !important;
}
</style>
frontend/src/components/FeedCommit.vue
+6 -6
View File
@@ -1,7 +1,7 @@
<template>
<div>
<div class="text-center" style="position: absolute">
<v-avatar class="mt-10" color="white" size="40">
<v-avatar class="mt-10" color="background2" size="40">
<v-img v-if="user.avatar" :src="user.avatar" />
<v-img
v-else
@@ -29,19 +29,19 @@
</v-col>
</v-row>
<v-card class="mb-3" elevation="0" rounded="lg">
<v-card class="mb-3" elevation="0" rounded="lg" color="background2">
<v-card-title v-if="!commit.items" class="subtitle-2">
{{ commit.message }}
</v-card-title>
<v-expansion-panels v-else flat>
<v-expansion-panels v-else flat color="background2">
<v-expansion-panel>
<v-expansion-panel-header class="pl-4">
<v-expansion-panel-header class="pl-4" color="background2">
<span class="subtitle-2">
{{ commit.message }}
</span>
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-list dense>
<v-expansion-panel-content color="background2">
<v-list dense color="background2">
<v-list-item v-for="(item, i) in commit.items" :key="i">
<div style="width: 100%">
<v-row class="caption">
frontend/src/components/FeedStream.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<div>
<div class="text-center" style="position: absolute">
<v-avatar class="mt-10" color="white" size="40">
<v-avatar class="mt-10" color="background2" size="40">
<v-img v-if="user.avatar" :src="user.avatar" />
<v-img
v-else
@@ -19,7 +19,7 @@
<timeago :datetime="stream.createdAt"></timeago>
</v-col>
</v-row>
<v-card class="mb-3" elevation="0" rounded="lg">
<v-card class="mb-3" elevation="0" rounded="lg" color="background2">
<v-row>
<v-col cols="7" class="pt-0 pb-0">
<v-card-title class="subtitle-2">
frontend/src/components/SidebarHome.vue
+4 -2
View File
@@ -5,9 +5,10 @@
rounded="lg"
class="pa-4 text-center"
style="position: relative"
color="background2"
>
<v-card-title class="justify-center pb-0">
<v-avatar color="grey lighten-3" size="64">
<v-avatar color="background" size="64">
<v-img v-if="user.avatar" :src="user.avatar" />
<v-img
v-else
@@ -23,7 +24,7 @@
<p>
{{ user.bio }}
</p>
<code>{{ user.id }}</code>
<span class="streamid">{{ user.id }}</span>
</v-card-text>
<v-btn
small
@@ -42,6 +43,7 @@
class="mt-5 pa-4 text-center"
style="position: relative"
elevation="0"
color="background2"
>
<v-card-title class="justify-center text-wrap">
{{ serverInfo.name }}
frontend/src/components/SidebarStream.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div v-if="stream">
<v-card rounded="lg" class="pa-4" elevation="0">
<v-card rounded="lg" class="pa-4" elevation="0" color="background2">
<v-card-title class="mr-8">
{{ stream.name }}
</v-card-title>
@@ -62,7 +62,7 @@
</v-card-text>
</v-card>
<v-card rounded="lg" class="mt-5 pa-4" elevation="0">
<v-card rounded="lg" class="mt-5 pa-4" elevation="0" color="background2">
<v-card-title class="subtitle-1">Collaborators</v-card-title>
<div class="ml-2 mr-2">
<v-btn
frontend/src/components/dialogs/BranchDialog.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<v-dialog v-model="show" width="500" @keydown.esc="cancel">
<v-card class="pa-4">
<v-card class="pa-4" color="background2">
<v-card-title class="subtitle-1">
{{ isEdit ? `Edit` : `New` }} Branch
</v-card-title>
frontend/src/components/dialogs/CommitDialog.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<v-dialog v-model="show" width="500" @keydown.esc="cancel">
<v-card class="pa-4">
<v-card class="pa-4" color="background2">
<v-card-title class="subtitle-1">Edit Commit</v-card-title>
<v-card-text class="pl-2 pr-2 pt-0 pb-0">
frontend/src/components/dialogs/ServerDialog.vue
+5 -5
View File
@@ -1,6 +1,6 @@
<template>
<v-dialog v-model="show" width="500" @keydown.esc="cancel">
<v-card class="pa-4">
<v-card class="pa-4" color="background2">
<v-card-title class="subtitle-1">Edit Server Info</v-card-title>
<v-card-text class="pl-2 pr-2 pt-0 pb-0">
@@ -53,12 +53,12 @@
</v-row>
<v-row>
<v-col cols="12" class="pt-0 pb-0">
<v-textarea
<v-text-field
v-model="server.termsOfService"
filled
rows="4"
label="TermsOf Service"
></v-textarea>
label="Terms Of Service"
placeholder="https://..."
></v-text-field>
</v-col>
</v-row>
</v-container>
frontend/src/components/dialogs/StreamDialog.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<v-dialog v-model="show" width="500" @keydown.esc="cancel">
<v-card class="pa-4">
<v-card class="pa-4" color="background2">
<v-card-title class="subtitle-1">
{{ isEdit ? `Edit` : `New` }} Stream
</v-card-title>
frontend/src/components/dialogs/StreamShareDialog.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<v-dialog v-model="dialog" width="600" @keydown.esc="dialog = false">
<v-card class="pa-4">
<v-card class="pa-4" color="background2">
<v-card-title class="subtitle-1">Manage collaborators</v-card-title>
<v-card-text class="pl-2 pr-2 pt-0 pb-0">
frontend/src/components/dialogs/UserDialog.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<v-dialog v-model="show" width="500" @keydown.esc="cancel">
<v-card class="pa-4">
<v-card class="pa-4" color="background2">
<v-card-title class="subtitle-1">Edit Profile</v-card-title>
<v-card-text class="pl-2 pr-2 pt-0 pb-0">
frontend/src/graphql/userFeed.gql
+49
View File
@@ -0,0 +1,49 @@
query {
user {
id
email
name
bio
company
avatar
verified
profiles
role
streams(limit: 25) {
totalCount
cursor
items {
id
name
description
isPublic
createdAt
updatedAt
collaborators {
id
name
company
avatar
role
}
commits {
totalCount
}
branches {
totalCount
}
}
}
commits(limit: 25) {
totalCount
cursor
items {
id
message
streamId
streamName
createdAt
}
}
}
}
frontend/src/plugins/vuetify.js
+15 -1
View File
@@ -17,7 +17,21 @@ export default new Vuetify({
error: "#FF5555", //red
warning: "#FF9100", //orange
info: "#313BCF", //dark blue
success: "#4caf50"
success: "#4caf50",
background: "#eeeeee",
background2: "#ffffff",
text: "#FFFFFF"
},
dark: {
primary: "#047EFB", //blue
secondary: "#7BBCFF", //light blue
accent: "#FCF25E", //yellow
error: "#FF5555", //red
warning: "#FF9100", //orange
info: "#313BCF", //dark blue
success: "#4caf50",
background: "#3a3b3c",
background2: "#303132"
}
}
}
frontend/src/views/Help.vue
+1 -1
View File
@@ -5,7 +5,7 @@
<sidebar-home></sidebar-home>
</v-col>
<v-col cols="9">
<v-sheet rounded="lg" class="pa-15 text-center">
<v-sheet rounded="lg" class="pa-15 text-center" color="background2">
<h1>Need Help?</h1>
<p class="ma-10 subtitle-1 font-weight-light">
Get free help from the
frontend/src/views/Home.vue
+3 -3
View File
@@ -7,7 +7,7 @@
<v-col v-if="recentActivity" cols="9">
<v-row>
<v-col class="pt-0">
<v-card class="pa-5" elevation="0" rounded="lg">
<v-card class="pa-5" elevation="0" rounded="lg" color="background2">
<v-subheader class="text-uppercase">Recent activity:</v-subheader>
<v-chip-group
v-model="selectedActivity"
@@ -48,7 +48,7 @@
import SidebarHome from "../components/SidebarHome"
import FeedStream from "../components/FeedStream"
import FeedCommit from "../components/FeedCommit"
import userQuery from "../graphql/user.gql"
import userFeedQuery from "../graphql/userFeed.gql"
export default {
name: "Home",
@@ -56,7 +56,7 @@ export default {
apollo: {
user: {
prefetch: true,
query: userQuery
query: userFeedQuery
}
},
data: () => ({ selectedActivity: 0, user: {} }),
frontend/src/views/Stream.vue
+2 -2
View File
@@ -7,7 +7,7 @@
<v-col cols="9">
<v-row>
<v-col class="pt-0">
<v-card class="pa-5" elevation="0" rounded="lg">
<v-card class="pa-5" elevation="0" rounded="lg" color="background2">
<v-subheader class="text-uppercase">Branches:</v-subheader>
<v-chip-group
@@ -73,7 +73,7 @@
</v-row>
<v-row>
<v-col>
<v-card rounded="lg" class="pa-5" elevation="0">
<v-card rounded="lg" class="pa-5" elevation="0" color="background2">
<v-subheader class="text-uppercase">Commits:</v-subheader>
<v-card-text>
frontend/src/views/Streams.vue
+1 -1
View File
@@ -5,7 +5,7 @@
<sidebar-home></sidebar-home>
</v-col>
<v-col cols="9">
<v-card rounded="lg" class="pa-5" elevation="0">
<v-card rounded="lg" class="pa-5" elevation="0" color="background2">
<v-card-title>Your Streams</v-card-title>
<v-card-actions>
<span class="ml-2">