Skip to content

Commit

Permalink
Fixed: Move components rendering into vue files
Browse files Browse the repository at this point in the history
  • Loading branch information
mbnuqw committed Jan 28, 2021
1 parent 555e490 commit 6578ba0
Show file tree
Hide file tree
Showing 6 changed files with 201 additions and 241 deletions.
133 changes: 1 addition & 132 deletions addon/settings/settings.html
Original file line number Diff line number Diff line change
Expand Up @@ -93,138 +93,7 @@
<svg id="icon_none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 8a4 4 0 01-6.03 3.45l5.48-5.48c.35.6.55 1.29.55 2.03zm-7.45 2.03l5.48-5.48a4 4 0 00-5.48 5.48zM14 8A6 6 0 112 8a6 6 0 0112 0z"/></svg>
</div>

<div
id="root"
class="root"
:data-style="$store.state.style"
:data-animations="$store.state.animations ? 'fast' : 'none'">

<nav class="nav">
<div>
<div
class="option"
:data-active="$store.state.activeView === 'Settings'"
@click="navigateTo('')">{{t('settings.nav_settings')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_general'"
@click="navigateTo('settings_general')">{{t('settings.nav_settings_general')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_menu'"
@click="navigateTo('settings_menu')">{{t('settings.nav_settings_menu')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_nav'"
@click="navigateTo('settings_nav')">{{t('settings.nav_settings_nav')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_group'"
@click="navigateTo('settings_group')">{{t('settings.nav_settings_group')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_containers'"
@click="navigateTo('settings_containers')">{{t('settings.nav_settings_containers')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_panels'"
@click="navigateTo('settings_panels')">{{t('settings.nav_settings_panels')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_dnd'"
@click="navigateTo('settings_dnd')">{{t('settings.nav_settings_dnd')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_tabs'"
@click="navigateTo('settings_tabs')">{{t('settings.nav_settings_tabs')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_new_tab_position'"
@click="navigateTo('settings_new_tab_position')">{{t('settings.nav_settings_new_tab_position')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_pinned_tabs'"
@click="navigateTo('settings_pinned_tabs')">{{t('settings.nav_settings_pinned_tabs')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_tabs_tree'"
@click="navigateTo('settings_tabs_tree')">{{t('settings.nav_settings_tabs_tree')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_bookmarks'"
@click="navigateTo('settings_bookmarks')">{{t('settings.nav_settings_bookmarks')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_appearance'"
@click="navigateTo('settings_appearance')">{{t('settings.nav_settings_appearance')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_mouse'"
@click="navigateTo('settings_mouse')">{{t('settings.nav_settings_mouse')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_keybindings'"
@click="navigateTo('settings_keybindings')">{{t('settings.nav_settings_keybindings')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_permissions'"
@click="navigateTo('settings_permissions')">{{t('settings.nav_settings_permissions')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_snapshots'"
@click="navigateTo('settings_snapshots')">{{t('settings.nav_settings_snapshots')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_storage'"
@click="navigateTo('settings_storage')">{{t('settings.nav_settings_storage')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_sync'"
@click="navigateTo('settings_sync')">{{t('settings.nav_settings_sync')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'settings_help'"
@click="navigateTo('settings_help')">{{t('settings.nav_settings_help')}}</div>

<div
class="option"
:data-active="$store.state.activeView === 'MenuEditor'"
@click="navigateTo('menu_editor')">{{t('settings.nav_menu')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'menu_editor_tabs'"
@click="navigateTo('menu_editor_tabs')">{{t('settings.nav_menu_tabs')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'menu_editor_tabs_panel'"
@click="navigateTo('menu_editor_tabs_panel')">{{t('settings.nav_menu_tabs_panel')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'menu_editor_bookmarks'"
@click="navigateTo('menu_editor_bookmarks')">{{t('settings.nav_menu_bookmarks')}}</div>
<div
class="sub-option"
:data-active="$store.state.activeSection === 'menu_editor_bookmarks_panel'"
@click="navigateTo('menu_editor_bookmarks_panel')">{{t('settings.nav_menu_bookmarks_panel')}}</div>

<div
class="option"
:data-active="$store.state.activeView === 'StylesEditor'"
@click="navigateTo('styles_editor')">{{t('settings.nav_styles')}}</div>

<div
class="option"
:data-active="$store.state.activeView === 'Snapshots'"
@click="navigateTo('snapshots')">{{t('settings.nav_snapshots')}}</div>
</div>
</nav>

<transition name="settings" mode="out-in">
<keep-alive>
<component :is="$store.state.activeView"></component>
</keep-alive>
</transition>
</div>
<div id="app"></div>

<script src="./settings.js" defer></script>
</body>
Expand Down
15 changes: 1 addition & 14 deletions addon/sidebar/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -199,20 +199,7 @@
<svg id="icon_close_other_tabs" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M13 0l3 5h-2v1h-2V5h-2l3-5zM.4 4.6L3.8 8 .4 11.4l1.2 1.2L5 9.2l3.4 3.4.6-.6v-1L8 9.7 6.1 8 8 6.3 9 5V4l-.6-.6L5 6.8 1.6 3.4.4 4.6zM15 9V7h-4v2h4zM16 11l-3 5-3-5h2v-1h2v1h2z"/></svg>
</div>

<div
id="root"
class="root"
:data-nav-layout="$store.state.navBarLayout"
:data-native-scrollbar="$store.state.nativeScrollbars"
:data-theme="$store.state.theme"
:data-style="$store.state.style"
:data-animations="animations"
:data-pinned-tabs-position="pinnedTabsPosition"
:data-pinned-tabs-list="$store.state.pinnedTabsList"
:data-tabs-tree-lvl-marks="$store.state.tabsLvlDots"
:data-tabs-close-btn="$store.state.showTabRmBtn">
<sidebar ref="sidebar"></sidebar>
</div>
<div id="app"></div>

<script src="sidebar.js" defer></script>
</body>
Expand Down
27 changes: 3 additions & 24 deletions src/page.settings/settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,7 @@ import SwitchView from './mixins/switch-view'
import Store from './store'
import State from './store/state'
import Actions from './actions'
import Settings from './settings.vue'
import MenuEditor from './components/menu-editor.vue'
import StylesEditor from './components/styles-editor.vue'
import Snapshots from './components/snapshots.vue'
import Setup from './setup.vue'

Actions.updateActiveView()

Expand All @@ -22,20 +19,9 @@ Vue.directive('debounce', Debounce)
initMsgHandling(State, Actions)

export default new Vue({
el: '#root',
el: '#app',
store: Store,

components: {
Settings,
MenuEditor,
StylesEditor,
Snapshots,
},

data() {
return {}
},

async created() {
window.addEventListener('hashchange', Actions.updateActiveView)

Expand All @@ -56,12 +42,5 @@ export default new Vue({
Actions.loadFavicons()
},

methods: {
/**
* Update url hash
*/
navigateTo(urlHash) {
location.hash = urlHash
},
},
render: h => h(Setup),
})
123 changes: 123 additions & 0 deletions src/page.settings/setup.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<template lang="pug">
#root.root(
:data-style="$store.state.style"
:data-animations="$store.state.animations ? 'fast' : 'none'")
.nav
div
.option(
:data-active="$store.state.activeView === 'Settings'"
@click="navigateTo('')") {{t('settings.nav_settings')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_general'"
@click="navigateTo('settings_general')") {{t('settings.nav_settings_general')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_menu'"
@click="navigateTo('settings_menu')") {{t('settings.nav_settings_menu')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_nav'"
@click="navigateTo('settings_nav')") {{t('settings.nav_settings_nav')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_group'"
@click="navigateTo('settings_group')") {{t('settings.nav_settings_group')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_containers'"
@click="navigateTo('settings_containers')") {{t('settings.nav_settings_containers')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_panels'"
@click="navigateTo('settings_panels')") {{t('settings.nav_settings_panels')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_dnd'"
@click="navigateTo('settings_dnd')") {{t('settings.nav_settings_dnd')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_tabs'"
@click="navigateTo('settings_tabs')") {{t('settings.nav_settings_tabs')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_new_tab_position'"
@click="navigateTo('settings_new_tab_position')") {{t('settings.nav_settings_new_tab_position')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_pinned_tabs'"
@click="navigateTo('settings_pinned_tabs')") {{t('settings.nav_settings_pinned_tabs')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_tabs_tree'"
@click="navigateTo('settings_tabs_tree')") {{t('settings.nav_settings_tabs_tree')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_bookmarks'"
@click="navigateTo('settings_bookmarks')") {{t('settings.nav_settings_bookmarks')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_appearance'"
@click="navigateTo('settings_appearance')") {{t('settings.nav_settings_appearance')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_mouse'"
@click="navigateTo('settings_mouse')") {{t('settings.nav_settings_mouse')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_keybindings'"
@click="navigateTo('settings_keybindings')") {{t('settings.nav_settings_keybindings')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_permissions'"
@click="navigateTo('settings_permissions')") {{t('settings.nav_settings_permissions')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_snapshots'"
@click="navigateTo('settings_snapshots')") {{t('settings.nav_settings_snapshots')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_storage'"
@click="navigateTo('settings_storage')") {{t('settings.nav_settings_storage')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_sync'"
@click="navigateTo('settings_sync')") {{t('settings.nav_settings_sync')}}
.sub-option(
:data-active="$store.state.activeSection === 'settings_help'"
@click="navigateTo('settings_help')") {{t('settings.nav_settings_help')}}

.option(
:data-active="$store.state.activeView === 'MenuEditor'"
@click="navigateTo('menu_editor')") {{t('settings.nav_menu')}}
.sub-option(
:data-active="$store.state.activeSection === 'menu_editor_tabs'"
@click="navigateTo('menu_editor_tabs')") {{t('settings.nav_menu_tabs')}}
.sub-option(
:data-active="$store.state.activeSection === 'menu_editor_tabs_panel'"
@click="navigateTo('menu_editor_tabs_panel')") {{t('settings.nav_menu_tabs_panel')}}
.sub-option(
:data-active="$store.state.activeSection === 'menu_editor_bookmarks'"
@click="navigateTo('menu_editor_bookmarks')") {{t('settings.nav_menu_bookmarks')}}
.sub-option(
:data-active="$store.state.activeSection === 'menu_editor_bookmarks_panel'"
@click="navigateTo('menu_editor_bookmarks_panel')") {{t('settings.nav_menu_bookmarks_panel')}}

.option(
:data-active="$store.state.activeView === 'StylesEditor'"
@click="navigateTo('styles_editor')") {{t('settings.nav_styles')}}

.option(
:data-active="$store.state.activeView === 'Snapshots'"
@click="navigateTo('snapshots')") {{t('settings.nav_snapshots')}}

transition(name="settings" mode="out-in")
keep-alive
component(:is="$store.state.activeView")
</template>

<script>
import Settings from './settings.vue'
import MenuEditor from './components/menu-editor.vue'
import StylesEditor from './components/styles-editor.vue'
import Snapshots from './components/snapshots.vue'
export default {
components: {
Settings,
MenuEditor,
StylesEditor,
Snapshots,
},
methods: {
/**
* Update url hash
*/
navigateTo(urlHash) {
location.hash = urlHash
},
},
}
</script>
24 changes: 3 additions & 21 deletions src/sidebar/sidebar.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,29 +25,9 @@ Vue.mixin(initActionsMixin(Actions))
initMsgHandling(State, Actions)

export default new Vue({
el: '#root',
el: '#app',
store: Store,

components: {
Sidebar,
},

data() {
return {}
},

computed: {
pinnedTabsPosition() {
if (!Store.getters.pinnedTabs.length) return 'none'
return State.pinnedTabsPosition
},

animations() {
if (!Store.state.animations) return 'none'
else return Store.state.animationSpeed || 'fast'
},
},

async created() {
State.instanceType = 'sidebar'

Expand Down Expand Up @@ -106,4 +86,6 @@ export default new Vue({
Handlers.resetKeybindingListeners()
Handlers.resetHandlers()
},

render: h => h(Sidebar),
})
Loading

0 comments on commit 6578ba0

Please sign in to comment.