YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

uniformize description list and buttons

Browse source
This commit is contained in:
Axolotle 2020-11-25 16:20:59 +01:00
parent c0e0b97ae6
commit 7ce154d597
4 changed files with 103 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/src/scss/main.scss
View file

@ -61,27 +61,20 @@ body {
display: block;
}
// <b-row /> elems with <b-col> inside and eventually .sep inside
// Descriptive list (<b-row /> elems with <b-col> inside)
.row-line {
&:hover > div > :first-child {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 0.2rem;
padding: 0 .5rem;
margin-right: -.5rem;
margin-left: -.5rem;
@include media-breakpoint-up(md) {
&:hover {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 0.2rem;
}
}
& > div {
align-self: flex-start;
display: flex;
align-items: center;
// display a dashed line between col items
.sep {
height: 0;
border-top: 1px dashed rgba(0, 0, 0, 0.25);
flex-grow: 1;
margin: 0 .75rem;
}
@include media-breakpoint-down(sm) {
flex-direction: column;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: $border-width solid $card-border-color;
}
}

52
app/src/views/app/AppInfo.vue
View file

@ -10,26 +10,29 @@
v-for="(value, prop) in info" :key="prop"
no-gutters class="row-line"
>
<b-col cols="5" md="3" xl="3">
<b-col cols="auto" md="3">
<strong>{{ $t(prop) }}</strong>
<span class="sep" />
</b-col>
<b-col>
<a v-if="prop === 'url'" :href="value" target="_blank">{{ value }}</a>
<span v-else>{{ value }}</span>
</b-col>
</b-row>
<hr>
<!-- MANAGE USER/GROUP -->
<p class="mb-2">
<strong>{{ $t('app_info_access_desc') }}</strong>
<br>
{{ allowedGroups.length > 0 ? allowedGroups.join(', ') + '.' : $t('nobody') }}
</p>
<b-button size="sm" :to="{ name: 'group-list'}" variant="info">
<icon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}
</b-button>
<b-row no-gutters class="row-line">
<b-col cols="auto" md="3">
<strong>{{ $t('app_info_access_desc') }}</strong>
<span class="sep" />
</b-col>
<b-col>
{{ allowedGroups.length > 0 ? allowedGroups.join(', ') + '.' : $t('nobody') }}
<b-button
size="sm" :to="{ name: 'group-list'}" variant="info"
class="ml-2"
>
<icon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}
</b-button>
</b-col>
</b-row>
</b-card>
<!-- OPERATIONS -->
@ -39,11 +42,11 @@
</template>
<!-- CHANGE PERMISSIONS LABEL -->
<b-form-group :label="$t('app_manage_label_and_tiles')" label-class="font-weight-bold" :description="$t('app_info_managelabel_desc')">
<b-form-group :label="$t('app_manage_label_and_tiles')" label-class="font-weight-bold">
<form-field
v-for="(perm, i) in app.permissions" :key="i"
:label="perm.title" :label-for="'perm-' + i"
label-cols="0" label-class=""
label-cols="0" label-class="" class="m-0"
:validation="$v.form.labels.$each[i] "
>
<template #default="{ self }">
@ -237,10 +240,13 @@ export default {
methods: {
fetchData () {
this.$store.dispatch('FETCH', { uri: 'users/permissions?full', storeKey: 'permissions' }).then(a => {
console.log(a)
})
api.get(`apps/${this.id}?full`).then((app) => {
Promise.all([
api.get(`apps/${this.id}?full`),
this.$store.dispatch('FETCH_ALL', [
{ uri: 'users/permissions?full', storeKey: 'permissions' },
{ uri: 'domains' }
])
]).then(([app]) => {
const form = { labels: [] }
const mainPermission = app.permissions[this.id + '.main']
@ -263,10 +269,8 @@ export default {
}
}
console.log(app.permissions)
this.info = {
id: this.id,
// FIXME permission
label: mainPermission.label,
description: app.description,
version: app.version,
@ -280,22 +284,18 @@ export default {
path: app.settings.path.slice(1)
}
}
// FIXME permission
this.form = form
this.app = {
domain: app.settings.domain,
supports_change_url: app.supports_change_url,
// FIXME permission
permissions
}
})
this.$store.dispatch('FETCH', { uri: 'domains' })
},
changeLabel (permName, data) {
data.show_tile = data.show_tile ? 'True' : 'False'
console.log(permName, data)
api.put('users/permissions/' + permName, data).then(this.fetchData)
},

111
app/src/views/service/ServiceInfo.vue
View file

@ -1,72 +1,75 @@
<template>
<div class="service-info">
<div class="actions">
<div class="buttons ml-auto">
<template v-if="status === 'running'">
<b-button
variant="warning"
@click="action = 'restart'" v-b-modal.action-confirm-modal
>
<icon iname="refresh" /> {{ $t('restart') }}
</b-button>
<b-button
variant="danger" :disabled="critical"
@click="action = 'stop'" v-b-modal.action-confirm-modal
>
<icon iname="warning" /> {{ $t('stop') }}
</b-button>
</template>
<template v-else>
<b-button
variant="success"
@click="action = 'start'" v-b-modal.action-confirm-modal
>
<icon iname="play" /> {{ $t('start') }}
</b-button>
</template>
<b-button @click="shareLogs">
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
</b-button>
</div>
</div>
<!-- INFO CARD -->
<b-card>
<template v-slot:header>
<h2><icon iname="info-circle" /> {{ name }}</h2>
<div class="d-sm-flex">
<h2><icon iname="info-circle" /> {{ name }}</h2>
<div class="ml-auto mt-2 mt-sm-0">
<template v-if="status === 'running'">
<b-button variant="warning" @click="action = 'restart'" v-b-modal.action-confirm-modal>
<icon iname="refresh" /> {{ $t('restart') }}
</b-button>
<b-button
v-if="!critical" variant="danger" class="ml-2"
@click="action = 'stop'" v-b-modal.action-confirm-modal
>
<icon iname="warning" /> {{ $t('stop') }}
</b-button>
</template>
<b-button
v-else
variant="success" @click="action = 'start'" v-b-modal.action-confirm-modal
>
<icon iname="play" /> {{ $t('start') }}
</b-button>
</div>
</div>
</template>
<dl>
<dt v-t="'description'" />
<dd>{{ description }}</dd>
<hr>
<dt v-t="'status'" />
<dd>
<b-row no-gutters class="row-line">
<b-col cols="auto" md="3"><strong v-t="'description'" /></b-col>
<b-col>{{ description }}</b-col>
</b-row>
<b-row no-gutters class="row-line">
<b-col cols="auto" md="3"><strong v-t="'status'" /></b-col>
<b-col>
<span :class="status === 'running' ? 'text-success' : 'text-danger'">
<icon :iname="status === 'running' ? 'check-circle' : 'times'" />
{{ status }}
</span>
{{ $t('since') }} {{ last_state_change | distanceToNow }}
</dd>
<hr>
<dt v-t="'service_start_on_boot'" />
<dd :class="start_on_boot === 'enabled' ? 'text-success' : 'text-danger'">
{{ $t(start_on_boot) }}
</dd>
<hr>
<dt v-t="'configuration'" />
<dd :class="{ 'text-success': configuration === 'valid', 'text-danger': configuration === 'broken' }">
{{ $t(configuration) }}
</dd>
</dl>
</b-col>
</b-row>
<b-row no-gutters class="row-line">
<b-col cols="auto" md="3"><strong v-t="'service_start_on_boot'" /></b-col>
<b-col>
<span :class="start_on_boot === 'enabled' ? 'text-success' : 'text-danger'">
{{ $t(start_on_boot) }}
</span>
</b-col>
</b-row>
<b-row no-gutters class="row-line">
<b-col cols="auto" md="3"><strong v-t="'configuration'" /></b-col>
<b-col>
<span :class="{ 'text-success': configuration === 'valid', 'text-danger': configuration === 'broken' }">
{{ $t(configuration) }}
</span>
</b-col>
</b-row>
</b-card>
<!-- LOGS CARD -->
<b-card>
<template v-slot:header>
<h2><icon iname="book" /> {{ $t('logs') }}</h2>
<div class="d-sm-flex justify-content-sm-between">
<h2><icon iname="book" /> {{ $t('logs') }}</h2>
<b-button variant="success" @click="shareLogs" class="mt-2 mt-sm-0">
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
</b-button>
</div>
</template>
<div class="w-100" v-for="{ filename, content} in logs" :key="filename">
<h3>{{ filename }}</h3>
<pre class="bg-light p-3"><code>{{ content }}</code></pre>
@ -152,7 +155,7 @@ export default {
: 'services/' + this.name
// FIXME API doesn't return anything to the PUT so => json err
api.fetch(method, uri).then(() => {
api[method](uri).then(() => {
this.fetchData()
})
},

13
app/src/views/tool/ToolLog.vue
View file

@ -10,9 +10,8 @@
v-for="(value, prop) in info" :key="prop"
no-gutters class="row-line"
>
<b-col cols="5" md="3" xl="3">
<b-col cols="auto" md="3">
<strong>{{ $t('logs_' + prop) }}</strong>
<span class="sep" />
</b-col>
<b-col>
<span v-if="prop.endsWith('_at')">{{ value | readableDate }}</span>
@ -41,19 +40,25 @@
<template v-slot:header>
<div class="d-sm-flex justify-content-sm-between">
<h2><icon iname="file-text" /> {{ $t('logs') }}</h2>
<b-button @click="shareLogs">
<b-button @click="shareLogs" variant="success">
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
</b-button>
</div>
</template>
<b-button
v-if="moreLogsAvailable"
variant="info" class="w-100 rounded-0"
variant="white" class="w-100 rounded-0"
@click="fetchData"
>
<icon iname="plus" /> {{ $t('logs_more') }}
</b-button>
<pre><code v-html="logs" /></pre>
<b-button @click="shareLogs" variant="success" class="w-100 rounded-0">
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
</b-button>
</b-card>
</div>
</template>