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

Improvements in admin panel

Browse Source
This commit is contained in:
Alan Rynne
2021-06-09 16:04:20 +02:00
parent 310ae9c9a8
commit 02fdd2504d
9 changed files with 65 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/App.vue
+8
View File
@@ -168,4 +168,12 @@ export default {
opacity: 1;
transition: opacity 0.15s;
}
.speckle-gradient-bg {
@include speckle-gradient-bg;
}
.speckle-gradient-txt {
@include speckle-gradient-txt;
}
</style>
packages/frontend/src/components/admin/AdminCard.vue
+5 -3
View File
@@ -1,12 +1,14 @@
<template>
<v-card class="rounded-lg" v-bind="$attrs">
<v-card-title class="d-flex justify-space-between">
<span>{{ title }}</span>
<span class="text--secondary">{{ title }}</span>
<span>
<slot name="menu"></slot>
</span>
</v-card-title>
<v-card-text><slot></slot></v-card-text>
<v-card-text>
<slot></slot>
</v-card-text>
</v-card>
</template>
@@ -17,4 +19,4 @@ export default {
};
</script>
<style scoped></style>
<style scoped lang="scss"></style>
packages/frontend/src/components/admin/GeneralInfoCard.vue
+2 -2
View File
@@ -7,7 +7,7 @@
<v-tooltip bottom color="primary" :disabled="value < 1000">
<template v-slot:activator="{ on, attrs }">
<p class="primary--text text-h3 text-md-h2 text-lg-h1 text-center" v-bind="attrs" v-on="on">
<animated-number :value="value"/>
<animated-number :value="value" class="speckle-gradient-txt"/>
</p>
</template>
<span>{{ value }}</span>
@@ -36,6 +36,6 @@ export default {
};
</script>
<style scoped>
<style scoped lang="scss">
</style>
packages/frontend/src/components/admin/ServerInfoCard.vue
+6 -12
View File
@@ -22,21 +22,15 @@
{{ name }}
<v-btn :disabled="edit" v-model="serverInfo['name']">Enable</v-btn>
</span>
<v-text-field v-else
:hint="value.hint"
:label="value.label"
dense
outlined
v-model="serverInfo[name]"/>
<v-text-field v-else :hint="value.hint" :label="value.label" dense outlined v-model="serverInfo[name]"/>
</v-card-text>
</div>
<div v-else key="viewPanel">
<v-card-text class="pb-0">
<p class="d-flex rounded-lg overflow-hidden" v-for="(value,name) in serverDetails" :key="name">
<span class="pa-3 primary lighten-2 white--text" style="min-width: 25%">{{ value.label }}</span>
<span class="pa-3 grey lighten-3 flex-grow-1">{{ serverInfo[name] }}</span>
</p>
</v-card-text>
<div class="d-flex align-center pb-2" outlined v-for="(value,name) in serverDetails" :key="name">
<span class="cover-fill secondary rounded-r-0 d-inline-block" disabled style="min-width: 25%">{{ value.label }}</span>
<v-text-field dense solo hide-details :hint="value.hint" v-model="serverInfo[name]" class="rounded-l-0">
</v-text-field>
</div>
</div>
</v-fade-transition>
</div>
packages/frontend/src/components/admin/VersionInfoCard.vue
+2 -2
View File
@@ -14,13 +14,13 @@
<div>
<h4 class="primary--text text--lighten-2">
Current </h4>
<p class="primary--text text-h4 text-sm-h2">
<p class="primary--text text-h4 text-sm-h2 speckle-gradient-txt">
{{ versionInfo.current }} </p>
</div>
<v-icon color="primary lighten-1">mdi-arrow-right</v-icon>
<div>
<h4 class="primary--text text--lighten-2">Latest</h4>
<p class="primary--text text-h4 text-sm-h2">
<p class="primary--text text-h4 text-sm-h2 speckle-gradient-txt">
{{ versionInfo.latest }} </p>
</div>
</div>
packages/frontend/src/plugins/vuetify.js
+2 -2
View File
@@ -27,7 +27,7 @@ export default new Vuetify({
info: "#313BCF", //dark blue
success: "#4caf50",
background: "#eeeeee",
text: "#FFFFFF"
text: "#FFFFFF",
},
dark: {
primary: "#047EFB", //blue
@@ -37,7 +37,7 @@ export default new Vuetify({
warning: "#FF9100", //orange
info: "#313BCF", //dark blue
success: "#4caf50",
background: "#3a3b3c"
background: "#3a3b3c",
}
}
},
packages/frontend/src/sass/variables.scss
+15
View File
@@ -1 +1,16 @@
$heading-font-family: 'Space Grotesk';
$primary-base: var(--v-primary-base);
$primary-darken: var(--v-secondary-base);
$primary-gradient: linear-gradient(0deg, $primary-darken 0%, $primary-base 40%);
@mixin speckle-gradient-bg {
background: $primary-base;
background: $primary-gradient;
}
@mixin speckle-gradient-txt {
@include speckle-gradient-bg;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
packages/frontend/src/views/admin/AdminPanel.vue
+9 -6
View File
@@ -1,17 +1,18 @@
<template lang="html">
<v-container>
<v-row>
<v-col cols="12" sm="12" md="4" lg="3" xl="3" class="pt-10">
<v-col cols="12" sm="12" md="4" lg="3" xl="3" class="pt-md-10">
<v-card id="sideMenu" elevation="1" class="rounded-lg overflow-hidden">
<v-card-title>Admin panel</v-card-title>
<v-card-title class="text--secondary font-weight-regular">Admin panel</v-card-title>
<div v-for="child in childRoutes" :key="child.to">
<router-link :to="child.to" v-slot="{ isExactActive, route, navigate }">
<v-hover v-slot="{ hover }" >
<v-hover v-slot="{ hover }">
<span :disabled="isExactActive"
@click="navigate"
:class="{'active-border primary--text': isExactActive,'primary--text': hover}"
class="pa-2 pl-6 text-left d-flex admin-menu-item bold">
<v-icon small class="pr-1" :color="(hover || isExactActive) ? 'primary' : null">{{ child.icon }}</v-icon>
<v-icon small class="pr-1" :color="(hover || isExactActive) ? 'primary' : null">{{ child.icon
}}</v-icon>
{{ child.name }}
</span>
</v-hover>
@@ -20,7 +21,7 @@
</v-card>
</v-col>
<v-col cols="12" sm="12" md="8" lg="9" xl="9" class="pt-10">
<v-col cols="12" sm="12" md="8" lg="9" xl="9" class="pt-md-10">
<v-fade-transition mode="out-in">
<router-view></router-view>
</v-fade-transition>
@@ -66,6 +67,7 @@ export default {
.gray-border {
border-top: 1pt solid var(--v-background-base) !important;
}
.admin-menu-item {
overflow: hidden;
position: relative;
@@ -74,13 +76,14 @@ export default {
transition: 0.5s all ease-out, border-top-color 0s;
&::before {
@include speckle-gradient-bg;
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
background-color: var(--v-primary-base);
transition: all 0.5s ease-in-out, border-top-color 0s;
}
packages/frontend/src/views/admin/AdminUsers.vue
+16 -3
View File
@@ -1,7 +1,20 @@
<template>
<v-container>
<admin-card title="Test card"/>
</v-container>
<div>
<admin-card title="Test card">
<template slot="menu">
<v-btn icon x-small color="primary">
<v-icon small>mdi-pencil</v-icon>
</v-btn>
<v-btn icon x-small color="primary">
<v-icon small>mdi-pencil</v-icon>
</v-btn>
<v-btn icon x-small color="primary">
<v-icon small>mdi-pencil</v-icon>
</v-btn>
</template>
User list goes here!
</admin-card>
</div>
</template>
<script>