1
0
mirror of https://github.com/bpatrik/pigallery2.git synced 2025-01-10 04:07:35 +02:00

Replacing icons with https://ionic.io/ionicons in settings

#587
This commit is contained in:
Patrik J. Braun 2023-08-24 09:35:13 +02:00
parent da91f1082c
commit 258770ef6e
15 changed files with 99 additions and 57 deletions

View File

@ -116,6 +116,7 @@ import {
ionArrowUpOutline,
ionCalendarOutline,
ionCameraOutline,
ionCheckmarkOutline,
ionChevronBackOutline,
ionChevronDownOutline,
ionChevronForwardOutline,
@ -136,17 +137,20 @@ import {
ionImagesOutline,
ionInformationOutline,
ionLinkOutline,
ionLocationOutline, ionLockClosedOutline,
ionLocationOutline,
ionLockClosedOutline,
ionLogOutOutline,
ionMenuOutline,
ionMoonOutline,
ionPauseOutline,
ionPeopleOutline,
ionPersonOutline,
ionPinOutline,
ionPieChartOutline,
ionPlayOutline,
ionPricetagOutline,
ionPulseOutline,
ionRemoveOutline,
ionResizeOutline,
ionSaveOutline,
ionSearchOutline,
ionSettingsOutline,
@ -154,14 +158,16 @@ import {
ionShuffleOutline,
ionStar,
ionStarOutline,
ionStopOutline,
ionSunnyOutline,
ionTextOutline,
ionTimeOutline,
ionTimerOutline,
ionTrashOutline,
ionVideocamOutline,
ionVolumeMediumOutline,
ionVolumeMuteOutline,
ionWarningOutline,
ionWarningOutline
} from '@ng-icons/ionicons';
import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component';
@ -221,8 +227,9 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
ionInformationOutline, ionContractOutline, ionExpandOutline, ionCloseOutline,
ionTimerOutline,
ionPlayOutline, ionPauseOutline, ionVolumeMediumOutline, ionVolumeMuteOutline,
ionCameraOutline, ionWarningOutline, ionLockClosedOutline,ionChevronUpOutline,
ionFlagOutline,ionGlobeOutline
ionCameraOutline, ionWarningOutline, ionLockClosedOutline, ionChevronUpOutline,
ionFlagOutline, ionGlobeOutline, ionPieChartOutline, ionStopOutline,
ionTimeOutline,ionCheckmarkOutline,ionPulseOutline,ionResizeOutline
}),
ClipboardModule,
TooltipModule.forRoot(),

View File

@ -67,7 +67,7 @@
<button class="btn btn-primary" type="button"
[disabled]="savedSearch.searchQuery.text == ''"
(click)="saveSearch()">
<ng-icon name="ionSaveOutline" class="me-2"></ng-icon><span i18n>Save</span>
<ng-icon name="ionSaveOutline" class="me-1"></ng-icon><span i18n>Save</span>
</button>
</div>
</form>

View File

@ -1,7 +1,7 @@
<button class="btn btn-secondary" type="button"
[disabled]="disabled"
(click)="openModal(modal)">
<ng-icon class="me-2" name="ionFolderOutline"></ng-icon><ng-container i18n>To .pg2conf</ng-container>
<ng-icon class="me-1" name="ionFolderOutline"></ng-icon><ng-container i18n>To .pg2conf</ng-container>
</button>

View File

@ -47,13 +47,13 @@
class="btn btn-secondary me-2" type="button"
[disabled]="rawSearchText == ''"
(click)="openSaveSearchModal(saveSearchModal)">
<ng-icon name="ionSaveOutline" class="me-2"></ng-icon>
<ng-icon name="ionSaveOutline" class="me-1"></ng-icon>
<ng-container i18n>Save</ng-container>
</button>
<button class="btn btn-primary" type="button"
[routerLink]="['/search', HTMLSearchQuery]"
(click)="hideSearchModal()">
<ng-icon name="ionSearchOutline" class="me-2"></ng-icon>
<ng-icon name="ionSearchOutline" class="me-1"></ng-icon>
<ng-container i18n>Search</ng-container>
</button>
</div>
@ -94,7 +94,7 @@
<button class="btn btn-primary" type="button"
[disabled]="saveSearchName == ''"
(click)="saveSearch()">
<ng-icon name="ionSaveOutline" class="me-2"></ng-icon>
<ng-icon name="ionSaveOutline" class="me-1"></ng-icon>
<ng-container i18n>Save as album</ng-container>
</button>
</div>

View File

@ -35,3 +35,7 @@
margin-top: calc((100vh - 120px - 295px) / 2 - 60px)
}
}
ng-icon ::ng-deep svg {
vertical-align: text-top;
}

