blacklight/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

Extracted and refactored more common elements of the Entity components.

Browse source
This commit is contained in:
Fabio Manganiello 2023-04-22 16:31:47 +02:00
parent e213941791
commit f4036be52b
Signed by: blacklight
GPG key ID: D90FBA7F76362774
9 changed files with 76 additions and 251 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
platypush/backend/http/webapp/src/components/panels/Entities/Cpu.vue
View file

@ -38,9 +38,5 @@ export default {
font-weight: bold;
}
}
.icon {
margin-right: 1em;
}
}
</style>

51
platypush/backend/http/webapp/src/components/panels/Entities/CpuInfo.vue
View file

@ -166,55 +166,4 @@ export default {
<style lang="scss" scoped>
@import "common";
.entity {
.head {
padding: 0.25em;
.icon {
margin-right: 1em;
}
}
}
.collapse-toggler {
display: flex;
align-items: center;
flex: 1;
min-height: 3em;
cursor: pointer;
&:hover {
color: $default-hover-fg;
}
}
.attributes .child {
margin: 0 -0.5em;
padding: 0.5em 1em;
&:not(:last-child) {
border-bottom: 1px solid $border-color-1;
}
&:hover {
cursor: initial;
}
.label {
font-weight: bold;
@include from($tablet) {
@extend .col-m-6;
}
}
.value {
font-size: 0.95em;
text-align: right;
@include from($tablet) {
@extend .col-m-6;
}
}
}
</style>

6
platypush/backend/http/webapp/src/components/panels/Entities/CpuTimes.vue
View file

@ -28,10 +28,4 @@ export default {
<style lang="scss" scoped>
@import "common";
.entity {
.icon {
margin-right: 1em;
}
}
</style>

6
platypush/backend/http/webapp/src/components/panels/Entities/Device.vue
View file

@ -28,10 +28,4 @@ export default {
<style lang="scss" scoped>
@import "common";
.device-container {
.icon {
margin-right: 1em;
}
}
</style>

53
platypush/backend/http/webapp/src/components/panels/Entities/Disk.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="entity disk-container">
<div class="entity disk-container" :class="{expanded: !isCollapsed}">
<div class="head" @click.stop="isCollapsed = !isCollapsed">
<div class="col-1 icon">
<EntityIcon
@ -169,57 +169,6 @@ export default {
text-align: right;
font-weight: bold;
}
.icon {
margin-right: 1em;
}
}
}
.collapse-toggler {
display: flex;
align-items: center;
flex: 1;
min-height: 3em;
cursor: pointer;
@include from($tablet) {
@include until($desktop) {
margin-left: 3.25em;
}
}
&:hover {
color: $default-hover-fg;
}
}
.attributes .child {
margin: 0 -0.5em;
padding: 0.5em 1em;
&:not(:last-child) {
border-bottom: 1px solid $border-color-1;
}
&:hover {
cursor: initial;
}
.label {
font-weight: bold;
@include from($tablet) {
@extend .col-m-6;
}
}
.value {
font-size: 0.95em;
text-align: right;
@include from($tablet) {
@extend .col-m-6;
}
}
}
</style>

28
platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
View file

@ -186,6 +186,12 @@ export default {
}
}
@mixin expanded-entity {
background: $selected-bg;
font-weight: bold;
box-shadow: 0 0 3px 2px $default-shadow-color;
}
.entity-container {
width: 100%;
display: flex;
@ -195,35 +201,23 @@ export default {
border-bottom: $default-border-3;
&.with-children:not(.collapsed) {
background: $selected-bg;
font-weight: bold;
box-shadow: 0 0 3px 2px $default-shadow-color;
@include expanded-entity();
}
&:hover {
background: $hover-bg;
}
.collapse-toggler {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
min-height: 3em;
margin-left: 0;
cursor: pointer;
&:hover {
color: $default-hover-fg;
}
}
.adjuster {
cursor: pointer;
}
}
:deep(.entity-container) {
.entity.expanded {
@include expanded-entity();
}
.head {
.name {
display: inline-flex;

55
platypush/backend/http/webapp/src/components/panels/Entities/MemoryStats.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="entity memory-stats-container">
<div class="entity memory-stats-container" :class="{expanded: !isCollapsed}">
<div class="head" @click.stop="isCollapsed = !isCollapsed">
<div class="col-1 icon">
<EntityIcon
@ -127,63 +127,10 @@ export default {
.entity {
.head {
padding: 0.25em;
.icon {
margin-right: 1em;
}
.value {
text-align: right;
font-weight: bold;
}
}
}
.collapse-toggler {
display: flex;
align-items: center;
flex: 1;
min-height: 3em;
cursor: pointer;
@include from($tablet) {
@include until($desktop) {
margin-left: 3.25em;
}
}
&:hover {
color: $default-hover-fg;
}
}
.attributes .child {
margin: 0 -0.5em;
padding: 0.5em 1em;
&:not(:last-child) {
border-bottom: 1px solid $border-color-1;
}
&:hover {
cursor: initial;
}
.label {
font-weight: bold;
@include from($tablet) {
@extend .col-m-6;
}
}
.value {
font-size: 0.95em;
text-align: right;
@include from($tablet) {
@extend .col-m-6;
}
}
}
</style>

66
platypush/backend/http/webapp/src/components/panels/Entities/NetworkInterface.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="entity network-interface-container">
<div class="entity network-interface-container" :class="{expanded: !isCollapsed}">
<div class="head" @click.stop="isCollapsed = !isCollapsed">
<div class="col-1 icon">
<EntityIcon
@ -12,7 +12,7 @@
<div class="name" v-text="value.name" />
</div>
<div class="col-1 collapse-toggler" @click.stop="isCollapsed = !isCollapsed">
<div class="col-1 collapse-toggler">
<i class="fas"
:class="{'fa-chevron-down': isCollapsed, 'fa-chevron-up': !isCollapsed}" />
</div>
@ -91,7 +91,8 @@
</div>
</div>
<div class="child head" @click.stop="areAddressesCollapsed = !areAddressesCollapsed">
<div class="child head" :class="{expanded: !areAddressesCollapsed}"
@click.stop="areAddressesCollapsed = !areAddressesCollapsed">
<div class="col-11 label">Addresses</div>
<div class="col-1 collapse-toggler pull-right">
<i class="fas"
@ -105,7 +106,7 @@
v-for="address in (value.addresses || [])"
:key="address.address"
>
<div class="child head"
<div class="child head" :class="{expanded: displayedAddresses[address.address]}"
@click.stop="displayedAddresses[address.address] = !displayedAddresses[address.address]"
>
<div class="col-11 label" v-text="address.address" />
@ -160,61 +161,4 @@ export default {
<style lang="scss" scoped>
@import "common";
.entity {
.head {
padding: 0.25em;
.icon {
margin-right: 1em;
}
}
}
.collapse-toggler {
display: flex;
align-items: center;
flex: 1;
min-height: 3em;
cursor: pointer;
@include from($tablet) {
@include until($desktop) {
margin-left: 3.25em;
}
}
&:hover {
color: $default-hover-fg;
}
}
.attributes .child {
margin: 0 -0.5em;
padding: 0.5em 1em;
&:not(:last-child) {
border-bottom: 1px solid $border-color-1;
}
&:hover {
cursor: initial;
}
.label {
font-weight: bold;
@include from($tablet) {
@extend .col-m-6;
}
}
.value {
font-size: 0.95em;
text-align: right;
@include from($tablet) {
@extend .col-m-6;
}
}
}
</style>

58
platypush/backend/http/webapp/src/components/panels/Entities/common.scss
View file

@ -10,6 +10,12 @@
display: flex;
align-items: center;
padding: 0.75em 0.25em;
min-height: 3.5em;
position: relative;
.icon {
margin-right: 1em;
}
.label {
margin-top: 0.25em;
@ -38,6 +44,7 @@
background: linear-gradient(0deg, $default-bg-5, $default-bg-2);
border-top: 1px solid $border-color-1;
box-shadow: $border-shadow-bottom;
font-weight: normal;
}
button {
@ -51,3 +58,54 @@
}
}
}
.collapse-toggler {
position: absolute;
right: 0;
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1;
min-height: 2em;
margin-right: 1.25em;
cursor: pointer;
&:hover {
color: $default-hover-fg;
}
}
.attributes .child {
padding: 0.5em 1em;
&:not(:last-child) {
border-bottom: 1px solid $border-color-1;
}
&:hover {
cursor: initial;
}
&.head {
cursor: pointer;
&:hover {
background: $hover-bg;
}
}
.label {
font-weight: bold;
@include from($tablet) {
@extend .col-m-6;
}
}
.value {
font-size: 0.95em;
text-align: right;
@include from($tablet) {
@extend .col-m-6;
}
}
}