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

change-collections: smoother buttons (fixes #7986, #7990) #7989

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

change-collections: smoother buttons (fixes #7986, #7990) #7989

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
7da9eb8
buttons no longer cut off
jessewashburn Dec 20, 2024
8baa280
removed comments
jessewashburn Dec 20, 2024
1dfda17
improved spacing between buttons
jessewashburn Dec 20, 2024
31d4e74
fixed truncation and button alignment. Needs spacing between
jessewashburn Dec 23, 2024
44b1f5a
fixed button spacing, moved truncation to css
jessewashburn Dec 23, 2024
11fcd3b
spacing fix
jessewashburn Dec 23, 2024
23c93cb
linting fix
jessewashburn Dec 23, 2024
956c1f1
linting fix
jessewashburn Dec 23, 2024
f5a90ba
left margin for edit button
jessewashburn Dec 24, 2024
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
53 changes: 28 additions & 25 deletions src/app/shared/forms/planet-tag-input-dialog.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,34 +18,37 @@
<mat-form-field>
<mat-select i18n-placeholder placeholder="Subcollection of..." formControlName="attachedTo">
<mat-option i18n>None</mat-option>
<mat-option *ngFor="let tag of tags" [value]="tag._id || tag.name">{{tag.name}}</mat-option>
<mat-option *ngFor="let tag of tags" [value]="tag._id || tag.name">
<span class="truncated-name mat-body-2">{{ tag.name }}</span>
<span class="count">({{ tag.count || 0 }})</span>
</mat-option>
</mat-select>
</mat-form-field>
<span><button type="button" i18n mat-raised-button color="primary" [disabled]="!addTagForm.pending && !addTagForm.valid" (click)="addLabel()">Add Collection</button></span>
</form>
</mat-expansion-panel>
<mat-action-list *ngIf="selectMany">
<ng-container *ngFor="let tag of tags">
<mat-list-item (click)="tag.subTags.length === 0 ? tagChange(tag._id || tag.name) : toggleSubcollection($event,tag._id)" class="cursor-pointer">
<p matLine>
<planet-tag-input-toggle-icon *ngIf="tag.subTags.length > 0" [isOpen]="subcollectionIsOpen.get(tag._id)"></planet-tag-input-toggle-icon>
<mat-checkbox *ngIf="tag.subTags.length === 0" (change)="checkboxChange($event, tag._id || tag.name)" [checked]="isInMap(tag._id || tag.name, selected)" [indeterminate]="isInMap(tag._id || tag.name, indeterminate)"></mat-checkbox>
<span [ngClass]="{ 'mat-body-2': tag.subTags.length > 0, 'mat-body-1': tag.subTags.length === 0 }">{{tag.name + ' (' + (tag.count || 0) + ')'}}</span>
<button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,tag)" i18n>Edit</button>
<span i18n-matTooltip matTooltip="You may only delete a collection with no subcollections" [matTooltipDisabled]="tag.subTags.length === 0">
<button mat-stroked-button *ngIf="isUserAdmin" [disabled]="tag.subTags.length > 0" (click)="deleteTag($event,tag)" i18n>Delete</button>
</span>
</p>
<mat-list-item (click)="tag.subTags.length === 0 ? tagChange(tag._id || tag.name) : toggleSubcollection($event, tag._id)" class="cursor-pointer list-item-spacing">
<planet-tag-input-toggle-icon *ngIf="tag.subTags.length > 0" [isOpen]="subcollectionIsOpen.get(tag._id)" class="icon-spacing"></planet-tag-input-toggle-icon>
<mat-checkbox *ngIf="tag.subTags.length === 0" (change)="checkboxChange($event, tag._id || tag.name)" [checked]="isInMap(tag._id || tag.name, selected)" [indeterminate]="isInMap(tag._id || tag.name, indeterminate)" class="checkbox-spacing"></mat-checkbox>
<span class="truncated-name mat-body-2">{{ tag.name }}</span>
<span class="count">({{ tag.count || 0 }})</span>
<span class="toolbar-fill"></span>
<button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event, tag)" i18n class="button-spacing">Edit</button>
<span i18n-matTooltip matTooltip="You may only delete a collection with no subcollections" [matTooltipDisabled]="tag.subTags.length === 0">
<button mat-stroked-button *ngIf="isUserAdmin" [disabled]="tag.subTags.length > 0" (click)="deleteTag($event, tag)" i18n>Delete</button>
</span>
</mat-list-item>
<ng-container *ngIf="subcollectionIsOpen.get(tag._id)">
<mat-list-item *ngFor="let subTag of tag.subTags" (click)="tagChange(subTag._id || subTag.name, { parentTag: tag })" class="cursor-pointer">
<mat-icon mat-list-icon>subdirectory_arrow_right</mat-icon>
<p matLine>
<mat-checkbox (change)="checkboxChange($event, subTag._id || subTag.name)" [checked]="isInMap(subTag._id || subTag.name, selected)" [indeterminate]="isInMap(subTag._id || subTag.name, indeterminate)"></mat-checkbox>
<span class="mat-body-1">{{subTag.name + ' (' + (subTag.count || 0) + ')'}}</span>
<button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,subTag)" i18n>Edit</button>
<button mat-stroked-button *ngIf="isUserAdmin" (click)="deleteTag($event,subTag)" i18n>Delete</button>
</p>
<mat-list-item *ngFor="let subTag of tag.subTags" (click)="tagChange(subTag._id || subTag.name, { parentTag: tag })" class="cursor-pointer list-item-spacing">
<mat-icon mat-list-icon class="icon-spacing">subdirectory_arrow_right</mat-icon>
<mat-checkbox (change)="checkboxChange($event, subTag._id || subTag.name)" [checked]="isInMap(subTag._id || subTag.name, selected)" [indeterminate]="isInMap(subTag._id || subTag.name, indeterminate)" class="checkbox-spacing"></mat-checkbox>
<span class="truncated-name mat-body-2">{{ tag.name }}</span>
<span class="count">({{ tag.count || 0 }})</span>
<span class="toolbar-fill"></span>
<button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event, subTag)" i18n class="button-spacing">Edit</button>
<button mat-stroked-button *ngIf="isUserAdmin" (click)="deleteTag($event, subTag)" i18n>Delete</button>
</mat-list-item>
</ng-container>
<mat-divider></mat-divider>
Expand All @@ -54,21 +57,21 @@
<mat-nav-list *ngIf="!selectMany">
<mat-list-item (click)="selectOne('')" i18n>All</mat-list-item>
<ng-container *ngFor="let tag of tags">
<mat-list-item class="tag-text" (click)="tag.subTags.length === 0 ? selectOne(tag._id || tag.name) : toggleSubcollection($event, tag._id)"
[ngClass]="{ 'mat-body-2': tag.subTags.length > 0 }"
>
{{ (tag.name + ' (' + (tag.count || 0) + ')') | slice:0:30 }}{{ (tag.name.length + tag.count.toString().length > 30) ? '...' : '' }}
<mat-list-item class="tag-text" (click)="tag.subTags.length === 0 ? selectOne(tag._id || tag.name) : toggleSubcollection($event, tag._id)" [ngClass]="{ 'mat-body-2': tag.subTags.length > 0 }">
<span class="truncated-name mat-body-2">{{ tag.name }}</span>
<span class="count">({{ tag.count || 0 }})</span>
<planet-tag-input-toggle-icon *ngIf="tag.subTags.length > 0" [isOpen]="subcollectionIsOpen.get(tag._id)"></planet-tag-input-toggle-icon>
<span class="toolbar-fill"></span>
<button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,tag)" i18n>Edit</button>
<span i18n-matTooltip matTooltip="You may only delete a collection with no subcollections" [matTooltipDisabled]="tag.subTags.length === 0">
<button mat-stroked-button *ngIf="isUserAdmin" [disabled]="tag.subTags.length > 0" (click)="deleteTag($event,tag)" i18n>Delete</button>
<button mat-stroked-button *ngIf="isUserAdmin" [disabled]="tag.subTags.length > 0" (click)="deleteTag($event, tag)" i18n>Delete</button>
</span>
</mat-list-item>
<ng-container *ngIf="subcollectionIsOpen.get(tag._id)">
<mat-list-item *ngFor="let subTag of tag.subTags" (click)="selectOne(subTag._id || subTag.name)">
<mat-icon>subdirectory_arrow_right</mat-icon>
{{ truncateTagName(subTag) }}
<span class="truncated-name mat-body-2">{{ tag.name }}</span>
<span class="count">({{ tag.count || 0 }})</span>
<span class="toolbar-fill"></span>
<button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,subTag)" i18n>Edit</button>
<button mat-stroked-button *ngIf="isUserAdmin" (click)="deleteTag($event,subTag)" i18n>Delete</button>
Expand Down
29 changes: 1 addition & 28 deletions src/app/shared/forms/planet-tag-input-dialog.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,7 @@ import { DialogsPromptComponent } from '../../shared/dialogs/dialogs-prompt.comp

