Skip to content

feat: add sidebar toggle and normalize component padding #1191

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OZZO666 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: add sidebar toggle and normalize component padding #1191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions openbullet2-web-client/src/app/main/components/home/home.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- Top information -->
<div class="container-fluid">
<div class="container-fluid no-paddings">
<div class="row justify-content-between">
<div class="col-4">
<h1>OpenBullet 2</h1>
Expand All @@ -19,10 +19,10 @@ <h5>
<app-spinner *ngIf="serverInfo === null || announcement === null" [fullWidth]="true" />

<!-- Announcement -->
<div class="mt-4 mx-3">
<div class="mt-4">
<p-card *ngIf="announcement !== null">
<p class="announcement-label">Announcement</p>
<p class="announcement"
<p class="announcement"
[innerHTML]="announcement.markdownText | markdown : { disableSanitizer: true } | async"></p>
</p-card>
</div>
Expand All @@ -31,8 +31,8 @@ <h5>
<app-sysperf-cards />

<!-- Collection -->
<h6 class="mx-3 mt-4">Your collection</h6>
<div class="container-fluid mt-4">
<h6 class="mt-4">Your collection</h6>
<div class="container-fluid p-0 mt-4">
<div *ngIf="collectionInfo !== null" class="row">
<div class="col">
<div class="collection-item-value">
Expand Down Expand Up @@ -102,8 +102,8 @@ <h6 class="mx-3 mt-4">Your collection</h6>
</div>

<!-- Stats and performance -->
<h6 class="mx-3 mt-4">Recent hits</h6>
<div class="container-fluid mt-4">
<h6 class="mt-4">Recent hits</h6>
<div class="container-fluid p-0 mt-4">
<div class="row justify-content-between">
<div class="col-12">
<p-card>
Expand All @@ -116,13 +116,13 @@ <h6 class="mx-3 mt-4">Recent hits</h6>
</div>

<!-- Other server information -->
<!-- Use the position-relative class and put the spinner inside the
<!-- Use the position-relative class and put the spinner inside the
div if you want to display it only inside that div-->
<div *ngIf="serverInfo !== null" class="container-fluid mt-4">
<div *ngIf="serverInfo !== null" class="container-fluid p-0 mt-4">
<div class="row justify-content-between">
<div class="col-4">
<span class="info-label">Webserver Uptime</span><br />
<span *ngIf="serverUptime !== null"
<span *ngIf="serverUptime !== null"
class="info">{{serverUptime | timespan}}</span>
<span *ngIf="serverUptime === null">Unknown</span>
</div>
Expand All @@ -143,15 +143,15 @@ <h6 class="mx-3 mt-4">Recent hits</h6>
<div class="col-4">
<span class="info-label">Current Working Directory</span><br />
<span class="info" [pTooltip]="serverInfo.currentWorkingDirectory" tooltipPosition="bottom">{{serverInfo.currentWorkingDirectory | truncate : 30}}</span>
<button class="button button-transparent ml-3"
<button class="button button-transparent ml-3"
(click)="copyCurrentWorkingDirectory()"
pTooltip="Copy to clipboard" >
<fa-icon [icon]="faCopy" [fixedWidth]="true"></fa-icon>
</button>
</div>
<div class="col-4">
<span class="info-label">Build Date</span><br />
<span *ngIf="buildDate !== null"
<span *ngIf="buildDate !== null"
class="info">{{buildDate | date : 'medium'}}</span>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions ...ullet2-web-client/src/app/main/components/home/sysperf-cards/sysperf-cards.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<h6 class="mt-4 mx-3">System performance</h6>
<div class="container-fluid mt-4">
<h6 class="mt-4">System performance</h6>
<div class="container-fluid p-0 mt-4">
<div class="row justify-content-between">
<div class="col-4">
<p-card>
Expand Down Expand Up @@ -92,7 +92,7 @@ <h6 class="mt-4 mx-3">System performance</h6>
<div class="col-6">
<span>Memory</span>
<span class="perf-timespan">Last minute</span>
<button class="button button-transparent ml-2"
<button class="button button-transparent ml-2"
*ngIf="isAdmin"
pTooltip="Trigger aggressive server-side Garbage Collection"
(click)="garbageCollect()">
Expand Down
72 changes: 31 additions & 41 deletions openbullet2-web-client/src/app/main/main.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,37 @@
<div class="wrapper">
<div class="sidebar">
<div class="sidebar-logo">
<img class="logo" src="../../assets/images/logohq.png"
alt="OpenBullet 2" />
</div>
<div class="sidebar-version" *ngIf="updateInfo !== null">
<a href="javascript:void(0);" (click)="showChangelog()"
[pTooltip]="updateInfo.isUpdateAvailable ? 'Update available! Click here to learn more' : ''">
<fa-icon
*ngIf="updateInfo.isUpdateAvailable"
class="color-custom mr-1"
[icon]="faExclamationTriangle"
[fixedWidth]="true"></fa-icon>
<span class="version">v{{updateInfo.currentVersion}} [{{updateInfo.currentVersionType}}]</span>
</a>
</div>
<div class="sidebar-menu">
<app-menu></app-menu>
</div>
<div *ngIf="canLogout()" class="sidebar-logout">
<button class="button button-transparent"
(click)="logout()">
<fa-icon [icon]="faRightFromBracket" [fixedWidth]="true"></fa-icon>
Log out
</button>
</div>
<div #sidebar class="sidebar show">
<div class="sidebar-logo">
<img class="logo" src="../../assets/images/logohq.png" alt="OpenBullet 2" />
</div>
<div class="content">
<router-outlet></router-outlet>
<div class="sidebar-version" *ngIf="updateInfo !== null">
<a href="javascript:void(0);" (click)="showChangelog()"
[pTooltip]="updateInfo.isUpdateAvailable ? 'Update available! Click here to learn more' : ''">
<fa-icon *ngIf="updateInfo.isUpdateAvailable" class="color-custom mr-1" [icon]="faExclamationTriangle"
[fixedWidth]="true"></fa-icon>
<span class="version">v{{updateInfo.currentVersion}} [{{updateInfo.currentVersionType}}]</span>
</a>
</div>
<div class="sidebar-menu">
<app-menu></app-menu>
</div>
<div *ngIf="canLogout()" class="sidebar-logout">
<button class="button button-transparent" (click)="logout()">
<fa-icon [icon]="faRightFromBracket" [fixedWidth]="true"></fa-icon>
Log out
</button>
</div>
</div>
<div class="content">
<div class="mb-4 topbar">
<button class="button button-transparent p-0 sidebar-toggle-button" title="Toggle Sidebar" (click)="toggleSidebar()">
<i class="pi pi-fw pi-bars"></i>
</button>
</div>
<router-outlet></router-outlet>
</div>
</div>