View File

@ -16,7 +16,7 @@
</div>
<div class="input-group mb-3">
<div class="input-group-text"><span class="oi oi-person"></span></div>
<div class="input-group-text"><ng-icon name="ionPersonOutline"></ng-icon></div>
<input type="text"
i18n-placeholder
class="form-control"
@ -29,7 +29,7 @@
</div>
<div class="input-group mb-3">
<div class="input-group-text"><span class="oi oi-lock-locked"></span></div>
<div class="input-group-text"><ng-icon name="ionLockClosedOutline"></ng-icon></div>
<input type="password"
i18n-placeholder
class="form-control"

View File

@ -3,24 +3,24 @@
Statistic:
</div>
<div class="col-md-2 col-6">
<span class="oi oi-folder" title="Folders" i18n-title aria-hidden="true"> </span>
<ng-icon name="ionFolderOutline" title="Folders" i18n-title></ng-icon>
{{settingsService.statistic.value ? settingsService.statistic.value.directories : '...'}}
</div>
<div class="col-md-2 col-6">
<span class="oi oi-camera-slr" title="Photos" i18n-title aria-hidden="true"> </span>
<ng-icon name="ionCameraOutline" title="Photos" i18n-title></ng-icon>
{{settingsService.statistic.value ? settingsService.statistic.value.photos : '...'}}
</div>
<div class="col-md-2 col-6">
<span class="oi oi-video" title="Videos" i18n-title aria-hidden="true"> </span>
<ng-icon name="ionVideocamOutline" title="Videos" i18n-title></ng-icon>
{{settingsService.statistic.value ? settingsService.statistic.value.videos : '...'}}
</div>
<div class="col-md-2 col-6">
<span class="oi oi-people" title="Persons" i18n-title aria-hidden="true"> </span>
<ng-icon name="ionPersonOutline" title="Persons" i18n-title></ng-icon>
{{settingsService.statistic.value ? settingsService.statistic.value.persons : '...'}}
</div>
<div class="col-md-2 col-6">
<span class="oi oi-pie-chart" title="Size" i18n-title aria-hidden="true"> </span>
<ng-icon name="ionPieChartOutline" title="Size" i18n-title></ng-icon>
{{settingsService.statistic.value ? (settingsService.statistic.value.diskUsage | fileSize) : '...'}}
</div>
</div>

View File

@ -26,7 +26,7 @@
<td>{{share.expires | date}}</td>
<td>
<button (click)="deleteSharing(share)" class="btn btn-danger float-end">
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
</button>
</td>
</tr>

View File

