From 66b07578c57dbdce81c58e3192b1be3a1279e25a Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 1 Aug 2020 10:53:23 +0900 Subject: [PATCH] Fold sidebar (#6610) * wip * wip --- locales/ja-JP.yml | 6 + src/client/app.vue | 62 +++++------ src/client/components/sidebar.vue | 136 ++++++++++++++--------- src/client/components/ui/radio.vue | 6 +- src/client/pages/preferences/sidebar.vue | 15 ++- src/client/store.ts | 1 + 6 files changed, 138 insertions(+), 88 deletions(-) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 06b53f26a..e87a1af90 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -556,6 +556,12 @@ testEmail: "配信テスト" wordMute: "ワードミュート" userSaysSomething: "{name}が何かを言いました" makeActive: "アクティブにする" +display: "表示" + +_sidebar: + full: "フル" + icon: "アイコン" + hide: "隠す" _wordMute: muteWords: "ミュートするワード" diff --git a/src/client/app.vue b/src/client/app.vue index dcd393db3..32777e21b 100644 --- a/src/client/app.vue +++ b/src/client/app.vue @@ -1,6 +1,6 @@ -
+
@@ -85,7 +85,7 @@
- +
@@ -124,6 +124,7 @@ export default Vue.extend({ isDesktop: window.innerWidth >= DESKTOP_THRESHOLD, canBack: false, menuDef: this.$store.getters.nav({}), + navHidden: false, wallpaper: localStorage.getItem('wallpaper') != null, faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faProjectDiagram }; @@ -225,22 +226,15 @@ export default Vue.extend({ }, mounted() { - const adjustTitlePosition = () => { - const left = this.$refs.main.getBoundingClientRect().left - this.$refs.nav.$el.offsetWidth; - if (left >= 0) { - this.$refs.title.style.left = left + 'px'; - } - }; - - adjustTitlePosition(); + this.adjustTitlePosition(); const ro = new ResizeObserver((entries, observer) => { - adjustTitlePosition(); + this.adjustTitlePosition(); }); ro.observe(this.$refs.contents); - window.addEventListener('resize', adjustTitlePosition, { passive: true }); + window.addEventListener('resize', this.adjustTitlePosition, { passive: true }); if (!this.isDesktop) { window.addEventListener('resize', () => { @@ -250,9 +244,27 @@ export default Vue.extend({ // widget follow this.attachSticky(); + + this.$nextTick(() => { + this.calcHeaderWidth(); + }); }, methods: { + adjustTitlePosition() { + const left = this.$refs.main.getBoundingClientRect().left - this.$refs.nav.$el.offsetWidth; + if (left >= 0) { + this.$refs.title.style.left = left + 'px'; + } + }, + + calcHeaderWidth() { + const navWidth = this.$refs.nav.$el.offsetWidth; + this.navHidden = navWidth === 0; + this.$refs.header.style.width = `calc(100% - ${navWidth}px)`; + this.adjustTitlePosition(); + }, + showNav() { this.$refs.nav.show(); }, @@ -373,12 +385,8 @@ export default Vue.extend({