mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-26 07:13:41 +01:00
Code Issues Projects Releases Wiki Activity

Collapse menu (#274)

Browse Source 
* Tries to implement collapse menu

* Fixes using hiding

* Fixes tests

* Updates styles

* Adds better styles for collapse

* Fixes tests
This commit is contained in:
Amir Raminfar
2020-02-14 10:48:03 -08:00
committed by GitHub
parent 2333084085
commit c5b84959c0
6 changed files with 73 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/App.spec.js
View File

@@ -8,7 +8,7 @@ const localVue = createLocalVue();
localVue.use(Vuex);
describe("<App />", () => {
const stubs = { RouterLink: RouterLinkStub, "router-view": true };
const stubs = { RouterLink: RouterLinkStub, "router-view": true, "ion-icon": true };
let store;
beforeEach(() => {

40
assets/App.vue
View File

@@ -1,8 +1,9 @@
<template lang="html">
<main>
<mobile-menu v-if="isMobile"></mobile-menu>
<splitpanes @resized="onResize($event)">
<pane min-size="10" :size="settings.menuWidth" v-if="!isMobile">
<splitpanes @resized="onResized($event)">
<pane min-size="10" :size="settings.menuWidth" v-if="!isMobile" v-show="!collapseNav">
<side-menu></side-menu>
</pane>
<pane min-size="10">
@@ -22,6 +23,17 @@
</splitpanes>
</pane>
</splitpanes>
<button
@click="collapseNav = !collapseNav"
class="button is-small is-rounded is-settings-control"
:class="{ collapsed: collapseNav }"
id="hide-nav"
v-if="!isMobile"
>
<span class="icon">
<ion-icon :name="collapseNav ? 'arrow-dropright' : 'arrow-dropleft'" size="large"></ion-icon>
</span>
</button>
</main>
</template>
@@ -51,7 +63,7 @@ export default {
data() {
return {
title: "",
showNav: false
collapseNav: false
};
},
metaInfo() {
@@ -68,6 +80,7 @@ export default {
if (this.hasSmallerScrollbars) {
document.documentElement.classList.add("has-custom-scrollbars");
}
this.menuWidth = this.settings.menuWidth;
},
watch: {
hasSmallerScrollbars(newValue, oldValue) {
@@ -90,9 +103,10 @@ export default {
removeActiveContainer: "REMOVE_ACTIVE_CONTAINER",
updateSetting: "UPDATE_SETTING"
}),
onResize(e) {
onResized(e) {
if (e.length == 2) {
this.updateSetting({ menuWidth: Math.min(90, e[0].size) });
const menuWidth = e[0].size;
this.updateSetting({ menuWidth });
}
}
}
@@ -115,4 +129,20 @@ export default {
.has-min-height {
min-height: 100vh;
}
#hide-nav {
position: fixed;
left: 10px;
bottom: 10px;
&.collapsed {
left: -40px;
width: 60px;
padding-left: 40px;
background: rgba(0, 0, 0, 0.95);
&:hover {
left: -25px;
}
}
}
</style>

14
assets/__snapshots__/App.spec.js.snap
View File

@@ -37,5 +37,19 @@ exports[`<App /> renders correctly 1`] = `
</splitpanes-stub>
</pane-stub>
</splitpanes-stub>
<button
class="button is-small is-rounded is-settings-control"
id="hide-nav"
>
<span
class="icon"
>
<ion-icon-stub
name="arrow-dropleft"
size="large"
/>
</span>
</button>
</main>
`;

2
assets/components/SideMenu.vue
View File

@@ -8,7 +8,7 @@
<router-link
:to="{ name: 'settings' }"
active-class="is-active"
class="button is-small is-primary is-rounded is-inverted is-outlined "
class="button is-small is-rounded is-settings-control"
>
<span class="icon"><ion-icon name="settings" size="large"></ion-icon></span>
</router-link>

2
assets/index.html
View File

@@ -16,7 +16,7 @@
<script nomodule="" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.js"></script>
</head>
<body class="is-dark">
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>

26
assets/styles.scss
View File

@@ -9,13 +9,10 @@ $menu-item-color: hsl(0, 6%, 87%);
@import "~buefy/src/scss/components/_dropdown";
@import "~buefy/src/scss/components/_switch";
.is-dark {
color: #ddd;
background-color: #111;
}
body {
font-family: "Roboto", sans-serif;
color: #ddd;
background-color: #111;
}
h1.title {
@@ -56,3 +53,22 @@ html.has-custom-scrollbars {
scrollbar-width: thin;
}
}
.is-settings-control {
background: rgba(0, 0, 0, 0.4);
color: #fff;
border-color: transparent;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&:hover {
border-color: rgb(255, 221, 87) !important;
background: rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
&:focus {
box-shadow: none !important;
color: unset;
border-color: transparent;
}
}