Skip to content

Commit 30fab91

Browse files
hawkeye64hawkeye64
committed
feat(demo): add icons route/page
1 parent 1717569 commit 30fab91

File tree

11 files changed

+198
-21
lines changed

11 files changed

+198
-21
lines changed

‎demo/src/components/EssentialLinks.vue‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
<q-item-label caption>Documentation</q-item-label>
1010
</q-item-section>
1111
</q-item>
12-
<q-item clickable to="/demo">
12+
<q-item clickable to="/icons">
1313
<q-item-section avatar>
1414
<q-icon name="bolt" />
1515
</q-item-section>
1616
<q-item-section>
17-
<q-item-label>QIconPicker demo</q-item-label>
18-
<q-item-label caption>Interactively play with properties</q-item-label>
17+
<q-item-label>Icons</q-item-label>
18+
<q-item-label caption>Quasar Icon Sets</q-item-label>
1919
</q-item-section>
2020
</q-item>
2121
<q-item clickable to="/examples">
@@ -27,6 +27,15 @@
2727
<q-item-label caption>Examples of how to do it</q-item-label>
2828
</q-item-section>
2929
</q-item>
30+
<q-item clickable to="/demo">
31+
<q-item-section avatar>
32+
<q-icon name="bolt" />
33+
</q-item-section>
34+
<q-item-section>
35+
<q-item-label>QIconPicker demo</q-item-label>
36+
<q-item-label caption>Interactively play with properties</q-item-label>
37+
</q-item-section>
38+
</q-item>
3039
<q-separator />
3140
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/app-extension-qiconpicker">
3241
<q-item-section avatar>

‎demo/src/components/Hero.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@
44
<h1 class="project-name">QIconPicker</h1>
55
<h2 class="project-tagline"></h2>
66
<q-btn type="a" href="https://github.com/quasarframework/app-extension-qiconpicker" target="_blank" class="btn" label="View on GitHub" no-caps flat/>
7+
<q-btn to="/icons" class="btn" label="Icons" no-caps flat/>
78
<q-btn to="/docs" class="btn" label="Docs" no-caps flat/>
89
<q-btn to="/examples" class="btn" label="Examples" no-caps flat/>
910
<q-btn to="/demo" class="btn" label="Interactive Demo" no-caps flat/>
1011
<q-btn type="a" href="https://donate.quasar.dev" target="_blank" class="btn" label="Donate" no-caps flat/>
1112
</section>
1213
<main class="flex flex-start justify-center inset-shadow">
1314
<div class="q-pa-md col-12-sm col-8-md col-6-lg inset-shadow" style="width: 100%; height: 3px;" />
14-
<div class="q-pa-md col-12-sm col-8-md col-6-lg bg-white shadow-1" style="max-width: 800px; width: 100%;">
15+
<div v-if="hideSection !== true" class="q-pa-md col-12-sm col-8-md col-6-lg bg-white shadow-1" style="max-width: 800px; width: 100%;">
1516
<slot></slot>
1617
</div>
1718
</main>
@@ -20,6 +21,10 @@
2021

2122
<script>
2223
export default {
23-
name: 'Hero'
24+
name: 'Hero',
25+
26+
props: {
27+
hideSection: Boolean
28+
}
2429
}
2530
</script>

‎demo/src/layouts/IconPickerLayout.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<q-icon name="menu" />
1414
</q-btn>
1515

16-
<q-icon name="far fa-calendar-alt" class="q-ml-md" size="1.5rem"></q-icon>
16+
<q-icon name="bolt" class="q-ml-md" size="1.5rem"></q-icon>
1717

1818
<q-toolbar-title v-if="$q.screen.width > 500">
1919
QIconPicker

‎demo/src/layouts/IconsLayout.vue‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template>
2+
<q-layout view="HHh LpR fFf">
3+
<q-header elevated>
4+
<q-toolbar>
5+
<q-btn
6+
flat
7+
dense
8+
round
9+
@click="leftDrawerOpen = !leftDrawerOpen"
10+
aria-label="Menu"
11+
>
12+
<q-icon name="menu" />
13+
</q-btn>
14+
15+
<q-toolbar-title v-if="$q.screen.width > 500">
16+
QIconPicker
17+
<q-tooltip v-if="$q.screen.width < 1077">
18+
QIconPicker
19+
</q-tooltip>
20+
</q-toolbar-title>
21+
22+
<div>Quasar v{{ $q.version }}</div>
23+
24+
</q-toolbar>
25+
</q-header>
26+
27+
<q-drawer
28+
v-model="leftDrawerOpen"
29+
bordered
30+
content-style="background-color: #f8f8ff"
31+
>
32+
<q-list>
33+
<q-item-label header>
34+
<q-icon name="fas fa-link" size="1.5em" class="q-mr-md" /><span style="font-size: 1.5em">Essential Links</span></q-item-label>
35+
</q-list>
36+
<essential-links />
37+
</q-drawer>
38+
39+
<q-page-container>
40+
<router-view />
41+
</q-page-container>
42+
</q-layout>
43+
</template>
44+
45+
<script>
46+
import { mapGetters } from 'vuex'
47+
import { scroll } from 'quasar'
48+
49+
export default {
50+
name: 'MyLayout',
51+
components: {
52+
'essential-links': () => import('../components/EssentialLinks')
53+
},
54+
data () {
55+
return {
56+
leftDrawerOpen: this.$q.platform.is.desktop
57+
}
58+
},
59+
mounted () {
60+
// code to handle anchor link on refresh/new page, etc
61+
if (location.hash !== '') {
62+
const id = location.hash.substring(1, location.hash.length)
63+
setTimeout(() => {
64+
this.scrollTo(id)
65+
}, 200)
66+
}
67+
},
68+
computed: {
69+
...mapGetters({
70+
toc: 'common/toc'
71+
})
72+
},
73+
methods: {
74+
scrollTo (id) {
75+
this.activeToc = id
76+
const el = document.getElementById(id)
77+
78+
if (el) {
79+
this.scrollPage(el)
80+
}
81+
},
82+
scrollPage (el) {
83+
const offset = el.offsetTop - 50
84+
scroll.setScrollPosition(window, offset, 500)
85+
}
86+
}
87+
}
88+
</script>

