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

Footer: Add arrow icon to indicate that can be expanded

Browse Source
This commit is contained in:
Pablo Vazquez 2022-07-07 17:48:23 +02:00
parent b8c49acf71
commit 204d9d1156
2 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,7 @@
--color-background: #111; --color-background: #111;
--color-background-column: #202020; --color-background-column: #202020;
--color-background-column-highlight: #282828;
--color-accent-hue: 246; --color-accent-hue: 246;
--color-accent: hsl(var(--color-accent-hue), 40%, 65%); --color-accent: hsl(var(--color-accent-hue), 40%, 65%);
@ -249,12 +250,29 @@ dl dd:empty {
.app-footer { .app-footer {
align-items: center; align-items: center;
background-color: var(--color-background-column); background-color: var(--color-background-column);
border-radius: var(--border-radius);
color: var(--color-text-muted); color: var(--color-text-muted);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
grid-area: footer; grid-area: footer;
padding: var(--spacer-sm); padding: var(--spacer-sm);
transition: background-color var(--transition-speed) ease-in-out;
}
.app-footer:hover {
background-color: var(--color-background-column-highlight);
}
.app-footer:hover .app-footer-expand {
margin-top: -5px;
}
.app-footer-expand {
position: relative;
stroke: var(--color-text-hint);
transform: scale(.8);
transition: stroke var(--transition-speed) ease-in-out, margin-top var(--transition-speed) ease-in-out;
} }
.btn-bar { .btn-bar {

5
web/app/src/views/JobsView.vue
View File

@ -12,6 +12,11 @@
<footer class="app-footer" v-if="!showFooterPopup" @click="showFooterPopup = true"> <footer class="app-footer" v-if="!showFooterPopup" @click="showFooterPopup = true">
<notification-bar /> <notification-bar />
<div class="app-footer-expand">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>
</svg>
</div>
</footer> </footer>
<footer-popup v-if="showFooterPopup" ref="footerPopup" @clickClose="showFooterPopup = false" /> <footer-popup v-if="showFooterPopup" ref="footerPopup" @clickClose="showFooterPopup = false" />