Skip to content
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

Jump to bottom

Cwdoe 1010 vertical tabs #89

Merged
merged 9 commits into from
Aug 21, 2023
Merged

Cwdoe 1010 vertical tabs #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
64ae9e4
wip
sei-tspencer Aug 11, 2023
16a4a78
background colors correct
sei-tspencer Aug 14, 2023
0b7bc80
final css fixes
sei-tspencer Aug 14, 2023
e65100c
rc5
sei-tspencer Aug 14, 2023
af390b8
team list
sei-tspencer Aug 14, 2023
9b777c2
collapsing panel
sei-tspencer Aug 15, 2023
1a9e1bf
persist nav expansion state on refresh
sei-tspencer Aug 15, 2023
0565afa
use all space
sei-tspencer Aug 15, 2023
d2a944e
added dark theme logo
sei-tspencer Aug 15, 2023
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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "blueprint-ui",
"version": "0.3.7-rc4",
"version": "0.3.7-rc5",
"scripts": {
"ng": "ng",
"start": "ng serve",
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/admin/admin-container/admin-container.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ <h2 class="icon-text">Administration</h2>
[src]="
(theme$ | async) === 'light-theme'
? '/assets/img/cmu-red-gray.png'
: '/assets/img/cmu-red-gray.png'
: '/assets/img/sei-logo-gray.png'
"
/>
</mat-sidenav>
Expand Down
169 changes: 83 additions & 86 deletions src/app/components/card-list/card-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,101 +3,98 @@
Released under a MIT (SEI)-style license, please see LICENSE.md in the
project root for license information or contact [email protected] for full terms.
-->
<div *ngIf="msel" style="height: 100%;">

<div style="height: 100%">
<section
matSort
(matSortChange)="sortChanged($event)"
class="mat-elevation-z2 mat-header-row background-alt"
>
<span class="mat-header-cell one-cell" mat-sort-header="move">
<div *ngIf="msel" class="frame">
<section
matSort
(matSortChange)="sortChanged($event)"
class="mat-elevation-z2 mat-header-row background-alt"
>
<span class="mat-header-cell one-cell" mat-sort-header="move">
<button
mat-icon-button
(click)="addCard(); $event.stopPropagation()"
style="outline: none; margin-right: 15px;"
title="Add new card"
*ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
>
<mat-icon class="mdi-24px self-center" fontIcon="mdi-plus-circle-outline"></mat-icon>
</button>
Move
</span>
<span class="mat-header-cell one-cell" mat-sort-header="inject">
Inject
</span>
<span class="mat-header-cell three-cell" mat-sort-header="name">Name</span>
<span class="mat-header-cell two-cell" mat-sort-header="description">Description</span>
<span class="mat-header-cell three-cell search-cell">
<mat-form-field class="search-control">
<input matInput [formControl]="filterControl" placeholder="Search" />
</mat-form-field>
<div style="width: 30px;">
<button
mat-icon-button
(click)="addCard(); $event.stopPropagation()"
style="outline: none; margin-right: 15px;"
title="Add new card"
*ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
(click)="filterControl.setValue(''); $event.stopPropagation()"
style="outline: none;"
title="Clear Search"
[disabled]="!filterString"
>
<mat-icon class="mdi-24px self-center" fontIcon="mdi-plus-circle-outline"></mat-icon>
<mat-icon class="mdi-24px self-center" fontIcon="mdi-close-circle-outline"></mat-icon>
</button>
Move
</span>
<span class="mat-header-cell one-cell" mat-sort-header="inject">
Inject
</span>
<span class="mat-header-cell three-cell" mat-sort-header="name">Name</span>
<span class="mat-header-cell two-cell" mat-sort-header="description">Description</span>
<span class="mat-header-cell three-cell search-cell">
<mat-form-field class="search-control">
<input matInput [formControl]="filterControl" placeholder="Search" />
</mat-form-field>
<div style="width: 30px;">
</div>
</span>
</section>

<section class="scrolling-region">
<!-- existing cards -->
<mat-expansion-panel
*ngFor="let item of sortedCards;"
[expanded]="expandedId === item.id"
>
<mat-expansion-panel-header
class="mat-row"
(click)="expandCard(item.id); $event.stopPropagation();"
>
<div class="mat-cell flex-row-cell one-cell">
<button
mat-icon-button
class="card-button"
(click)="editCard(item); $event.stopPropagation()"
title="Edit this card"
*ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
>
<mat-icon class="mdi-18px up-12" fontIcon="mdi-square-edit-outline"></mat-icon>
</button>
<button
mat-icon-button
(click)="filterControl.setValue(''); $event.stopPropagation()"
style="outline: none;"
title="Clear Search"
[disabled]="!filterString"
class="card-button"
(click)="deleteCard(item); $event.stopPropagation()"
title="Delete this card"
*ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
>
<mat-icon class="mdi-24px self-center" fontIcon="mdi-close-circle-outline"></mat-icon>
<mat-icon class="mdi-18px up-12" fontIcon="mdi-delete"></mat-icon>
</button>
&nbsp;{{ item.move }}
</div>
</span>
</section>

<section class="scrolling-region">
<!-- existing cards -->
<mat-expansion-panel
*ngFor="let item of sortedCards;"
[expanded]="expandedId === item.id"
>
<mat-expansion-panel-header
class="mat-row"
(click)="expandCard(item.id); $event.stopPropagation();"
>
<div class="mat-cell flex-row-cell one-cell">
<button
mat-icon-button
class="card-button"
(click)="editCard(item); $event.stopPropagation()"
title="Edit this card"
*ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
>
<mat-icon class="mdi-18px up-12" fontIcon="mdi-square-edit-outline"></mat-icon>
</button>
<button
mat-icon-button
class="card-button"
(click)="deleteCard(item); $event.stopPropagation()"
title="Delete this card"
*ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
>
<mat-icon class="mdi-18px up-12" fontIcon="mdi-delete"></mat-icon>
</button>
&nbsp;{{ item.move }}
</div>
<div class="mat-cell flex-row-cell one-cell">
&nbsp;{{ item.inject }}
<div class="mat-cell flex-row-cell one-cell">
&nbsp;{{ item.inject }}
</div>
<div class="mat-cell three-cell center-self">{{ item.name }}</div>
<div class="mat-cell five-cell center-self">{{ item.description }}</div>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="card-detail" (click)="$event.stopPropagation();">
<div class="single-detail">
<h4>Select Teams</h4>
</div>
<div class="mat-cell three-cell center-self">{{ item.name }}</div>
<div class="mat-cell five-cell center-self">{{ item.description }}</div>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="card-detail" (click)="$event.stopPropagation();">
<div class="single-detail">
<h4>Select Teams</h4>
</div>
<div class="single-detail">
<app-card-teams
style="width: 100%;"
[cardId]="item.id"
>
</app-card-teams>
</div>
<div class="single-detail">
<app-card-teams
style="width: 100%;"
[cardId]="item.id"
>
</app-card-teams>
</div>
</ng-template>
</mat-expansion-panel>
</section>
</div>
</div>
</ng-template>
</mat-expansion-panel>
</section>
</div>
9 changes: 8 additions & 1 deletion src/app/components/card-list/card-list.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@
// Released under a MIT (SEI)-style license. See LICENSE.md in the
// project root for license information.

.frame {
display: flex;
flex-direction: column;
flex: 1;
height: calc(100vh - 39px);
}

.mat-header-row {
min-height: 40px;
padding-left:30px;
Expand Down Expand Up @@ -118,7 +125,7 @@
}

.scrolling-region {
height: calc(100vh - 144px);
height: calc(100vh - 89px);
overflow: auto;
}

Expand Down
Loading
Loading