Skip to content

Commit

Permalink
fix: welcome window layout (#634)
Browse files Browse the repository at this point in the history 
* fix layout issues

* fix description

* remove sponsor us tab

* fix more issues

* fix install buttons

* add style to install buttons

* undo remove sponsor tab. done in a different PR

Co-authored-by: TypicalEgg <erikas.plays@gmail.com>
Co-authored-by: Paul Pacheco <paulpach@gmail.com>
  • Loading branch information
@erikas-taroza @paulpach
3 people committed Feb 25, 2021
1 parent e2ee2b6 commit 2bceedb
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 30 deletions.
39 changes: 28 additions & 11 deletions Assets/Mirage/Editor/WelcomeWindow/Resources/WelcomeWindow.uss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,17 @@
padding-top: 0;
flex: 3;
white-space: normal;
flex-basis: auto;
flex-grow: 1;
}

#Spacer {
display: flex;
flex: 0.02;
flex-basis: auto;
}

Button {
.navButton {
padding: 2px;
height: 35px;
}
Expand All @@ -90,13 +93,17 @@ Button {
flex: 1;
flex-direction: column;
padding-top: 3px;
flex-basis: 35%;
flex-shrink: 0;
}

#RightColumnBox {
display: flex;
flex: 2;
flex-direction: column;
justify-content: space-between;
flex-basis: auto;
flex-grow: 1;
}

#Module {
Expand All @@ -108,17 +115,27 @@ Button {
}

.dark-selected-tab {
background-color: rgba(53, 53, 53, 255);
border-left-color: rgba(36, 36, 36, 255);
border-right-color: rgba(36, 36, 36, 255);
border-top-color: rgba(36, 36, 36, 255);
border-bottom-color: rgba(36, 36, 36, 255);
background-color: rgb(53, 53, 53);
border-left-color: rgb(36, 36, 36);
border-right-color: rgb(36, 36, 36);
border-top-color: rgb(36, 36, 36);
border-bottom-color: rgb(36, 36, 36);
}

.light-selected-tab {
background-color: rgba(177, 177, 177, 255);
border-left-color: rgba(147, 147, 147, 255);
border-right-color: rgba(147, 147, 147, 255);
border-top-color: rgba(147, 147, 147, 255);
border-bottom-color: rgba(147, 147, 147, 255);
background-color: rgb(177, 177, 177);
border-left-color: rgb(147, 147, 147);
border-right-color: rgb(147, 147, 147);
border-top-color: rgb(147, 147, 147);
border-bottom-color: rgb(147, 147, 147);
}

.screen {
flex-grow: 1;
flex-basis: 100%;
}

