Mercurial > gemma
annotate client/src/application/Topbar.vue @ 770:c12ec7fde3f2
client: add simple identify top area box
* Add Identify.vue as a top area box that display the currently identified
features in a short text-only way. This can be styled further, also
the box is not yet resized dynamically. Put in to subdir layers because
it is closest to Layers.vue, which was used as a template.
* Introduce a new mapstore/identifiedFeatures state.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Wed, 26 Sep 2018 09:13:29 +0200 |
parents | badbc0207418 |
children | 22c3acea700d |
rev | line source |
---|---|
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
2 <div class="topbar d-flex flex-row"> |
638
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
3 <div @click="toggleSidebar"> |
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
4 <i class="ui-element menubutton fa fa-bars"></i> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
5 </div> |
713
badbc0207418
feat: systeminformation feature added
Thomas Junk <thomas.junk@intevation.de>
parents:
668
diff
changeset
|
6 <div v-if="routeName == 'mainview'" :class="searchbarContainerStyle"> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
7 <div class="input-group-prepend shadow"> |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
8 <span @click="toggleSearchbar" class="ui-element input-group-text searchlabel" for="search"> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
9 <i class="fa fa-search"></i> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
10 </span> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
11 </div> |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
12 <input v-if="!searchbarCollapsed" id="search" type="text" class="form-control ui-element search searchbar"> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
13 </div> |
713
badbc0207418
feat: systeminformation feature added
Thomas Junk <thomas.junk@intevation.de>
parents:
668
diff
changeset
|
14 <div v-if="routeName == 'mainview'" class="splitbutton"> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
15 <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
16 </div> |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
17 <div class=""> |
713
badbc0207418
feat: systeminformation feature added
Thomas Junk <thomas.junk@intevation.de>
parents:
668
diff
changeset
|
18 <Layers v-if="routeName == 'mainview'"></Layers> |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
19 </div> |
770
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
713
diff
changeset
|
20 <div class=""> |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
713
diff
changeset
|
21 <Identify v-if="routeName == 'mainview'"></Identify> |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
713
diff
changeset
|
22 </div> |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
23 </div> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
24 </template> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
25 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
26 <style lang="scss"> |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
27 .splitbutton { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
28 height: $icon-height; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
29 } |
593
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
587
diff
changeset
|
30 .splitscreen { |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
587
diff
changeset
|
31 background-color: white; |
632
f2097d2aa048
fix: adjusted icon sizes
Thomas Junk <thomas.junk@intevation.de>
parents:
630
diff
changeset
|
32 padding: $small-offset; |
638
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
33 margin-right: $small-offset; |
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
34 margin-left: $offset; |
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
35 border-radius: $border-radius; |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
36 height: $icon-height; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
37 width: $icon-width; |
593
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
587
diff
changeset
|
38 } |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
587
diff
changeset
|
39 |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
40 .menubutton { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
41 background-color: white; |
632
f2097d2aa048
fix: adjusted icon sizes
Thomas Junk <thomas.junk@intevation.de>
parents:
630
diff
changeset
|
42 padding: $small-offset; |
638
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
43 border-radius: $border-radius; |
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
44 margin-left: $offset; |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
45 height: $icon-height; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
46 width: $icon-width; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
47 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
48 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
49 .searchcontainer { |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
50 height: $icon-height; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
51 border-radius: 0.25rem; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
52 } |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
53 |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
54 .searchbar-expanded { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
55 margin-left: 22vw; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
56 margin-right: auto; |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
57 width: $searchbar-width !important; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
58 } |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
59 |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
60 .searchbar-collapsed { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
61 margin-left: auto; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
62 margin-right: $small-offset; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
63 width: $icon-width !important; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
64 transition: $transition-fast; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
65 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
66 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
67 .searchbar { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
68 margin-left: auto; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
69 margin-right: auto; |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
70 height: $icon-height !important; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
71 } |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
72 |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
73 .searchlabel { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
74 background-color: white !important; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
75 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
76 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
77 .topbar { |
638
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
78 padding-top: $offset; |
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
79 margin-right: $offset; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
80 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
81 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
82 .logout { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
83 font-size: x-large; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
84 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
85 </style> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
86 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
87 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
88 <script> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
89 import Layers from "../layers/Layers"; |
770
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
713
diff
changeset
|
90 import Identify from "../layers/Identify"; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
91 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
92 export default { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
93 name: "topbar", |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
94 components: { |
770
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
713
diff
changeset
|
95 Identify: Identify, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
96 Layers: Layers |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
97 }, |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
98 data() { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
99 return { |
713
badbc0207418
feat: systeminformation feature added
Thomas Junk <thomas.junk@intevation.de>
parents:
668
diff
changeset
|
100 searchbarCollapsed: true |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
101 }; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
102 }, |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
103 computed: { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
104 searchbarContainerStyle() { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
105 return { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
106 "input-group": true, |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
107 searchcontainer: true, |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
108 "searchbar-collapsed": this.searchbarCollapsed, |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
109 "searchbar-expanded": !this.searchbarCollapsed |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
110 }; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
111 } |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
112 }, |
649
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
638
diff
changeset
|
113 props: ["routeName"], |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
114 methods: { |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
115 toggleSearchbar() { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
116 this.searchbarCollapsed = !this.searchbarCollapsed; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
117 }, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
118 toggleSidebar() { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
119 this.$store.commit("application/toggleSidebar"); |
593
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
587
diff
changeset
|
120 }, |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
587
diff
changeset
|
121 splitScreen() { |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
587
diff
changeset
|
122 this.$store.commit("application/toggleSplitScreen"); |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
123 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
124 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
125 }; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
126 </script> |