Mirror/filebrowser
1
0
Fork 0
mirror of https://github.com/filebrowser/filebrowser.git synced 2024-06-07 23:00:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Settings styles; close #228

Browse Source 
Former-commit-id: b564ba4e357b2d4b18c7f9407395894eb5e18159 [formerly 84ef220a2b10b8ed501c4499ef03d99acc148546] [formerly 00056633e5c2e947201a2dd1ad3bb937821edf61 [formerly e3212cd076]]
Former-commit-id: 866b84d788a5f8a9767affdef17806dbac984db6 [formerly a22d95ba5726dd5ea757410249bef37654213a68]
Former-commit-id: 4600591829c0a41c5de9defc3e30fbac28815e25
This commit is contained in:
Henrique Dias 2017-09-07 18:19:29 +01:00
parent ae19731015
commit 7de22b53b8
18 changed files with 133 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/index.html
View File

@ -25,6 +25,8 @@
<meta name="msapplication-TileImage" content="{{ .BaseURL }}/static/img/icons/msapplication-icon-144x144.png"> <meta name="msapplication-TileImage" content="{{ .BaseURL }}/static/img/icons/msapplication-icon-144x144.png">
<meta name="msapplication-TileColor" content="#2979ff"> <meta name="msapplication-TileColor" content="#2979ff">
<script>CSS = "{{ .CSS }}"</script>
<% for (var chunk of webpack.chunks) { <% for (var chunk of webpack.chunks) {
for (var file of chunk.files) { for (var file of chunk.files) {
if (file.match(/\.(js|css)$/)) { %> if (file.match(/\.(js|css)$/)) { %>
@ -92,7 +94,6 @@
} }
} }
</style> </style>
<style title="global-css" type="text/css">{{ .CSS }}</style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

34
assets/src/App.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<router-view></router-view> <router-view @update:css="updateCSS" @clean:css="cleanCSS"></router-view>
</template> </template>
<script> <script>
export default { export default {
name: 'app', name: 'app',
mounted: function () { mounted () {
// Remove loading animation. // Remove loading animation.
let loading = document.getElementById('loading') let loading = document.getElementById('loading')
loading.classList.add('done') loading.classList.add('done')
@ -13,6 +13,36 @@ export default {
setTimeout(function () { setTimeout(function () {
loading.parentNode.removeChild(loading) loading.parentNode.removeChild(loading)
}, 200) }, 200)
this.updateCSS()
},
methods: {
updateCSS (global = false) {
let css = this.$store.state.css
if (typeof this.$store.state.user.css === 'string' && !global) {
css += '\n' + this.$store.state.user.css
}
this.removeCSS()
let style = document.createElement('style')
style.title = 'custom-css'
style.type = 'text/css'
style.appendChild(document.createTextNode(css))
document.head.appendChild(style)
},
removeCSS () {
let style = document.querySelector('style[title="custom-css"]')
if (style === undefined || style === null) {
return
}
style.parentElement.removeChild(style)
},
cleanCSS () {
this.updateCSS(true)
}
} }
} }
</script> </script>

61
assets/src/css/dashboard.css
View File

@ -94,7 +94,7 @@ p code {
.dashboard #nav li { .dashboard #nav li {
width: 100%; width: 100%;
padding: 0 0 1em; padding: 0 0 1em;
border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 2px solid rgba(0, 0, 0, 0.05);
} }
.dashboard #nav li.active { .dashboard #nav li.active {
@ -358,3 +358,62 @@ table tr>*:last-child {
opacity: 1; opacity: 1;
} }
} }
.collapsible {
border-top: 1px solid rgba(0,0,0,0.1);
}
.collapsible:last-of-type {
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.collapsible > input {
display: none;
}
.collapsible > label {
padding: 1em 0;
cursor: pointer;
border-right: 0;
border-left: 0;
display: flex;
justify-content: space-between;
}
.collapsible > label * {
margin: 0;
color: rgba(0,0,0,0.57);
}
.collapsible > label i {
transition: .2s ease transform
}
.collapsible .collapse {
max-height: 0;
overflow: hidden;
transition: .2s ease all;
}
.collapsible > input:checked ~ .collapse {
padding-top: 1em;
padding-bottom: 1em;
max-height: 20em;
}
.collapsible > input:checked ~ label i {
transform: rotate(180deg)
}
.card .collapsible {
width: calc(100% + 2em);
margin: 0 -1em;
}
.card .collapsible > label {
padding: 1em;
}
.card .collapsible .collapse {
padding: 0 1em;
}

2
assets/src/css/listing.css
View File

@ -159,7 +159,7 @@
#listing.list .item.header { #listing.list .item.header {
display: flex !important; display: flex !important;
background: #f8f8f8; background: #fafafa;
position: fixed; position: fixed;
width: calc(100% - 19em); width: calc(100% - 19em);
top: 7em; top: 7em;

2
assets/src/i18n/en.yaml
View File

@ -117,7 +117,7 @@ settings:
commandsHelp: > commandsHelp: >
Here you can set commands that are executed in the named events. You Here you can set commands that are executed in the named events. You
write one command per line. If the event is related to files, such as before and write one command per line. If the event is related to files, such as before and
after saving, the environment variable "file" will be available with the path after saving, the environment variable "FILE" will be available with the path
of the file. of the file.
commandsUpdated: Commands updated! commandsUpdated: Commands updated!
customStylesheet: Custom Stylesheet customStylesheet: Custom Stylesheet

2
assets/src/i18n/fr.yaml
View File

@ -115,7 +115,7 @@ settings:
commandsHelp: > commandsHelp: >
Ici vous pouvez définir des commandes qui seront exécutées lors de l'évènement correspondant. Ici vous pouvez définir des commandes qui seront exécutées lors de l'évènement correspondant.
Vous devez indiquer une commande par ligne. Si l'évènement est en rapport avec des fichiers, Vous devez indiquer une commande par ligne. Si l'évènement est en rapport avec des fichiers,
par exemple avant et après enregistrement, la variable d'environement "file" sera disponible par exemple avant et après enregistrement, la variable d'environement "FILE" sera disponible
et contiendra le chemin d'accès vers le fichier. et contiendra le chemin d'accès vers le fichier.
commandsUpdated: Commandes mises à jour ! commandsUpdated: Commandes mises à jour !
customStylesheet: Feuille de style personnalisée customStylesheet: Feuille de style personnalisée

2
assets/src/i18n/ja.yaml
View File

@ -118,7 +118,7 @@ settings:
ここで、名前付きイベントに実行するコマンドを設定することができます。\ ここで、名前付きイベントに実行するコマンドを設定することができます。\
一行にコマンド一つを入力してください。\ 一行にコマンド一つを入力してください。\
イベントはファイルに関連する場合、例えばファイル保存の前にまたは後で、\ イベントはファイルに関連する場合、例えばファイル保存の前にまたは後で、\
環境変数 file はファイルのパスに割り当てられます。" 環境変数 FILE はファイルのパスに割り当てられます。"
commandsUpdated: コマンドは更新されました！ commandsUpdated: コマンドは更新されました！
customStylesheet: カスタムスタイルシ ート customStylesheet: カスタムスタイルシ ート
examples: 例 examples: 例

2
assets/src/i18n/pt.yaml
View File

@ -139,7 +139,7 @@ settings:
Pode definir um conjunto de comandos a executar em determiandos eventos. Pode definir um conjunto de comandos a executar em determiandos eventos.
Deve escrever um comando por linha. Se o evento estiver relacionado com ficheiros, Deve escrever um comando por linha. Se o evento estiver relacionado com ficheiros,
como antes e depois de guardar, irá existir uma variável de ambiente denominada como antes e depois de guardar, irá existir uma variável de ambiente denominada
"file" com o caminho do ficheiro. "FILE" com o caminho do ficheiro.
commandsUpdated: Comandos atualizados! commandsUpdated: Comandos atualizados!
customStylesheet: Estilos Personalizados customStylesheet: Estilos Personalizados
examples: Exemplos examples: Exemplos

2
assets/src/i18n/zh-cn.yaml
View File

@ -117,7 +117,7 @@ settings:
commandsHelp: "\ commandsHelp: "\
在这里，您可以设置在指定事件下执行的命令，一行一条。\ 在这里，您可以设置在指定事件下执行的命令，一行一条。\
若事件与文件相关，如“在保存文件前”，\ 若事件与文件相关，如“在保存文件前”，\
则文件的路径会被赋值给环境变量 \"file\"。" 则文件的路径会被赋值给环境变量 \"FILE\"。"
commandsUpdated: 命令已更新！ commandsUpdated: 命令已更新！
customStylesheet: 自定义样式表 customStylesheet: 自定义样式表
examples: 例子 examples: 例子

2
assets/src/i18n/zh-tw.yaml
View File

@ -117,7 +117,7 @@ settings:
commandsHelp: "\ commandsHelp: "\
在這裡，您可以設定在指定事件下執行的命令，一行一條。\ 在這裡，您可以設定在指定事件下執行的命令，一行一條。\
若事件與檔案相關，如“在保存檔案前”，\ 若事件與檔案相關，如“在保存檔案前”，\
則檔案的路徑會被賦值給環境變數 \"file\"。" 則檔案的路徑會被賦值給環境變數 \"FILE\"。"
commandsUpdated: 命令已更新！ commandsUpdated: 命令已更新！
customStylesheet: 自定義樣式表 customStylesheet: 自定義樣式表
examples: 範例 examples: 範例

5
assets/src/store/index.js
View File

@ -12,6 +12,11 @@ const state = {
key: '', key: '',
items: [] items: []
}, },
css: (() => {
let css = window.CSS
window.CSS = null
return css
})(),
staticGen: document.querySelector('meta[name="staticgen"]').getAttribute('content'), staticGen: document.querySelector('meta[name="staticgen"]').getAttribute('content'),
baseURL: document.querySelector('meta[name="base"]').getAttribute('content'), baseURL: document.querySelector('meta[name="base"]').getAttribute('content'),
noAuth: (document.querySelector('meta[name="noauth"]').getAttribute('content') === 'true'), noAuth: (document.querySelector('meta[name="noauth"]').getAttribute('content') === 'true'),