<p-dialog
#changelogModal
header="Changelog"
[(visible)]="changelogModalVisible"
[modal]="true"
[style]="{ width: '50vw' }"
[dismissableMask]="true"
[closeOnEscape]="true"
[draggable]="false"
[resizable]="false">
<app-changelog
#changelogComponent
[updateInfo]="updateInfo" />
<p-dialog #changelogModal header="Changelog" [(visible)]="changelogModalVisible" [modal]="true"
[style]="{ width: '50vw' }" [dismissableMask]="true" [closeOnEscape]="true" [draggable]="false" [resizable]="false">
<app-changelog #changelogComponent [updateInfo]="updateInfo" />
</p-dialog>
129 changes: 71 additions & 58 deletions openbullet2-web-client/src/app/main/main.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,71 +3,84 @@
$sidebarWidth: 230px;

.wrapper {
display: flex;
min-height: 100vh;
display: flex;
min-height: 100vh;

.sidebar {
background-color: var(--bg-secondary);
width: $sidebarWidth;
min-width: $sidebarWidth;
overflow-y: auto;
overflow-x: hidden;
flex: 0 1 $sidebarWidth;

.sidebar-logo {
padding: 40px 50px 0px 50px;
margin-bottom: 10px;

img {
width: 100%;
}
}

.sidebar-version {
padding: 10px 0px;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
.sidebar {
background-color: var(--bg-secondary);
width: $sidebarWidth;
min-width: $sidebarWidth;
overflow-y: auto;
overflow-x: hidden;
flex: 0 1 $sidebarWidth;
margin-left: -$sidebarWidth;
transition: margin 0.3s ease-in-out;

a {
color: var(--fg-inactive);
text-decoration: none;
font-weight: bold;
}
}
&.show {
margin-left: 0px;
}

.sidebar-logout {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0px;
margin-top: 10px;
.sidebar-logo {
padding: 40px 50px 0px 50px;
margin-bottom: 10px;

button {
color: var(--fg-primary);
border: none;
padding: 10px 50px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.2s;
img {
width: 100%;
}
}

&:hover {
background-color: var(--bg-primary);
}

}
}
.sidebar-version {
padding: 10px 0px;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;

a {
color: var(--fg-inactive);
text-decoration: none;
font-weight: bold;
}
}

.content {
background-color: var(--bg-primary);
.sidebar-logout {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0px;
margin-top: 10px;

button {
color: var(--fg-primary);
flex: 1 1 auto;
padding: 30px 50px;
width: calc(100vw - $sidebarWidth);
overflow-x: hidden;
border: none;
padding: 10px 50px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.2s;

&:hover {
background-color: var(--bg-primary);
}
}
}
}

.content {
background-color: var(--bg-primary);
color: var(--fg-primary);
flex: 1 1 auto;
padding: 30px 50px;
width: calc(100vw - $sidebarWidth);
overflow-x: hidden;

.topbar {
.sidebar-toggle-button {
&:hover {
color: var(--fg-accent);
}
}
}
}
}
11 changes: 10 additions & 1 deletion openbullet2-web-client/src/app/main/main.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { faExclamationTriangle, faRightFromBracket } from '@fortawesome/free-solid-svg-icons';
import { UpdateInfoDto, VersionType } from './dtos/info/update-info.dto';
Expand All @@ -11,11 +11,14 @@ import { UserService } from './services/user.service';
styleUrls: ['./main.component.scss'],
})
export class MainComponent implements OnInit {
@ViewChild('sidebar') sidebar!: ElementRef;

updateInfo: UpdateInfoDto | null = null;
faExclamationTriangle = faExclamationTriangle;
faRightFromBracket = faRightFromBracket;
changelogModalVisible = false;


constructor(
private router: Router,
private infoService: InfoService,
Expand Down Expand Up @@ -64,4 +67,10 @@ export class MainComponent implements OnInit {
this.userService.resetJwt();
window.location.reload();
}

toggleSidebar() {
if (this.sidebar) {
this.sidebar.nativeElement.classList.toggle('show');
}
}
}