|
1 | 1 | <template> |
2 | 2 | <main> |
3 | | - <div class="uk-position-center" v-if="loading"> |
| 3 | + <div class="oc-position-center" v-if="loading"> |
4 | 4 | <oc-spinner size="xlarge" /> |
5 | 5 | <p v-translate class="oc-invisible">Loading app</p> |
6 | 6 | </div> |
7 | | - <div id="leftBar"> |
8 | | - <select id="mode-select" v-model="viewMode" @change="renderViewer"> |
9 | | - <option v-for="item in items" :key="item" :value="item"> |
10 | | - {{ item }} |
11 | | - </option> |
12 | | - </select> |
13 | | - <button @click="exit">Exit</button> |
14 | | - <div id="treeViewer"></div> |
| 7 | + <div class="oc-flex root-viewer"> |
| 8 | + <div id="web-nav-sidebar" class="root-sidebar app-navigation oc-app-navigation-expanded"> |
| 9 | + <select id="mode-select" v-model="viewMode" @change="renderViewer"> |
| 10 | + <option v-for="item in items" :key="item" :value="item"> |
| 11 | + {{ item }} |
| 12 | + </option> |
| 13 | + </select> |
| 14 | + <button @click="exit">Exit</button> |
| 15 | + <div id="treeViewer"></div> |
| 16 | + </div> |
| 17 | + <div id="mainViewer" class="oc-flex oc-height-1-1 app-content oc-width-1-1"></div> |
15 | 18 | </div> |
16 | | - <div id="mainViewer"></div> |
17 | 19 | </main> |
18 | 20 | </template> |
19 | 21 | <script> |
@@ -43,7 +45,7 @@ export default { |
43 | 45 | } |
44 | 46 | }, |
45 | 47 | created() { |
46 | | - this.isPublic = this.$route.name === 'rootjs-public' |
| 48 | + this.isPublic = this.$route.params.contextRouteName === 'files-public-files' |
47 | 49 | const filePath = `/${this.$route.params.filePath.split('/').filter(Boolean).join('/')}` |
48 | 50 | this.url = getFileUrl(this.$client, this.isPublic, filePath) |
49 | 51 | this.viewMode = this.items[0] |
@@ -76,30 +78,22 @@ export default { |
76 | 78 | </script> |
77 | 79 |
|
78 | 80 | <style> |
79 | | -#leftBar { |
80 | | - position: fixed; |
81 | | - top: 0; |
82 | | - left: 0; |
83 | | - bottom: 0; |
84 | | - width: 250px; |
| 81 | +.app-container { |
| 82 | + /* FIXME make app compatible with dark mode */ |
| 83 | + background-color: white !important; |
| 84 | +} |
| 85 | +.root-viewer { |
85 | 86 | height: 100%; |
86 | | - border: none; |
87 | | - margin: 0; |
88 | | - padding: 0; |
89 | | - overflow: hidden; |
90 | | - float: left; |
| 87 | +} |
| 88 | +.root-sidebar { |
| 89 | + /* FIXME make app compatible with dark mode */ |
| 90 | + background-color: white !important; |
| 91 | + display: block !important; |
| 92 | + padding: 10px; |
| 93 | + overflow: scroll !important; |
| 94 | + box-sizing: border-box; |
91 | 95 | } |
92 | 96 | #mainViewer { |
93 | | - position: fixed; |
94 | | - top: 0; |
95 | | - bottom: 0; |
96 | | - right: 0; |
97 | | - width: calc(100% - 250px); |
98 | | - height: 100%; |
99 | | - border: none; |
100 | | - margin: 0; |
101 | | - padding: 0; |
102 | | - overflow: hidden; |
103 | | - float: right; |
| 97 | + padding: 10px; |
104 | 98 | } |
105 | 99 | </style> |
0 commit comments