1
assets/src/store/mutations.js
View File

@ -31,6 +31,7 @@ const mutations = {
i18n.locale = value.locale i18n.locale = value.locale
state.user = value state.user = value
}, },
setCSS: (state, value) => (state.css = value),
setJWT: (state, value) => (state.jwt = value), setJWT: (state, value) => (state.jwt = value),
multiple: (state, value) => (state.multiple = value), multiple: (state, value) => (state.multiple = value),
addSelected: (state, value) => (state.selected.push(value)), addSelected: (state, value) => (state.selected.push(value)),

21
assets/src/views/Layout.vue
View File

@ -6,7 +6,7 @@
<site-header></site-header> <site-header></site-header>
<sidebar></sidebar> <sidebar></sidebar>
<main> <main>
<router-view v-on:css-updated="updateCSS"></router-view> <router-view @css="$emit('update:css')"></router-view>
</main> </main>
<prompts></prompts> <prompts></prompts>
</div> </div>
@ -34,23 +34,10 @@ export default {
} }
}, },
mounted () { mounted () {
this.updateCSS() this.$emit('update:css')
}, },
methods: { beforeDestroy () {
updateCSS () { this.$emit('clean:css')
let css = this.$store.state.user.css
let style = document.querySelector('style[title="user-css"]')
if (style !== undefined && style !== null) {
style.parentElement.removeChild(style)
}
style = document.createElement('style')
style.title = 'user-css'
style.type = 'text/css'
style.appendChild(document.createTextNode(css))
document.head.appendChild(style)
}
} }
} }
</script> </script>

