blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Initial styling on footer popup

Browse Source
This commit is contained in:
Pablo Vazquez 2022-07-05 19:27:48 +02:00
parent 00af8ec72a
commit 8c71563a4e
3 changed files with 111 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
web/app/src/assets/base.css
View File

@ -69,8 +69,8 @@
--color-worker-status-testing: hsl(166 100% 46%);
--color-worker-status-offline: var(--color-status-canceled);
--color-connection-lost-text: hsl(17, 65%, 65%);
--color-connection-lost-bg: hsl(17, 65%, 20%);
--color-connection-lost-text: hsl(0, 60%, 75%);
--color-connection-lost-bg: hsl(0, 80%, 40%);
}
html,
@ -233,15 +233,14 @@ dl dd:empty {
border-color: transparent;
}
footer {
.window-footer {
align-items: center;
background-color: var(--color-background-column);
color: var(--color-text-muted);
display: flex;
font-size: var(--font-size-sm);
grid-area: footer;
padding: var(--spacer-sm);
background-color: var(--color-background-column);
}
.btn-bar {
@ -444,55 +443,6 @@ footer.window-footer {
cursor: pointer;
}
section.footer-popup {
position: absolute;
bottom: var(--grid-gap);
left: var(--grid-gap);
right: var(--grid-gap);
height: 20vh;
z-index: 42;
padding: 0.2rem 0.5rem;
background-color: var(--color-background-column);
border-radius: 0.3rem;
border: thin solid var(--color-border);
box-shadow: 0 0 2rem black;
}
section.footer-popup header {
display: flex;
}
section.footer-popup header h3 {
margin: 0 auto 0 0;
}
section.footer-popup button.footer-tab {
border: none;
margin-right: 2rem;
}
section.footer-popup button.footer-tab.active-tab {
color: var(--color-accent-text);
background-color: var(--color-accent-background);
}
section.footer-popup .tabulator-tableholder {
/* Force a visible scroll bar, so that the notification history table always
* has the same available width. Without this, Tabulator won't properly act on
* the reduction in width when the scrollbar appears, and will show a
* horizontal scrollbar as well. */
overflow-y: scroll;
}
section.footer-popup .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
font-size: var(--font-size);
font-weight: normal;
color: var(--color-text-hint);
user-select: none;
}
span.state-transition-arrow {
font-weight: bold;
font-size: 110%;

15
web/app/src/assets/tabulator.css
View File

@ -306,13 +306,14 @@
}
.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
color: #ccc;
display: inline-block;
font-size: 20px;
font-weight: bold;
padding: 10px;
text-align: center;
white-space: normal;
align-items: center;
color: var(--color-text-hint);
cursor: default;
display: flex;
font-size: var(--font-size-sm);
grid-area: footer;
justify-content: center;
padding: var(--spacer-sm);
}
.tabulator .tabulator-tableholder .tabulator-table {

107
web/app/src/components/footer/FooterPopup.vue
View File

@ -16,13 +16,104 @@ watch(currentTab, async (newTab) => {
</script>
<template>
<section class="footer-popup">
<header>
<button :class='["footer-tab", {"active-tab": currentTab == "NotificationList"}]' @click="currentTab = 'NotificationList'">Notifications</button>
<button :class='["footer-tab", {"active-tab": currentTab == "TaskLog"}]' @click="currentTab = 'TaskLog'">Task Log</button>
<connection-status />
<button class='close' @click="emit('clickClose')" title="Close Pop-over">X</button>
</header>
<footer>
<nav>
<ul>
<li
:class='["footer-tab", {"active": currentTab == "NotificationList"}]'
@click="currentTab = 'NotificationList'">
Notifications
</li>
<li
:class='["footer-tab", {"active": currentTab == "TaskLog"}]'
@click="currentTab = 'TaskLog'">
Task Log
</li>
<connection-status />
<li
class="collapse"
@click="emit('clickClose')"
title="Collapse">
&#10005;
</li>
</ul>
</nav>
<component :is="tabs[currentTab]" class="tab"></component>
</section>
</footer>
</template>
<style scoped>
footer {
background-color: var(--color-background-column);
border-radius: var(--border-radius);
bottom: var(--grid-gap);
box-shadow: 0 0 5rem rgba(0, 0, 0, .66), 0 0 1.33rem rgba(0, 0, 0, .66);
left: var(--grid-gap);
padding: var(--spacer-sm);
position: fixed;
right: var(--grid-gap);
}
footer nav {
margin-bottom: var(--spacer-sm);
}
footer nav ul {
align-items: center;
display: flex;
gap: var(--spacer);
list-style: none;
}
footer nav ul li {
border-bottom: var(--border-width) solid transparent;
color: var(--color-text-hint);
cursor: pointer;
padding: var(--spacer-sm) 0;
transition: border-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out;
user-select: none;
}
footer nav ul li:hover {
border-color: var(--color-text);
color: var(--color-text);
}
footer nav ul li.active {
border-color: var(--color-accent);
color: var(--color-accent);
}
.collapse {
border: none;
flex: 1;
text-align: right;
font-size: 1.5rem;
padding: 0 var(--spacer-sm) 0;
}
footer button.footer-tab {
border: none;
margin-right: 1rem;
}
footer button.footer-tab.active-tab {
color: var(--color-accent-text);
background-color: var(--color-accent-background);
}
footer .tabulator-tableholder {
/* Force a visible scroll bar, so that the notification history table always
* has the same available width. Without this, Tabulator won't properly act on
* the reduction in width when the scrollbar appears, and will show a
* horizontal scrollbar as well. */
overflow-y: scroll;
}
footer .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
color: var(--color-text-hint);
font-size: var(--font-size);
font-weight: normal;
user-select: none;
}
</style>