tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

UI/UX improvements (#146)

Browse Source 
* Some initial changes

* New project cards

* Version

* Finalize improvements

* Fixed styling issues on versions page

* Removed light mode

* Run linter

* Added mixpanel stuff in context menus

* Fix styling issues

* Fix windows

* homepage fixes

* Finishing touches on mac styling

* Fixed windows related styling

* Update global.scss

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>
This commit is contained in:
Adrian O.V
2023-06-20 00:09:03 -04:00
committed by GitHub
parent 1e78a7b6a8
commit bd697a02f5
25 changed files with 985 additions and 491 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
theseus_gui/src/components/ui/RunningAppBar.vue
View File

@@ -1,45 +1,47 @@
<template>
<div v-if="selectedProfile" class="status">
<span class="circle running" />
<div
ref="profileButton"
class="running-text"
:class="{ clickable: currentProcesses.length > 1 }"
@click="toggleProfiles()"
<div class="action-groups">
<Button
v-if="currentLoadingBars.length > 0"
ref="infoButton"
icon-only
class="icon-button show-card-icon"
@click="toggleCard()"
>
{{ selectedProfile.metadata.name }}
<div v-if="currentProcesses.length > 1" class="arrow" :class="{ rotate: showProfiles }">
<DropdownIcon />
<DownloadIcon />
</Button>
<div v-if="selectedProfile" class="status">
<span class="circle running" />
<div
ref="profileButton"
class="running-text"
:class="{ clickable: currentProcesses.length > 1 }"
@click="toggleProfiles()"
>
{{ selectedProfile.metadata.name }}
<div v-if="currentProcesses.length > 1" class="arrow" :class="{ rotate: showProfiles }">
<DropdownIcon />
</div>
</div>
<Button v-tooltip="'Stop instance'" icon-only class="icon-button stop" @click="stop()">
<StopCircleIcon />
</Button>
<Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
<TerminalSquareIcon />
</Button>
<Button
v-if="currentLoadingBars.length > 0"
ref="infoButton"
icon-only
class="icon-button show-card-icon"
@click="toggleCard()"
>
<DownloadIcon />
</Button>
</div>
<div v-else class="status">
<span class="circle stopped" />
<span class="running-text"> No running instances </span>
</div>
<Button v-tooltip="'Stop instance'" icon-only class="icon-button stop" @click="stop()">
<StopCircleIcon />
</Button>
<Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
<TerminalSquareIcon />
</Button>
<Button
v-if="currentLoadingBars.length > 0"
ref="infoButton"
icon-only
class="icon-button show-card-icon"
@click="toggleCard()"
>
<DownloadIcon />
</Button>
</div>
<div v-else class="status">
<span class="circle stopped" />
<span class="running-text"> No running instances </span>
<Button
v-if="currentLoadingBars.length > 0"
ref="infoButton"
icon-only
class="icon-button show-card-icon"
@click="toggleCard()"
>
<DownloadIcon />
</Button>
</div>
<transition name="download">
<Card v-if="showCard === true" ref="card" class="info-card">
@@ -228,6 +230,13 @@ onBeforeUnmount(() => {
</script>
<style scoped lang="scss">
.action-groups {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--gap-sm);
}
.arrow {
transition: transform 0.2s ease-in-out;
display: flex;
@@ -238,14 +247,13 @@ onBeforeUnmount(() => {
}
.status {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
background-color: var(--color-raised-bg);
padding: 0 1rem;
margin: 0;
border-radius: var(--radius-md);
border: 1px solid var(--color-button-bg);
padding: var(--gap-sm) var(--gap-lg);
}
.running-text {