ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: add vite-svg-loader and add Logo component (#971)

Browse Source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/971
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
This commit is contained in:
dpschen
2021-11-13 14:16:14 +00:00
committed by konrad
parent 8e6e52bf02
commit 30cc89fe25
22 changed files with 335 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/home/Logo.vue Normal file
View File

@ -0,0 +1,11 @@
<script setup lang="ts">
import { computed } from 'vue'
import LogoFull from '@/assets/logo-full.svg?component'
import LogoFullPride from '@/assets/logo-full-pride.svg?component'
const Logo = computed(() => new Date().getMonth() === 5 ? LogoFullPride : LogoFull)
</script>
<template>
<Logo alt="Vikunja" />
</template>

75
src/components/home/MenuButton.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<button
type="button"
@click="$store.commit('toggleMenu')"
class="menu-show-button"
@shortkey="() => $store.commit('toggleMenu')"
v-shortkey="['ctrl', 'e']"
:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
/>
</template>
<script setup>
import { computed} from 'vue'
import {store} from '@/store'
const menuActive = computed(() => store.menuActive)
</script>
<style lang="scss" scoped>
$lineWidth: 2rem;
$size: $lineWidth + 1rem;
.menu-show-button {
// FIXME: create general button component
appearance: none;
background-color: transparent;
border: 0;
min-height: $size;
width: $size;
position: relative;
$transformX: translateX(-50%);
&::before,
&::after {
content: '';
display: block;
position: absolute;
height: 3px;
width: $lineWidth;
left: 50%;
transform: $transformX;
background-color: $grey-400;
border-radius: 2px;
transition: all $transition;
}
&::before {
top: 50%;
transform: $transformX translateY(-0.4rem)
}
&::after {
bottom: 50%;
transform: $transformX translateY(0.4rem)
}
&:hover,
&:focus {
&::before,
&::after {
background-color: $grey-600;
}
&::before {
transform: $transformX translateY(-0.5rem);
}
&::after {
transform: $transformX translateY(0.5rem)
}
}
}
</style>

20
src/components/home/PoweredByLink.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<a class="menu-bottom-link" :href="poweredByUrl" target="_blank" rel="noreferrer noopener nofollow">
{{ $t('misc.poweredBy') }}
</a>
</template>
<script setup lang="ts">
import {POWERED_BY as poweredByUrl} from '@/urls'
</script>
<style lang="scss">
.menu-bottom-link {
color: $grey-300;
text-align: center;
display: block;
padding-top: 1rem;
padding-bottom: 1rem;
font-size: .8rem;
}
</style>

28
src/components/home/contentAuth.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<a @click="$store.commit('menuActive', false)" class="menu-hide-button" v-if="menuActive">
<icon icon="times"></icon>
<icon icon="times" />
</a>
<div
:class="{'has-background': background}"
@ -134,6 +134,32 @@ export default {
</script>
<style lang="scss" scoped>
.menu-hide-button {
position: fixed;
top: 0.5rem;
right: 0.5rem;
z-index: 31;
width: 3rem;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
color: $grey-400;
line-height: 1;
transition: all $transition;
@media screen and (min-width: $tablet) {
display: none;
}
&:hover,
&:focus {
height: 1rem;
color: $grey-600;
}
}
.app-container {
min-height: calc(100vh - 65px);

60
src/components/home/contentLinkShare.vue
View File

@ -6,7 +6,7 @@
>
<div class="container has-text-centered link-share-view">
<div class="column is-10 is-offset-1">
<img alt="Vikunja" class="logo" :src="logoUrl" />
<Logo class="logo" />
<h1
:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
class="title">
@ -14,9 +14,7 @@
</h1>
<div class="box has-text-left view">
<router-view/>
<a class="menu-bottom-link" href="https://vikunja.io" target="_blank" rel="noreferrer noopener nofollow">
{{ $t('misc.poweredBy') }}
</a>
<PoweredByLink />
</div>
</div>
</div>
@ -25,51 +23,45 @@
<script>
import {mapState} from 'vuex'
import {CURRENT_LIST} from '@/store/mutation-types'
import logoUrl from '@/assets/logo-full.svg'
import Logo from '@/components/home/Logo.vue'
import PoweredByLink from './PoweredByLink.vue'
export default {
name: 'contentLinkShare',
data() {
return {
logoUrl,
}
components: {
Logo,
PoweredByLink,
},
computed: mapState({
currentList: CURRENT_LIST,
background: 'background',
}),
computed: mapState([
'currentList',
'background',
]),
}
</script>
<style lang="scss" scoped>
.link-share-container.has-background .view {
background: transparent;
background-color: transparent;
border: none;
.logout .button {
box-shadow: none;
}
}
.link-share-view {
.logo {
max-width: 300px;
width: 90%;
margin: 2rem 0 1.5rem;
}
.logo {
max-width: 300px;
width: 90%;
margin: 2rem 0 1.5rem;
}
.column {
max-width: 100%;
}
.column {
max-width: 100%;
}
.card {
background: $white;
}
.title {
.title {
text-shadow: 0 0 1rem $white;
}
}
// FIXME: this should be defined somewhere deep
.link-share-view .card {
background-color: $white;
}
</style>

13
src/components/home/contentNoAuth.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="no-auth-wrapper">
<div class="noauth-container">
<img alt="Vikunja" :src="logoUrl" width="400" height="117" />
<Logo width="400" height="117" />
<div class="message is-info" v-if="motd !== ''">
<div class="message-header">
<p>{{ $t('misc.info') }}</p>
@ -18,16 +18,13 @@
<script>
import {mapState} from 'vuex'
import logoUrl from '@/assets/logo-full.svg'
import Logo from '@/components/home/Logo.vue'
import { saveLastVisited } from '@/helpers/saveLastVisited'
export default {
name: 'contentNoAuth',
data() {
return {
logoUrl,
}
},
components: { Logo },
computed: {
routeName() {
return this.$route.name
@ -68,7 +65,7 @@ export default {
<style lang="scss" scoped>
.no-auth-wrapper {
background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background;
background: url('@/assets/llama.svg?url') no-repeat bottom left fixed $light-background;
min-height: 100vh;
}

43
src/components/home/navigation.vue
View File

@ -2,7 +2,7 @@
<div :class="{'is-active': menuActive}" class="namespace-container">
<div class="menu top-menu">
<router-link :to="{name: 'home'}" class="logo">
<img alt="Vikunja" :src="logoUrl" width="164" height="48"/>
<Logo width="164" height="48" />
</router-link>
<ul class="menu-list">
<li>
@ -146,25 +146,34 @@
</div>
</template>
</aside>
<a class="menu-bottom-link" :href="poweredByUrl" target="_blank" rel="noreferrer noopener nofollow">
{{ $t('misc.poweredBy') }}
</a>
<PoweredByLink />
</div>
</template>
<script>
import {mapState} from 'vuex'
import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
import draggable from 'vuedraggable'
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
import draggable from 'vuedraggable'
import {calculateItemPosition} from '@/helpers/calculateItemPosition'
import {POWERED_BY} from '@/urls'
import PoweredByLink from '@/components/home/PoweredByLink.vue'
import Logo from '@/components/home/Logo.vue'
import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
import {calculateItemPosition} from '@/helpers/calculateItemPosition'
import logoUrl from '@/assets/logo-full.svg'
export default {
name: 'navigation',
components: {
ListSettingsDropdown,
NamespaceSettingsDropdown,
draggable,
Logo,
PoweredByLink,
},
data() {
return {
listsVisible: {},
@ -174,15 +183,8 @@ export default {
ghostClass: 'ghost',
},
listUpdating: {},
logoUrl,
poweredByUrl: POWERED_BY,
}
},
components: {
ListSettingsDropdown,
NamespaceSettingsDropdown,
draggable,
},
computed: {
...mapState({
namespaces: state => state.namespaces.namespaces.filter(n => !n.isArchived),
@ -517,10 +519,13 @@ $vikunja-nav-selected-width: 0.4rem;
}
.logo {
display: none;
display: block;
@media screen and (max-width: $tablet) {
display: block;
padding-left: 2rem;
margin-right: 1rem;
@media screen and (min-width: $tablet) {
display: none;
}
}

62
src/components/home/topNavigation.vue
View File

@ -5,24 +5,11 @@
class="navbar main-theme is-fixed-top"
role="navigation"
>
<div class="navbar-brand">
<router-link :to="{name: 'home'}" class="navbar-item logo">
<img width="164" height="48" alt="Vikunja" :src="logoUrl" />
</router-link>
<a
@click="$store.commit('toggleMenu')"
class="menu-show-button"
@shortkey="() => $store.commit('toggleMenu')"
v-shortkey="['ctrl', 'e']"
>
</a>
</div>
<a
@click="$store.commit('toggleMenu')"
class="menu-show-button"
>
</a>
<div class="list-title" ref="listTitle" :style="{'display': currentList.id ? '': 'none'}">
<router-link :to="{name: 'home'}" class="logo">
<Logo width="164" height="48" />
</router-link>
<MenuButton class="menu-button" />
<div class="list-title" ref="listTitle" v-show="currentList.id">
<template v-if="currentList.id">
<h1
:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
@ -101,9 +88,8 @@ import Update from '@/components/home/update.vue'
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
import Dropdown from '@/components/misc/dropdown.vue'
import Notifications from '@/components/notifications/notifications.vue'
import logoUrl from '@/assets/logo-full.svg'
import logoFullPrideUrl from '@/assets/logo-full-pride.svg'
import Logo from '@/components/home/Logo.vue'
import MenuButton from '@/components/home/MenuButton.vue'
export default {
name: 'topNavigation',
@ -112,11 +98,10 @@ export default {
Dropdown,
ListSettingsDropdown,
Update,
Logo,
MenuButton,
},
computed: {
logoUrl() {
return (new Date()).getMonth() === 5 ? logoFullPrideUrl : logoUrl
},
...mapState({
userInfo: state => state.auth.info,
userAvatar: state => state.auth.avatarUrl,
@ -155,19 +140,26 @@ $vikunja-nav-logo-full-width: 164px;
.navbar {
z-index: 4 !important;
}
.navbar-brand {
.logo {
display: none;
@media screen and (min-width: $tablet) {
align-self: stretch;
display: flex;
align-items: center;
.logo img {
width: $vikunja-nav-logo-full-width;
}
padding-left: 2rem;
margin-right: 1.5rem;
}
&.is-dark .navbar-brand > .navbar-item {
@media screen and (max-width: $tablet) {
margin: 0 auto;
}
}
.menu-button {
align-self: stretch;
margin-right: auto;
@media screen and (max-width: $tablet) {
margin-left: $hamburger-menu-icon-spacing;
}
}
@ -197,10 +189,6 @@ $vikunja-nav-logo-full-width: 164px;
}
@media screen and (max-width: $tablet) {
.navbar-brand {
display: none;
}
.user {
width: $user-dropdown-width-mobile;
display: flex;