revil-O/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

Added Tabs and Tab UI elements.

Browse source
This commit is contained in:
Fabio Manganiello 2023-10-10 00:39:27 +02:00
parent 0c818d3fe0
commit 84efef710e
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
3 changed files with 84 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
platypush/backend/http/webapp/src/components/elements/Tab.vue Normal file
View file

@ -0,0 +1,56 @@
<template>
<div class="tab" :class="selected ? 'selected' : ''" @click="$emit('input')">
<span class="icon" v-if="iconClass?.length || iconUrl?.length">
<Icon :class="iconClass" :url="iconUrl" />
</span> &nbsp;
<slot />
</div>
</template>
<script>
import Icon from "@/components/elements/Icon";
export default {
name: "Tab",
components: {Icon},
emits: ['input'],
props: {
selected: {
type: Boolean,
default: false,
},
iconClass: {
type: String,
},
iconUrl: {
type: String,
},
},
}
</script>
<style lang="scss" scoped>
.tab {
background: $tab-bg;
display: flex;
padding: 1em;
align-items: center;
border-right: $default-border-2;
cursor: pointer;
&.selected {
background: $selected-bg;
font-weight: bold;
}
&:hover {
background: $hover-bg;
}
:deep(.icon-container) {
width: 1.5em;
}
}
</style>

23
platypush/backend/http/webapp/src/components/elements/Tabs.vue Normal file
View file

@ -0,0 +1,23 @@
<template>
<div class="tabs">
<slot />
</div>
</template>
<script>
export default {
name: "Tabs",
}
</script>
<style lang="scss" scoped>
.tabs {
background: $tabs-bg;
display: flex;
flex-direction: row;
align-items: flex-end;
margin-top: 0.2em;
margin-bottom: 0.2em;
box-shadow: $border-shadow-bottom;
}
</style>

5
platypush/backend/http/webapp/src/style/themes/light.scss
View file

@ -12,6 +12,7 @@ $default-fg: black !default;
$default-fg-2: #23513a !default; $default-fg-2: #23513a !default;
$default-fg-3: #195331b3 !default; $default-fg-3: #195331b3 !default;
$header-bg: linear-gradient(0deg, #c0e8e4, #e4f8f4) !default; $header-bg: linear-gradient(0deg, #c0e8e4, #e4f8f4) !default;
$header-bg-2: linear-gradient(90deg, #f3f3f3, white) !default;
$no-items-color: #555555; $no-items-color: #555555;
//// Notifications //// Notifications
@ -47,6 +48,10 @@ $default-border: 1px solid $border-color-1 !default;
$default-border-2: 1px solid $border-color-2 !default; $default-border-2: 1px solid $border-color-2 !default;
$default-border-3: 1px solid $border-color-3 !default; $default-border-3: 1px solid $border-color-3 !default;
//// Tabs
$tabs-bg: #f6f6f6 !default;
$tab-bg: linear-gradient(0deg, #ececec, #f6f6f6) !default;
//// Shadows //// Shadows
$default-shadow-color: #c0c0c0 !default; $default-shadow-color: #c0c0c0 !default;
$border-shadow-top: 0 -2.5px 4px 0 $default-shadow-color; $border-shadow-top: 0 -2.5px 4px 0 $default-shadow-color;