tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Small adjustments on css for processes popup

This commit is contained in:
Mateus Machado Luna 2018-07-23 14:53:15 -03:00
parent 4a55d2d36f
commit 6d4ff28f2d
1 changed files with 48 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/admin/components/other/processes-popup.vue
View File

@ -1,7 +1,9 @@
<template> <template>
<div class="processes-popup"> <div class="processes-popup">
<div class="popup-header"> <div class="popup-header">
<span class="header-title">{{ getUnfinishedProcesses() + ' ' + $i18n.get('info_unfinished_processes') }}</span> <span
@click="showProcessesList = !showProcessesList"
class="header-title">{{ getUnfinishedProcesses() + ' ' + $i18n.get('info_unfinished_processes') }}</span>
<a @click="showProcessesList = !showProcessesList"> <a @click="showProcessesList = !showProcessesList">
<span class="icon has-text-tertiary"> <span class="icon has-text-tertiary">
<i <i
@ -47,18 +49,18 @@
v-if="bgProcess.done <= 0" v-if="bgProcess.done <= 0"
class="icon has-text-gray action-icon" class="icon has-text-gray action-icon"
@click="pauseProcess(index)"> @click="pauseProcess(index)">
<i class="mdi mdi-24px mdi-pause-circle"/> <i class="mdi mdi-18px mdi-pause-circle"/>
</span> </span>
<span <span
v-if="bgProcess.done <= 0" v-if="bgProcess.done <= 0"
class="icon has-text-gray action-icon" class="icon has-text-gray action-icon"
@click="pauseProcess(index)"> @click="pauseProcess(index)">
<i class="mdi mdi-24px mdi-close-circle-outline"/> <i class="mdi mdi-18px mdi-close-circle-outline"/>
</span> </span>
<span <span
v-if="bgProcess.done > 0" v-if="bgProcess.done > 0"
class="icon has-text-success"> class="icon has-text-success">
<i class="mdi mdi-24px mdi-checkbox-marked-circle"/> <i class="mdi mdi-18px mdi-checkbox-marked-circle"/>
</span> </span>
<span <span
v-if="bgProcess.done <= 0" v-if="bgProcess.done <= 0"
@ -183,6 +185,12 @@ export default {
} }
} }
.control.is-loading::after {
border: 2px solid $success;
border-right-color: $tainacan-input-background;
border-top-color: $tainacan-input-background;
}
.processes-popup{ .processes-popup{
background-color: #c1dae0; background-color: #c1dae0;
width: 320px; width: 320px;
@ -203,11 +211,19 @@ export default {
} }
} }
.popup-header { padding: 6px 12px 4px 12px; } .popup-header {
padding: 6px 12px 4px 12px;
.header-title {
margin-right: auto;
cursor: pointer;
}
}
.popup-footer { .popup-footer {
padding: 4px 12px 6px 10px; padding: 4px 12px 6px 10px;
.footer-title {
.footer-title { font-size: 0.625rem; } margin-right: auto;
font-size: 0.625rem;
}
} }
.popup-list { .popup-list {
@ -220,20 +236,37 @@ export default {
animation-duration: 0.3s; animation-duration: 0.3s;
.popup-list-subheader { .popup-list-subheader {
padding: 6px 12px 2px 12px; background-color: white !important;
padding: 6px 12px 12px 12px;
color: $gray-light; color: $gray-light;
font-size: 0.625rem; font-size: 0.625rem;
a { float: right; } a { float: right; }
} }
li:hover {
background-color: $tainacan-input-background;
.action-icon{
visibility: visible;
opacity: 1;
cursor: pointer;
}
.loading-icon {
display: none;
}
.process-item>.process-title .mdi-menu-left, .process-item>.process-title .mdi-menu-right {
color: $gray !important;
}
}
.process-item { .process-item {
padding: 6px 12px 6px 6px; padding: 5px 12px 5px 5px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
cursor: pointer;
width: 100%; width: 100%;
.process-title { .process-title {
cursor: pointer;
margin-right: auto; margin-right: auto;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -245,6 +278,10 @@ export default {
position: relative; position: relative;
top: -2px; top: -2px;
} }
.mdi-menu-left, .mdi-menu-right {
color: $primary-light;
}
} }
.action-icon { .action-icon {
visibility: hidden; visibility: hidden;
@ -256,18 +293,8 @@ export default {
top: 0; top: 0;
} }
} }
.process-item:hover {
background-color: $tainacan-input-background;
.action-icon{
visibility: visible;
opacity: 1;
}
.loading-icon {
display: none;
}
}
.process-label { .process-label {
padding: 2px 12px 6px 32px; padding: 0px 12px 6px 32px;
margin-right: auto; margin-right: auto;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;