2
assets/src/views/Settings.vue
View File

@ -6,7 +6,7 @@
<li :class="{ active: $route.path === '/settings/users' }"><router-link to="/settings/users">{{ $t('settings.userManagement') }}</router-link></li> <li :class="{ active: $route.path === '/settings/users' }"><router-link to="/settings/users">{{ $t('settings.userManagement') }}</router-link></li>
</ul> </ul>
<router-view></router-view> <router-view @css="$emit('css')"></router-view>
</div> </div>
</template> </template>

19
assets/src/views/settings/Global.vue
View File

@ -40,10 +40,17 @@
<div class="card-content"> <div class="card-content">
<p class="small">{{ $t('settings.commandsHelp') }}</p> <p class="small">{{ $t('settings.commandsHelp') }}</p>
<template v-for="command in commands">
<h3>{{ capitalize(command.name) }}</h3> <div v-for="command in commands" :key="command.name" class="collapsible">
<input :id="command.name" type="checkbox">
<label :for="command.name">
<p>{{ capitalize(command.name) }}</p>
<i class="material-icons">arrow_drop_down</i>
</label>
<div class="collapse">
<textarea v-model.trim="command.value"></textarea> <textarea v-model.trim="command.value"></textarea>
</template> </div>
</div>
</div> </div>
<div class="card-action"> <div class="card-action">
@ -73,6 +80,7 @@ export default {
created () { created () {
getSettings() getSettings()
.then(settings => { .then(settings => {
console.log(settings)
if (this.$store.state.staticGen.length > 0) { if (this.$store.state.staticGen.length > 0) {
this.parseStaticGen(settings.staticGen) this.parseStaticGen(settings.staticGen)
} }
@ -120,9 +128,8 @@ export default {
updateSettings(this.css, 'css') updateSettings(this.css, 'css')
.then(() => { .then(() => {
this.$showSuccess(this.$t('settings.settingsUpdated')) this.$showSuccess(this.$t('settings.settingsUpdated'))
let style = document.querySelector('style[title="global-css"]') this.$store.commit('setCSS', this.css)
style.innerHTML = '' this.$emit('css')
style.appendChild(document.createTextNode(this.css))
}) })
.catch(this.$showError) .catch(this.$showError)
}, },

2
assets/src/views/settings/Profile.vue
View File

@ -98,7 +98,7 @@ export default {
updateUser(user, 'partial').then(location => { updateUser(user, 'partial').then(location => {
this.$store.commit('setUser', user) this.$store.commit('setUser', user)
this.$emit('css-updated') this.$emit('css')
this.$showSuccess(this.$t('settings.settingsUpdated')) this.$showSuccess(this.$t('settings.settingsUpdated'))
}).catch(e => { }).catch(e => {
this.$showError(e) this.$showError(e)

5
filemanager.go
View File

@ -128,6 +128,11 @@ func (m *FileManager) Setup() error {
// Tries to get the event commands from the database. // Tries to get the event commands from the database.
// If they don't exist, initialize them. // If they don't exist, initialize them.
err = m.Store.Config.Get("commands", &m.Commands) err = m.Store.Config.Get("commands", &m.Commands)
if err == nil {
// ADD handlers to commands if dont exist
}
if err != nil && err == ErrNotExist { if err != nil && err == ErrNotExist {
m.Commands = map[string][]string{ m.Commands = map[string][]string{
"before_save": {}, "before_save": {},

2
rice-box.go.REMOVED.git-id
View File

@ -1 +1 @@
b8d6da7ded27e9573a9a2bcd23f93528610b6f9a c249fdbec733fcd4aefc255262596bee379c471a