Skip to content

Commit

Permalink
Update header and main page
Browse files Browse the repository at this point in the history
  • Loading branch information
hacklover committed Mar 26, 2021
1 parent 325c325 commit 1f7d5fe
Show file tree
Hide file tree
Showing 13 changed files with 366 additions and 138 deletions.
10 changes: 9 additions & 1 deletion assets/styles/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,14 @@

#app {
&.theme--dark {
background: #161616 !important;
background: #212121;
}

.v-menu__content {
box-shadow: 0 0 0 1px rgba(255,255,255,0.05);

.v-divider {
border-color: rgba(255,255,255,0.05);
}
}
}
61 changes: 50 additions & 11 deletions components/Logo.vue
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
<template>
<div :class="['logo', {'logo-square': square, 'logo-small': small}]">
<div :class="['logo', {'logo--square': square, 'logo--small': small, 'logo--large': large}]">
<div class="logo-content">

<v-btn color="#2775a7">
<v-icon>mdi-flask-outline</v-icon>
</v-btn>

<v-btn color="#2775a7">
<v-icon>mdi-format-color-fill</v-icon>
</v-btn>

<v-btn color="#4c4c4c">
<v-icon>mdi-radio</v-icon>
</v-btn>

<v-btn color="#f0584a">
<v-icon>mdi-patreon</v-icon>
</v-btn>
Expand All @@ -25,16 +29,16 @@ export default {
props: {
square: Boolean,
small: Boolean,
large: Boolean,
}
}
</script>

