mirror of
https://github.com/filebrowser/filebrowser.git
synced 2025-05-19 00:22:58 +00:00
Settings styles; close #228
Former-commit-id: b564ba4e357b2d4b18c7f9407395894eb5e18159 [formerly 84ef220a2b10b8ed501c4499ef03d99acc148546] [formerly 00056633e5c2e947201a2dd1ad3bb937821edf61 [formerly e3212cd07675750e18c55516c51d669118b9f023]] Former-commit-id: 866b84d788a5f8a9767affdef17806dbac984db6 [formerly a22d95ba5726dd5ea757410249bef37654213a68] Former-commit-id: 4600591829c0a41c5de9defc3e30fbac28815e25
This commit is contained in:
Henrique Dias
parent
ae19731015
commit
7de22b53b8
@ -25,6 +25,8 @@
|
||||
<meta name="msapplication-TileImage" content="{{ .BaseURL }}/static/img/icons/msapplication-icon-144x144.png">
|
||||
<meta name="msapplication-TileColor" content="#2979ff">
|
||||
|
||||
<script>CSS = "{{ .CSS }}"</script>
|
||||
|
||||
<% for (var chunk of webpack.chunks) {
|
||||
for (var file of chunk.files) {
|
||||
if (file.match(/\.(js|css)$/)) { %>
|
||||
@ -92,7 +94,6 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style title="global-css" type="text/css">{{ .CSS }}</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
<router-view @update:css="updateCSS" @clean:css="cleanCSS"></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'app',
|
||||
mounted: function () {
|
||||
mounted () {
|
||||
// Remove loading animation.
|
||||
let loading = document.getElementById('loading')
|
||||
loading.classList.add('done')
|
||||
@ -13,6 +13,36 @@ export default {
|
||||
setTimeout(function () {
|
||||
loading.parentNode.removeChild(loading)
|
||||
}, 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>
|
||||
|
||||
@ -94,7 +94,7 @@ p code {
|
||||
.dashboard #nav li {
|
||||
width: 100%;
|
||||
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 {
|
||||
@ -358,3 +358,62 @@ table tr>*:last-child {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -159,7 +159,7 @@
|
||||
|
||||
#listing.list .item.header {
|
||||
display: flex !important;
|
||||
background: #f8f8f8;
|
||||
background: #fafafa;
|
||||
position: fixed;
|
||||
width: calc(100% - 19em);
|
||||
top: 7em;
|
||||
|
||||
@ -117,7 +117,7 @@ settings:
|
||||
commandsHelp: >
|
||||
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
|
||||
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.
|
||||
commandsUpdated: Commands updated!
|
||||
customStylesheet: Custom Stylesheet
|
||||
|
||||
@ -115,7 +115,7 @@ settings:
|
||||
commandsHelp: >
|
||||
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,
|
||||
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.
|
||||
commandsUpdated: Commandes mises à jour !
|
||||
customStylesheet: Feuille de style personnalisée
|
||||
|
||||
@ -118,7 +118,7 @@ settings:
|
||||
ここで、名前付きイベントに実行するコマンドを設定することができます。\
|
||||
一行にコマンド一つを入力してください。\
|
||||
イベントはファイルに関連する場合、例えばファイル保存の前にまたは後で、\
|
||||
環境変数 file はファイルのパスに割り当てられます。"
|
||||
環境変数 FILE はファイルのパスに割り当てられます。"
|
||||
commandsUpdated: コマンドは更新されました！
|
||||
customStylesheet: カスタムスタイルシ ート
|
||||
examples: 例
|
||||
|
||||
@ -139,7 +139,7 @@ settings:
|
||||
Pode definir um conjunto de comandos a executar em determiandos eventos.
|
||||
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
|
||||
"file" com o caminho do ficheiro.
|
||||
"FILE" com o caminho do ficheiro.
|
||||
commandsUpdated: Comandos atualizados!
|
||||
customStylesheet: Estilos Personalizados
|
||||
examples: Exemplos
|
||||
|
||||
@ -117,7 +117,7 @@ settings:
|
||||
commandsHelp: "\
|
||||
在这里，您可以设置在指定事件下执行的命令，一行一条。\
|
||||
若事件与文件相关，如“在保存文件前”，\
|
||||
则文件的路径会被赋值给环境变量 \"file\"。"
|
||||
则文件的路径会被赋值给环境变量 \"FILE\"。"
|
||||
commandsUpdated: 命令已更新！
|
||||
customStylesheet: 自定义样式表
|
||||
examples: 例子
|
||||
|
||||
@ -117,7 +117,7 @@ settings:
|
||||
commandsHelp: "\
|
||||
在這裡，您可以設定在指定事件下執行的命令，一行一條。\
|
||||
若事件與檔案相關，如“在保存檔案前”，\
|
||||
則檔案的路徑會被賦值給環境變數 \"file\"。"
|
||||
則檔案的路徑會被賦值給環境變數 \"FILE\"。"
|
||||
commandsUpdated: 命令已更新！
|
||||
customStylesheet: 自定義樣式表
|
||||
examples: 範例
|
||||
|
||||
@ -12,6 +12,11 @@ const state = {
|
||||
key: '',
|
||||
items: []
|
||||
},
|
||||
css: (() => {
|
||||
let css = window.CSS
|
||||
window.CSS = null
|
||||
return css
|
||||
})(),
|
||||
staticGen: document.querySelector('meta[name="staticgen"]').getAttribute('content'),
|
||||
baseURL: document.querySelector('meta[name="base"]').getAttribute('content'),
|
||||
noAuth: (document.querySelector('meta[name="noauth"]').getAttribute('content') === 'true'),
|
||||
|
||||
@ -31,6 +31,7 @@ const mutations = {
|
||||
i18n.locale = value.locale
|
||||
state.user = value
|
||||
},
|
||||
setCSS: (state, value) => (state.css = value),
|
||||
setJWT: (state, value) => (state.jwt = value),
|
||||
multiple: (state, value) => (state.multiple = value),
|
||||
addSelected: (state, value) => (state.selected.push(value)),
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<site-header></site-header>
|
||||
<sidebar></sidebar>
|
||||
<main>
|
||||
<router-view v-on:css-updated="updateCSS"></router-view>
|
||||
<router-view @css="$emit('update:css')"></router-view>
|
||||
</main>
|
||||
<prompts></prompts>
|
||||
</div>
|
||||
@ -34,23 +34,10 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.updateCSS()
|
||||
this.$emit('update:css')
|
||||
},
|
||||
methods: {
|
||||
updateCSS () {
|
||||
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)
|
||||
}
|
||||
beforeDestroy () {
|
||||
this.$emit('clean:css')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<li :class="{ active: $route.path === '/settings/users' }"><router-link to="/settings/users">{{ $t('settings.userManagement') }}</router-link></li>
|
||||
</ul>
|
||||
|
||||
<router-view></router-view>
|
||||
<router-view @css="$emit('css')"></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -40,10 +40,17 @@
|
||||
|
||||
<div class="card-content">
|
||||
<p class="small">{{ $t('settings.commandsHelp') }}</p>
|
||||
<template v-for="command in commands">
|
||||
<h3>{{ capitalize(command.name) }}</h3>
|
||||
<textarea v-model.trim="command.value"></textarea>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-action">
|
||||
@ -73,6 +80,7 @@ export default {
|
||||
created () {
|
||||
getSettings()
|
||||
.then(settings => {
|
||||
console.log(settings)
|
||||
if (this.$store.state.staticGen.length > 0) {
|
||||
this.parseStaticGen(settings.staticGen)
|
||||
}
|
||||
@ -120,9 +128,8 @@ export default {
|
||||
updateSettings(this.css, 'css')
|
||||
.then(() => {
|
||||
this.$showSuccess(this.$t('settings.settingsUpdated'))
|
||||
let style = document.querySelector('style[title="global-css"]')
|
||||
style.innerHTML = ''
|
||||
style.appendChild(document.createTextNode(this.css))
|
||||
this.$store.commit('setCSS', this.css)
|
||||
this.$emit('css')
|
||||
})
|
||||
.catch(this.$showError)
|
||||
},
|
||||
|
||||
@ -98,7 +98,7 @@ export default {
|
||||
|
||||
updateUser(user, 'partial').then(location => {
|
||||
this.$store.commit('setUser', user)
|
||||
this.$emit('css-updated')
|
||||
this.$emit('css')
|
||||
this.$showSuccess(this.$t('settings.settingsUpdated'))
|
||||
}).catch(e => {
|
||||
this.$showError(e)
|
||||
|
||||
@ -128,6 +128,11 @@ func (m *FileManager) Setup() error {
|
||||
// Tries to get the event commands from the database.
|
||||
// If they don't exist, initialize them.
|
||||
err = m.Store.Config.Get("commands", &m.Commands)
|
||||
|
||||
if err == nil {
|
||||
// ADD handlers to commands if dont exist
|
||||
}
|
||||
|
||||
if err != nil && err == ErrNotExist {
|
||||
m.Commands = map[string][]string{
|
||||
"before_save": {},
|
||||
|
||||
@ -1 +1 @@
|
||||
b8d6da7ded27e9573a9a2bcd23f93528610b6f9a
|
||||
c249fdbec733fcd4aefc255262596bee379c471a
|
||||
Loading…
x
Reference in New Issue
Block a user