fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

refactor(UI): various improvements on sidebar

Browse Source
This commit is contained in:
Fabio Di Stasio
2022-11-24 16:40:04 +01:00
parent ece6c6401d
commit 321b387083
5 changed files with 387 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/renderer/components/TheSettingBar.vue
View File

@ -23,7 +23,9 @@
:title="t('message.allConnections')"
@click="emit('show-connections-modal')"
>
<i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" />
<div class="settingbar-element-icon-wrapper">
<i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" />
</div>
</li>
<li
class="settingbar-element btn btn-link"
@ -31,7 +33,9 @@
:title="t('message.addConnection')"
@click="selectWorkspace('NEW')"
>
<i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
<div class="settingbar-element-icon-wrapper">
<i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
</div>
</li>
</ul>
</div>
@ -164,6 +168,10 @@ watch(selectedWorkspace, (newVal, oldVal) => {
padding: 0;
margin: 0;
li {
margin: 0;
}
.settingbar-element {
height: $settingbar-width;
width: 100%;
@ -172,7 +180,7 @@ watch(selectedWorkspace, (newVal, oldVal) => {
transition: opacity 0.2s;
display: flex;
align-items: center;
justify-content: flex-start;
justify-content: center;
border-radius: 0;
padding: 0;
position: relative;
@ -185,7 +193,7 @@ watch(selectedWorkspace, (newVal, oldVal) => {
opacity: 1;
&::before {
height: $settingbar-width;
height: calc(#{$settingbar-width} - 0.4rem);
}
}
@ -194,53 +202,56 @@ watch(selectedWorkspace, (newVal, oldVal) => {
height: 0;
width: 3px;
transition: height 0.2s;
background-color: $primary-color;
background-color: rgba($color: #fff, $alpha: 0.8);
border-radius: $border-radius;
}
.settingbar-element-icon {
margin: 0 auto;
.settingbar-element-icon-wrapper{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
&.badge::after {
top: 5px;
right: -4px;
position: absolute;
.settingbar-element-icon {
&.badge::after {
top: 10px;
right: -6px;
position: absolute;
}
&.badge-update::after {
bottom: initial;
}
}
&.badge-update::after {
bottom: initial;
.settingbar-element-name {
font-size: 65%;
max-width: 90%;
font-style: normal;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: calc($settingbar-width - 15px);
line-height: 1.1;
color: rgba($body-font-color-dark, 0.8);
text-align: center;
}
}
.settingbar-element-name {
font-size: 65%;
bottom: 5px;
left: 7px;
position: absolute;
font-style: normal;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: calc($settingbar-width - 15px);
text-align: left;
line-height: 1.1;
color: rgba($body-font-color-dark, 0.8);
text-align: center;
}
.settingbar-element-pin {// <- Dead
margin: 0 auto;
.settingbar-element-pin {
margin: 0 auto;
&::before {
font: normal normal normal 14px/1 "Material Design Icons";
content: "\F0403";
color: $body-font-color-dark;
transform: rotate(45deg);
opacity: 0.25;
top: -8px;
left: -10px;
position: absolute;
&::before {
font: normal normal normal 14px/1 "Material Design Icons";
content: "\F0403";
color: $body-font-color-dark;
transform: rotate(45deg);
opacity: 0.25;
top: -8px;
left: -10px;
position: absolute;
}
}
}
}