<style scoped lang="scss">
.logo {
.logo-content {
display: inline-block;
margin: 0 auto;
height: 114px;
padding: 3px 5px;
border-radius: 7px;
user-select: none;
overflow: hidden;
Expand Down Expand Up @@ -64,16 +68,57 @@ export default {
}
}
&.logo-square {
&--large {
display: inline-block;
.logo-content {
display: inline-block;
vertical-align: -6px;
margin-right: 10px;
.v-btn {
box-sizing: border-box;
width: 28px;
min-width: auto !important;
min-height: 28px;
.v-icon {
font-size: 17px;
&.mdi-format-color-fill {
top: 3px;
left: 1px;
font-size: 22px;
}
&.mdi-radio {
top: -1px;
font-size: 20px;
}
&.mdi-patreon {
font-size: 18px;
}
}
}
}
.v-toolbar__title {
display: inline-block;
}
}
&--square {
.logo-content {
width: 115px;
}
}
&.logo-small {
&--small {
width: 40px;
.logo-content {
display: inline-block;
width: 34px;
height: 34px;
line-height: 16px;
Expand All @@ -99,11 +144,5 @@ export default {
}
}
}
.v-toolbar__title {
position: absolute;
top: 2px;
left: calc(100% + 28px);
}
}
</style>
13 changes: 9 additions & 4 deletions components/footer/Footer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<v-col>

<div class="footer-links mb-6">
<a :href="owdLinkRepository" target="_blank">
<a :href="owdLinkRepository + '/tree/next'" target="_blank">
<v-icon size="28">mdi-github</v-icon>
</a>
<a :href="socialLinkTwitter" target="_blank">
Expand All @@ -21,9 +21,9 @@
<div class="footer-copyright">
<p class="mb-0">
Released under the
<a :href="`${owdLinkRepository}/blob/master/LICENSE`" target="_blank">MIT License</a>
<a :href="`${owdLinkRepository}/blob/master/LICENSE`" target="_blank">GNU GPL 3.0 License</a>
<br />
Copyright &copy; 2020 hacklover
Copyright &copy; 2021 <a href="https://hacklover.net" target="_blank" class="credits">hacklover#2552</a>
</p>
</div>

Expand All @@ -44,7 +44,8 @@
<style scoped lang="scss">
.v-footer {
user-select: none;
box-shadow: inset 0 1px 0 0 #2e2e2e !important;
background: #1E1E1E;
border-top: 1px solid rgba(255,255,255,0.05) !important;
.footer-links {
a {
Expand All @@ -60,6 +61,10 @@
a {
color: #999;
}
a.credits {
color: inherit;
}
}
}
</style>
62 changes: 12 additions & 50 deletions components/header/Header.vue
Original file line number Diff line number Diff line change
@@ -1,77 +1,39 @@
<template>
<v-toolbar max-height="64px" height="64px" elevation="0">
<Logo square small :class="['mr-12', {'visible': visible}]">
<v-toolbar-title>Open Web Desktop</v-toolbar-title>

<Logo large class="mr-12" style="pointer-events: none;">
<v-toolbar-title class="font-weight-bold hidden-md-and-down">Open Web Desktop</v-toolbar-title>
</Logo>

<v-spacer />

<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-btn text class="ml-2" :icon="$vuetify.breakpoint.xsOnly" v-on="on">
<v-icon :left="$vuetify.breakpoint.smAndUp">mdi-text-box-outline</v-icon>
<span class="hidden-xs-only" v-text="`Documentation`" />
</v-btn>
</template>
<span>Not available</span>
</v-tooltip>

<v-btn text class="ml-2" :icon="$vuetify.breakpoint.xsOnly" :href="owdLinkModules" target="_blank">
<v-icon :left="$vuetify.breakpoint.smAndUp">mdi-puzzle</v-icon>
<span class="hidden-xs-only" v-text="`Modules`" />
</v-btn>
<HeaderMenuClient />
<HeaderMenuModules />

<v-btn text class="ml-2" :icon="$vuetify.breakpoint.xsOnly" :href="owdLinkRepository" target="_blank">
<v-icon :left="$vuetify.breakpoint.smAndUp">mdi-github</v-icon>
<span class="hidden-xs-only" v-text="`GitHub`" />
</v-btn>
</v-toolbar>
</template>

<script>
import mixinLinks from "../../mixins/mixinLinks";
import mixinLinks from "@/mixins/mixinLinks";
import Logo from "~/components/Logo";
import {mapGetters} from "vuex";
import HeaderMenuClient from "./menu/HeaderMenuClient";
import HeaderMenuModules from "./menu/HeaderMenuModules";
export default {
name: "Header",
components: {Logo},
components: {HeaderMenuModules, HeaderMenuClient, Logo},
mixins: [mixinLinks],
data() {
return {
visible: false
}
},
computed: {
...mapGetters({
'demoActive': 'demo/active'
})
},
mounted() {
this.$store.subscribe((mutation) => {
if (mutation.type === 'demo/SET_DEMO_LOADED') {
this.visible = mutation.payload
}
if (mutation.type === 'demo/SET_DEMO_ACTIVE') {
this.visible = mutation.payload
}
})
}
}
</script>

<style lang="scss">
.v-toolbar {
<style scoped lang="scss">
.theme--dark.v-toolbar.v-sheet {
background: #1E1E1E;
user-select: none;
.logo {
transition: transform 1s ease-in-out;
transform: translateX(-56px);
will-change: transform;
&.visible {
transform: translateX(8px);
}
}
}
</style>
110 changes: 110 additions & 0 deletions components/header/menu/HeaderMenuClient.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<template>
<v-menu
:close-on-content-click="false"
:min-width="320"
nudge-bottom="66"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
text class="ml-2" :icon="$vuetify.breakpoint.xsOnly"
>
<v-icon :left="$vuetify.breakpoint.smAndUp">mdi-hexagon-multiple-outline</v-icon>
<span class="hidden-xs-only" v-text="`OWD Client`" />
</v-btn>
</template>

<v-card>
<v-list>
<v-list-item>
<v-list-item-avatar tile>
<img
src="favicon.png"
alt="Open Web Desktop"
>
</v-list-item-avatar>

<v-list-item-content>
<v-list-item-title>OWD Client</v-list-item-title>
<v-list-item-subtitle v-text="repositoryLastTagNext" />
</v-list-item-content>

<v-list-item-action>
<v-icon>mdi-github</v-icon>
</v-list-item-action>
</v-list-item>
</v-list>

<v-divider/>

<v-list dense>
<v-list-item-group
color="primary"
>
<v-list-item :href="owdLinkRepository + '/tree/next'" target="_blank">
<v-list-item-icon>
<v-icon>mdi-open-in-new</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>OWD Client {{repositoryLastTagNext}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item :href="owdLinkRepository" target="_blank">
<v-list-item-icon>
<v-icon>mdi-open-in-new</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>OWD Client {{repositoryLastTagCurrent}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>

<v-divider/>

<v-card-actions>
<v-spacer />

<v-btn text :href="socialLinkPatreon" target="_blank">
Patreon
</v-btn>
<v-btn text :href="socialLinkLiberaPay" target="_blank">
LiberaPay
</v-btn>
</v-card-actions>
</v-card>
</v-menu>
</template>

<script>
import mixinLinks from "@/mixins/mixinLinks";
export default {
mixins: [mixinLinks],
computed: {
repositoryLastTagCurrent() {
const tag = this.$store.getters["repository/lastTagCurrent"]
if (tag) {
return tag.name.replace('v', '')
}
return ""
},
repositoryLastTagNext() {
const tag = this.$store.getters["repository/lastTagNext"]
if (tag) {
return tag.name.replace('v', '')
}
return ""
}
}
}
</script>

<style scoped lang="scss">
</style>
Loading

0 comments on commit 1f7d5fe

Please sign in to comment.