Mercurial > gemma

comparison client/src/components/App.vue @ 2566:83b938bf4da9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
author Markus Kottlaender <markus@intevation.de>
date Mon, 11 Mar 2019 11:34:54 +0100
parents 99dc71e012ad
children 8774054959a7
comparison
equal deleted inserted replaced
2565:114979e97a6c 2566:83b938bf4da9
1 <template> 1 <template>
2 <div id="app" class="main"> 2 <div id="app" class="main">
3 <div v-if="isAuthenticated" class="d-flex flex-column userinterface"> 3 <div v-if="isAuthenticated" class="d-flex flex-column userinterface">
4 <div class="topbar d-flex pt-2 mx-2"> 4 <div class="d-flex p-2">
5 <div class="mr-auto d-flex"> 5 <div class="mr-auto d-flex">
6 <Sidebar :routeName="routeName"></Sidebar> 6 <Sidebar :routeName="routeName"></Sidebar>
7 <div :class="searchContainer"> 7 <div :class="searchContainer">
8 <Search v-if="isMapVisible"></Search> 8 <Search v-if="isMapVisible"></Search>
9 <Contextbox v-if="isMapVisible"></Contextbox> 9 <Contextbox v-if="isMapVisible"></Contextbox>
19 <Layers v-if="isMapVisible"></Layers> 19 <Layers v-if="isMapVisible"></Layers>
20 </div> 20 </div>
21 <Toolbar v-if="isMapVisible"></Toolbar> 21 <Toolbar v-if="isMapVisible"></Toolbar>
22 </div> 22 </div>
23 </div> 23 </div>
24 <div class="flex-fill"></div>
25 <div class="d-flex flex-row align-items-end">
26 <Infobar v-if="isMapVisible"></Infobar>
27 </div>
28 <Zoom v-if="isMapVisible"></Zoom> 24 <Zoom v-if="isMapVisible"></Zoom>
29 <Splitscreen v-if="isMapVisible" /> 25 <Splitscreen v-if="isMapVisible" />
26 <MinimizedSplitscreens v-if="isMapVisible" />
30 </div> 27 </div>
31 <router-view /> 28 <router-view />
32 <vue-snotify></vue-snotify> 29 <vue-snotify></vue-snotify>
33 <Popup /> 30 <Popup />
34 </div> 31 </div>
41 left: 0; 38 left: 0;
42 right: 0; 39 right: 0;
43 bottom: 0; 40 bottom: 0;
44 z-index: 4; 41 z-index: 4;
45 pointer-events: none; 42 pointer-events: none;
46 }
47
48 .topbar {
49 position: relative;
50 z-index: 2;
51 } 43 }
52 44
53 #app { 45 #app {
54 height: 100%; 46 height: 100%;
55 width: 100%; 47 width: 100%;
101 ]; 93 ];
102 } 94 }
103 }, 95 },
104 components: { 96 components: {
105 Profiles: () => import("./fairway/Profiles"), 97 Profiles: () => import("./fairway/Profiles"),
106 Infobar: () => import("./fairway/Infobar"),
107 Pdftool: () => import("./Pdftool"), 98 Pdftool: () => import("./Pdftool"),
108 Zoom: () => import("./Zoom"), 99 Zoom: () => import("./Zoom"),
109 Identify: () => import("./identify/Identify"), 100 Identify: () => import("./identify/Identify"),
110 Layers: () => import("./layers/Layers"), 101 Layers: () => import("./layers/Layers"),
111 Sidebar: () => import("./Sidebar"), 102 Sidebar: () => import("./Sidebar"),
112 Search: () => import("./Search"), 103 Search: () => import("./Search"),
113 Contextbox: () => import("./Contextbox"), 104 Contextbox: () => import("./Contextbox"),
114 Toolbar: () => import("./toolbar/Toolbar"), 105 Toolbar: () => import("./toolbar/Toolbar"),
115 Popup: () => import("./Popup"), 106 Popup: () => import("./Popup"),
116 Splitscreen: () => import("./Splitscreen") 107 Splitscreen: () => import("./splitscreen/Splitscreen"),
108 MinimizedSplitscreens: () => import("./splitscreen/MinimizedSplitscreens")
117 } 109 }
118 }; 110 };
119 </script> 111 </script>