.installButton {
height: initial;
flex-shrink: 1;
}
38 changes: 19 additions & 19 deletions Assets/Mirage/Editor/WelcomeWindow/Resources/WelcomeWindow.uxml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,70 +5,70 @@
<ui:Image name="Icon" style="background-image: resource('MirageIcon');" />
</ui:VisualElement>
<ui:Label name="Title" text="Welcome to Mirage!" />
<ui:Box name="ColumnContainer">
<ui:Box name="ColumnContainer" style="flex-grow: 1;">
<ui:VisualElement name="LeftColumnBox">
<ui:Button name="WelcomeButton" text="Welcome" class="light-selected-tab dark-selected-tab" />
<ui:Button name="QuickStartButton" text="Quick Start Guide" class="light-selected-tab dark-selected-tab" />
<ui:Button name="PackagesButton" text="Packages" class="light-selected-tab dark-selected-tab" />
<ui:Button name="FaqButton" text="FAQ" class="light-selected-tab dark-selected-tab" />
<ui:Button name="BestPracticesButton" text="Best Practices" class="light-selected-tab dark-selected-tab" />
<ui:Button name="ChangeLogButton" text="Change Log" class="light-selected-tab dark-selected-tab" />
<ui:Button name="DiscordButton" text="Discord" class="light-selected-tab dark-selected-tab" />
<ui:Button name="WelcomeButton" text="Welcome" class="light-selected-tab dark-selected-tab navButton" />
<ui:Button name="QuickStartButton" text="Quick Start Guide" class="light-selected-tab dark-selected-tab navButton" />
<ui:Button name="PackagesButton" text="Packages" class="light-selected-tab dark-selected-tab navButton" />
<ui:Button name="FaqButton" text="FAQ" class="light-selected-tab dark-selected-tab navButton" />
<ui:Button name="BestPracticesButton" text="Best Practices" class="light-selected-tab dark-selected-tab navButton" />
<ui:Button name="ChangeLogButton" text="Change Log" class="light-selected-tab dark-selected-tab navButton" />
<ui:Button name="DiscordButton" text="Discord" class="light-selected-tab dark-selected-tab navButton" />
</ui:VisualElement>
<ui:VisualElement name="Spacer" />
<ui:VisualElement name="Spacer" style="display: none;" />
<ui:VisualElement name="RightColumnBox">
<ui:VisualElement name="Welcome" style="flex-grow: 0; width: 100%; height: 100%;">
<ui:VisualElement name="Welcome" class="screen">
<ui:Label name="Header" text="Welcome" />
<ui:Label name="Description" text="Hello! Thank you for installing Mirage. Please visit all the pages on this window. Clicking the button at the bottom of the pages will redirect you to a webpage. Additionally, there are example projects that you can import from the Unity Package Manager. &#10;&#10;Have fun using Mirage!" style="-unity-text-align: upper-left;" />
<ui:VisualElement name="Spacer" />
<ui:Button name="Redirect" text="Open Documentation" class="redirect" />
</ui:VisualElement>
<ui:VisualElement name="ChangeLog" style="flex-grow: 0; width: 100%; height: 100%; display: none;">
<ui:VisualElement name="ChangeLog" class="screen" style="display: none;">
<ui:Label name="Header" text="Change Log" />
<ui:Label name="Description" text="The Change Log is a list of changes made to Mirage. Sometimes these changes can cause your game to break." style="-unity-text-align: upper-left;" />
<ui:VisualElement name="Spacer" />
<ui:Button name="Redirect" text="Open Change Log" class="redirect" />
</ui:VisualElement>
<ui:VisualElement name="QuickStart" style="flex-grow: 0; width: 100%; height: 100%; display: none;">
<ui:VisualElement name="QuickStart" class="screen" style="display: none;">
<ui:Label name="Header" text="Quick Start Guide" />
<ui:Label name="Description" text="The Quick Start Guide is meant for people who just started using Mirage. The Quick Start Guide will help new users learn how to accomplish important tasks. It is highly recommended that you complete the guide." style="-unity-text-align: upper-left;" />
<ui:VisualElement name="Spacer" />
<ui:Button name="Redirect" text="Open Quick Start Guide" class="redirect" />
</ui:VisualElement>
<ui:VisualElement name="BestPractices" style="flex-grow: 0; width: 100%; height: 100%; display: none;">
<ui:VisualElement name="BestPractices" class="screen" style="display: none;">
<ui:Label name="Header" text="Best Practices" />
<ui:Label name="Description" text="This page describes the best practices that you should use during development. Currently a work in progress." style="-unity-text-align: upper-left;" />
<ui:VisualElement name="Spacer" />
<ui:Button name="Redirect" text="Open Best Practices Page" class="redirect" />
</ui:VisualElement>
<ui:VisualElement name="Faq" style="flex-grow: 0; width: 100%; height: 100%; display: none;">
<ui:VisualElement name="Faq" class="screen" style="display: none;">
<ui:Label name="Header" text="FAQ" />
<ui:Label name="Description" text="The FAQ page holds commonly asked questions. Currently, the FAQ page contains answers to: &#10;&#10; 1. Syncing custom data types &#10; 2. How to connect &#10; 3. Host migration &#10; 4. Server lists and matchmaking" style="-unity-text-align: upper-left;" />
<ui:VisualElement name="Spacer" />
<ui:Button name="Redirect" text="Open FAQ" class="redirect" />
</ui:VisualElement>
<ui:VisualElement name="Discord" style="flex-grow: 0; width: 100%; height: 100%; display: none;">
<ui:VisualElement name="Discord" class="screen" style="display: none;">
<ui:Label name="Header" text="Discord" />
<ui:Label name="Description" text="Mirage has an official Discord channel that you can join. Discord is the best way to contact the developers and request help with your code." style="-unity-text-align: upper-left;" />
<ui:VisualElement name="Spacer" />
<ui:Button name="Redirect" text="Join Discord" class="redirect" />
</ui:VisualElement>
<ui:ScrollView name="Packages" style="display: none;">
<ui:ScrollView name="Packages" class="screen" style="display: none;">
<ui:Label name="Header" text="Packages" />
<ui:Label name="Description" text="Mirage is a modular networking library. It ships with the foundation that you can build upon by installing packages." style="flex-basis: auto; flex-grow: 0; flex-shrink: 0;" />
<ui:Label text="Available Packages" display-tooltip-when-elided="True" style="padding-left: 10px; -unity-font-style: bold;" />
<ui:VisualElement name="ModulesList" style="flex-grow: 1; padding-left: 10px; padding-right: 10px;">
<ui:VisualElement name="Module" tooltip="Automatically find games within the same network.">
<ui:Label text="LAN Discovery" name="Name" />
<ui:Button text="Install" display-tooltip-when-elided="True" name="InstallButton" style="flex-shrink: 1; height: auto;" />
<ui:Button text="Install" name="InstallButton" class="installButton" />
</ui:VisualElement>
<ui:VisualElement name="Module" tooltip="A transport that uses Facepunch&apos;s Steam SDK.">
<ui:Label text="Steam (Facepunch)" name="Name" />
<ui:Button text="Install" display-tooltip-when-elided="True" name="InstallButton" style="flex-shrink: 1; height: auto;" />
<ui:Button text="Install" name="InstallButton" class="installButton" />
</ui:VisualElement>
<ui:VisualElement name="Module" tooltip="A transport that uses Steamworks.NET.">
<ui:Label text="Steam (Steamworks.NET)" name="Name" />
<ui:Button text="Install" display-tooltip-when-elided="True" name="InstallButton" style="flex-shrink: 1; height: auto;" />
<ui:Button text="Install" name="InstallButton" class="installButton" />
</ui:VisualElement>
</ui:VisualElement>
<ui:VisualElement name="Spacer" />
Expand Down

0 comments on commit 2bceedb

Please sign in to comment.