‎demo/src/layouts/MainLayout.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@
4040
content-style="background-color: #f8f8ff"
4141
>
4242
<q-list>
43-
<q-item-label header>Essential Links</q-item-label>
43+
<q-item-label header>
44+
<q-icon name="fas fa-link" size="1.5em" class="q-mr-md" /><span style="font-size: 1.5em">Essential Links</span></q-item-label>
4445
</q-list>
4546
<essential-links />
4647
</q-drawer>

‎demo/src/pages/IconPicker.vue‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@
5656
</q-card-section>
5757
<q-card-section>
5858
<p>You can use the QInput as a bit of a filter, by typing part of an icon, then clicking on the icon button. The results will then be filtered to show only matching icons. Clear the text before selecting a new icon to see all of them.</p>
59-
<p>Note: This example is using Material Icons.</p>
6059
</q-card-section>
6160
</q-card>
6261

@@ -78,17 +77,6 @@ export default {
7877
value: '',
7978
name: 'material-icons',
8079
filter: '',
81-
iconSets: [
82-
{ label: 'Eva Icons', value: 'eva-icons' },
83-
{ label: 'Fontawesome Icons', value: 'fontawesome-v5' },
84-
{ label: 'Ion Icons', value: 'ionicons-v4' },
85-
{ label: 'Material Icons', value: 'material-icons' },
86-
{ label: 'Material Icons Outlined', value: 'material-icons-outlined' },
87-
{ label: 'Material Icons Round', value: 'material-icons-round' },
88-
{ label: 'Material Icons Sharp', value: 'material-icons-sharp' },
89-
{ label: 'MDI Icons', value: 'mdi-v3' },
90-
{ label: 'Themify Icons', value: 'themify' }
91-
],
9280
showIconPicker: false,
9381
pagination: {
9482
itemsPerPage: 60,
@@ -100,7 +88,8 @@ export default {
10088
...mapGetters({
10189
tooltips: 'iconpicker/tooltips',
10290
dense: 'iconpicker/dense',
103-
noFooter: 'iconpicker/noFooter'
91+
noFooter: 'iconpicker/noFooter',
92+
iconSets: 'common/iconSets'
10493
}),
10594
10695
title () {

‎demo/src/pages/Icons.vue‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<template>
2+
<q-page>
3+
<div class="row q-pa-md q-gutter-sm items-center">
4+
<q-select v-model="iconSet" :options="iconSets" label="Icon Set" emit-value style="min-width: 200px;" />
5+
<q-separator vertical inset />
6+
<span>Count: {{ pagination.total }}</span>
7+
<q-separator vertical inset />
8+
<span>Selected: <mark>{{ name }}</mark></span>
9+
<q-separator vertical inset />
10+
<q-icon :name="name" size="3em" />
11+
<q-separator v-if="name && name.length > 0" vertical inset />
12+
</div>
13+
<q-separator style="width: 100%;"/>
14+
<q-icon-picker
15+
v-model="name"
16+
:icon-set="iconSet"
17+
font-size="3em"
18+
tooltips
19+
:pagination.sync="pagination"
20+
style="height: calc(100vh - 140px)"
21+
/>
22+
</q-page>
23+
</template>
24+
25+
<script>
26+
import { mapGetters } from 'vuex'
27+
28+
export default {
29+
name: 'Icons',
30+
31+
data () {
32+
return {
33+
name: '',
34+
pagination: {
35+
itemsPerPage: 0,
36+
page: 0,
37+
total: 0
38+
}
39+
}
40+
},
41+
42+
computed: {
43+
...mapGetters({
44+
iconSets: 'common/iconSets'
45+
}),
46+
47+
iconSet: {
48+
get () {
49+
return this.$store.state.common.iconSet
50+
},
51+
set (b) {
52+
this.$store.commit('common/iconSet', b)
53+
}
54+
}
55+
}
56+
}
57+
</script>
58+
59+
<style>
60+
</style>

‎demo/src/router/routes.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,13 @@ const routes = [
1111
{ path: '', component: () => import('pages/Index.vue') }
1212
]
1313
},
14+
{
15+
path: '/icons',
16+
component: () => import('layouts/IconsLayout.vue'),
17+
children: [
18+
{ path: '', component: () => import('pages/Icons.vue') }
19+
]
20+
},
1421
{
1522
path: '/examples',
1623
component: () => import('layouts/MainLayout.vue'),

‎demo/src/store/common/getters.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
export const toc = (state) => state.toc
2+
export const iconSet = (state) => state.iconSet
3+
export const iconSets = (state) => state.iconSets

‎demo/src/store/common/mutations.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
export const toc = (state, toc) => {
22
state.toc = toc
33
}
4+
5+
export const iconSet = (state, iconSet) => {
6+
state.iconSet = iconSet
7+
}

0 commit comments

Comments
 (0)