@ -26,6 +26,7 @@
</app-gallery-search-field>
<div class="input-group"
style="flex: 1"
*ngSwitchCase="'StringInput'">
<input
[type]="HTMLInputType" [min]="state.min" [max]="state.max" class="form-control"
@ -82,13 +83,13 @@
<button class="btn btn-primary"
(click)="showNewThemeModal(newThemeModal)">
<span class="oi oi-plus me-2"></span>
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
<ng-container i18n>Add new</ng-container>
</button>
<button class="btn btn-danger"
*ngIf="state.value !== 'default'"
(click)="removeTheme()">
<span class="oi oi-trash"></span>
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
</button>
<ng-template #newThemeModal>
@ -119,7 +120,7 @@
<div class="pe-0">
<button class="btn btn-primary" type="button"
(click)="addNewTheme()">
<span class="oi oi-plus me-2"></span>
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
<ng-container i18n>Add new Theme</ng-container>
</button>
</div>
@ -255,7 +256,7 @@
<button [disabled]="state.value.length == 1" (click)="removeLayer(layer)"
[ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
class="btn float-end">
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
</button>
</td>
</tr>
@ -263,7 +264,9 @@
<div class="row justify-content-end">
<button class="btn btn-primary"
(click)="addNewLayer()" i18n>+ Add Layer
(click)="addNewLayer()">
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
<span i18n>Add Layer</span>
</button>
</div>
</div>
@ -285,7 +288,7 @@
<button [disabled]="state.value.length == 1" (click)="remove(i)"
[ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
class="btn float-end">
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
</button>
</div>
</div>
@ -322,7 +325,9 @@
<div class="row">
<div class="col pe-0">
<button class="btn btn-primary float-end"
(click)="AddNew()" i18n>+ Add matcher
(click)="AddNew()">
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
<span i18n>Add matcher</span>
</button>
</div>
</div>
@ -345,7 +350,7 @@
<button [disabled]="state.value.length == 1" (click)="remove(i)"
[ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
class="btn float-end">
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
</button>
</div>
@ -366,7 +371,9 @@
<div class="row">
<div class="col pe-0">
<button class="btn btn-primary float-end"
(click)="AddNew()" i18n>+ Add path theme group
(click)="AddNew()">
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
<span i18n>Add path theme group</span>
</button>
</div>
</div>
@ -421,7 +428,7 @@
<button [disabled]="state.value.length == 1" (click)="remove(i)"
[ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
class="btn float-end">
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
</button>
</div>
@ -429,7 +436,9 @@
<div class="row">
<div class="col pe-0">
<button class="btn btn-primary float-end"
(click)="AddNew()" i18n>+ Add Link
(click)="AddNew()">
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
<span i18n>Add Link</span>
</button>
</div>
</div>
@ -484,7 +493,7 @@
(click)="remove(i)"
[ngClass]="(state.value.length > 1 || state.tags.uiOptional)? 'btn-danger':'btn-secondary'"
class="btn float-end">
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
</button>
</div>
@ -493,7 +502,9 @@
<div class="col pe-0">
<button class="btn btn-primary float-end"
[disabled]="state.readonly"
(click)="AddNew()" i18n>+ Add
(click)="AddNew()">
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
<span i18n>Add</span>
</button>
</div>
</div>
@ -521,8 +532,8 @@
<div class="col-auto pe-0">
<button class="btn btn-secondary float-end"
[id]="'list_btn_'+idName+i"
[name]="'list_btn_'+idName+i" (click)="remove(i)"><span
class="oi oi-trash"></span>
[name]="'list_btn_'+idName+i" (click)="remove(i)">
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
</button>
</div>
</ng-container>
@ -533,7 +544,9 @@
<button class="btn btn-primary mt-1 float-end"
[id]="'btn_add_'+idName"
[name]="'btn_add_'+idName"
(click)="AddNew()" i18n>+ Add
(click)="AddNew()">
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
<span i18n>Add</span>
</button>
</div>
</ng-container>
@ -542,14 +555,18 @@
<span
triggers="mouseenter:mouseleave"
placement="bottom"
container="body"
[popover]="popTemplate"
class="oi oi-warning text-warning warning-icon ms-2"></span>
class="text-warning warning-icon ms-2">
<ng-icon name="ionWarningOutline"></ng-icon>
</span>
</div>
</div>
<small class="form-text text-muted" *ngIf="settingsService.configStyle == ConfigStyle.full">
<ng-container *ngIf="experimental">
<span class="oi oi-warning"></span>[Experimental]
<ng-icon name="ionWarningOutline"></ng-icon>
[<span i18n>Experimental</span>]
</ng-container>
<ng-container *ngIf="description">{{description}} </ng-container>
<span *ngIf="type==='array' && (state.arrayType === 'string' || isNumberArray)" i18n>';' separated list.</span>
@ -559,11 +576,13 @@
#{{state.tags?.githubIssue}}.</a>
<ng-container *ngIf="state.tags?.uiResetNeeded?.db && !isOriginal">
<br/>
<span class="oi oi-warning" i18n>Reset database after changing this settings!</span>
<ng-icon name="ionWarningOutline"></ng-icon>
<span i18n>Reset database after changing this settings!</span>
</ng-container>
<ng-container *ngIf="state.tags?.uiResetNeeded?.server && !isOriginal">
<br/>
<span class="oi oi-warning" i18n>Restart server after changing this settings!</span>
<ng-icon name="ionWarningOutline"></ng-icon>
<span i18n>Restart server after changing this settings!</span>
</ng-container>
</small>
</div>

View File

@ -35,7 +35,7 @@
<button [disabled]="!canModifyUser(user)" (click)="deleteUser(user)"
[ngClass]="canModifyUser(user)? 'btn-danger':'btn-secondary'"
class="btn float-end">
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
</button>
</td>
</tr>
@ -43,7 +43,9 @@
</table>
<button class="btn btn-primary float-end"
(click)="initNewUser()" i18n>+ Add user
(click)="initNewUser()">
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
<span i18n>Add user</span>
</button>
</ng-container>

View File

@ -6,13 +6,13 @@
(click)="start();">
<span class="me-2" *ngIf="!shortName"><ng-container
i18n>Run now</ng-container>: {{backendTextService.getJobName(jobName)}}</span>
<span class="oi oi-media-play"></span>
<ng-icon name="ionPlayOutline"></ng-icon>
</button>
<button class="btn btn-secondary"
*ngIf="Running"
[disabled]="disabled || jobsService.jobStartingStopping[jobName] || Progress.state !== JobProgressStates.running"
(click)="stop();">
<span class="oi oi-media-stop"></span>
<ng-icon name="ionStopOutline"></ng-icon>
<span class="ms-2" *ngIf="!shortName"><ng-container
i18n>Cancel</ng-container>: {{backendTextService.getJobName(jobName)}}</span>
</button>

View File

@ -3,21 +3,21 @@
Last run:
</div>
<div class="col-md-4 col-12" title="Run between" i18n-title>
<span class="oi oi-clock" aria-hidden="true"></span>
<ng-icon name="ionTimeOutline"></ng-icon>
{{progress.time.start | date:'medium'}} - {{progress.time.end | date:'mediumTime'}}
</div>
<div class="col-md-2 col-4"
[title]="ProgressTitle">
<span class="oi oi-check" aria-hidden="true"></span>
<ng-icon name="ionCheckmarkOutline"></ng-icon>
{{progress.steps.processed + progress.steps.skipped}}/{{progress.steps.all}}
</div>
<div class="col-md-2 col-4" title="Status" i18n-title>
<span class="oi oi-pulse" aria-hidden="true"></span>
<ng-icon name="ionPulseOutline"></ng-icon>
{{State}}
</div>
<div class="col-md-2 col-4">
<button class="btn btn-secondary float-end" (click)="openModal(template)">
<span class="oi oi-resize-both"></span>
<ng-icon name="ionResizeOutline"></ng-icon>
</button>
</div>
</div>
@ -34,7 +34,7 @@
i18n-value name="details">
<div class="input-group-append">
<button class="btn btn-secondary" (click)="openModal(template)">
<span class="oi oi-resize-both"></span>
<ng-icon name="ionResizeOutline"></ng-icon>
</button>
</div>
</div>

View File

@ -22,8 +22,8 @@
</ng-container>
</div>
<div>
<button class="btn btn-danger ms-0" (click)="remove(schedule)"><span
class="oi oi-trash"></span>
<button class="btn btn-danger ms-0" (click)="remove(schedule)">
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
</button>
<app-settings-job-button class="ms-md-2 mt-2 mt-md-0"
(jobError)="error=$event"
@ -266,8 +266,8 @@
[disabled]="mp.sortBy.length < 2"
[id]="'list_btn_'+configEntry.id+'_'+i+'_'+j+'_'+k"
[name]="'list_btn_'+configEntry.id+'_'+i+'_'+j+'_'+k"
(click)="removeFromArray(mp.sortBy,k)"><span
class="oi oi-trash"></span>
(click)="removeFromArray(mp.sortBy,k)">
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
</button>
</div>
</div>
@ -276,7 +276,9 @@
<button class="btn btn-primary mt-1 float-end"
[id]="'btn_add_'+configEntry.id+'_'+i+'_'+j"
[name]="'btn_add_'+configEntry.id+'_'+i+'_'+j"
(click)="AddNewSorting(mp.sortBy)" i18n>+ Add
(click)="AddNewSorting(mp.sortBy)">
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
<span i18n>Add</span>
</button>
</div>
</div>
@ -309,8 +311,8 @@
[disabled]="AsMediaPickDTOArray(schedule.config[configEntry.id]).length < 2"
[id]="'list_btn_'+configEntry.id+'_'+i+'_'+j"
[name]="'list_btn_'+configEntry.id+'_'+i+'_'+j"
(click)="removeFromArray(AsMediaPickDTOArray(schedule.config[configEntry.id]),j)"><span
class="oi oi-trash"></span>
(click)="removeFromArray(AsMediaPickDTOArray(schedule.config[configEntry.id]),j)">
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
</button>
</div>
<hr/>
@ -321,7 +323,9 @@
<button class="btn btn-primary mt-1 float-end"
[id]="'btn_add_'+configEntry.id+'_'+i"
[name]="'btn_add_'+configEntry.id+'_'+i"
(click)="AddNewMediaPickDTO(schedule.config[configEntry.id])" i18n>+ Add
(click)="AddNewMediaPickDTO(schedule.config[configEntry.id])">
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
<span i18n>Add</span>
</button>
</div>
</ng-container>
@ -352,7 +356,9 @@
</div>
<button class="btn btn-primary float-end mt-2"
(click)="prepareNewJob()" i18n>+ Add Job
(click)="prepareNewJob()">
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
<span i18n>Add Job</span>
</button>

View File

@ -29,3 +29,7 @@
.error-message {
color: #d9534f;
}
ng-icon ::ng-deep svg {
vertical-align: text-top;
}

View File

@ -16,7 +16,7 @@
<div class="input-group mb-3">
<div class="input-group-text"><span class="oi oi-lock-locked"></span></div>
<div class="input-group-text"><ng-icon name="ionLockClosedOutline"></ng-icon></div>
<input type="password"
i18n-placeholder
class="form-control"