@Component({
'templateUrl': 'planet-tag-input-dialog.component.html',
'styles': [ `
:host {
display: block;
overflow: hidden;
}
:host mat-dialog-content {
overflow-y: auto;
max-height: calc(100vh - 100px);
}
:host .mat-list-option span {
font-weight: inherit;
}
:host p[matLine] *, :host .mat-nav-list .mat-list-item * {
margin-right: 0.25rem;
}
:host p[matLine] *:last-child, :host .mat-nav-list .mat-list-item *:last-child {
margin-right: 0;
}
:host mat-dialog-actions {
padding: 0;
}
` ]
'styleUrls': [ 'planet-tag-input-dialog.scss' ]
})
export class PlanetTagInputDialogComponent {

Expand Down Expand Up @@ -285,12 +264,6 @@ export class PlanetTagInputDialogComponent {
return checkValue(this.selected.entries());
}

truncateTagName(subTag: { name: string; count?: number }, maxLength: number): string {
if (this.deviceType === this.deviceTypes.DESKTOP) { maxLength = 50; } else { maxLength = 25; }
const truncatedName = subTag.name.length > maxLength ? subTag.name.slice(0, maxLength) + '...' : subTag.name;
return `${truncatedName} (${subTag.count || 0})`;
}

}

@Component({
Expand Down
77 changes: 77 additions & 0 deletions src/app/shared/forms/planet-tag-input-dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
:host {
display: block;
overflow: hidden;
}

:host mat-dialog-content {
overflow-y: auto;
max-height: calc(100vh - 156px);
box-sizing: border-box;
padding-bottom: 16px;
}

:host .mat-list-option span {
font-weight: inherit;
}

:host p[matLine] *, :host .mat-nav-list .mat-list-item * {
margin-right: 0.25rem;
}

:host p[matLine] *:last-child, :host .mat-nav-list .mat-list-item *:last-child {
margin-right: 0;
}

:host .mat-nav-list {
margin-bottom: 16px;
}

.mat-list-item:last-of-type {
margin-bottom: 8px;
}

:host mat-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 4px;
padding: 16px;
box-sizing: border-box;
flex-wrap: wrap;
background-color: #fff;
position: sticky;
bottom: 0;
border-top: 1px solid #e0e0e0;
}

:host mat-dialog-actions button {
margin: 0;
padding: 4px;
}

.icon-spacing,
.checkbox-spacing {
margin-right: 4px;
}

.button-spacing {
margin-right: 4px;
margin-left: 8px;
}

.truncated-name {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
overflow-wrap: anywhere;
}

.count {
white-space: nowrap;
}

.mat-action-list .count {
margin-left: 2px;
}
Loading