Replace all glyphicon icons
This commit is contained in:
Chocobozzz
parent
c2faa073d1
commit
93c728a25a
|
|
@ -47,7 +47,6 @@
|
|||
"@angular/service-worker": "^13.0.0",
|
||||
"@babel/core": "^7.15.0",
|
||||
"@babel/preset-env": "^7.15.0",
|
||||
"@neos21/bootstrap3-glyphicons": "^1.0.1",
|
||||
"@ng-bootstrap/ng-bootstrap": "^12.1.2",
|
||||
"@ng-select/ng-select": "^8.1.1",
|
||||
"@ngx-loading-bar/core": "^6.0.0",
|
||||
|
|
|
|||
|
|
@ -28,13 +28,6 @@ tr.banned > td {
|
|||
@include margin-left(15px);
|
||||
}
|
||||
|
||||
.user-table-primary-text .glyphicon {
|
||||
@include margin-left(0.1rem);
|
||||
|
||||
font-size: 80%;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
p-tableCheckbox {
|
||||
position: relative;
|
||||
top: -2.5px;
|
||||
|
|
|
|||
|
|
@ -44,10 +44,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
td .glyphicon {
|
||||
@include margin-right(10px);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,11 +16,5 @@ input[type=text] {
|
|||
|
||||
.actor-display-name {
|
||||
font-size: 16px;
|
||||
|
||||
+ .glyphicon {
|
||||
@include margin-left(5px);
|
||||
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,13 +55,6 @@
|
|||
color: pvar(--mainForegroundColor);
|
||||
line-height: 1rem;
|
||||
|
||||
div .glyphicon {
|
||||
@include margin-left(0.1rem);
|
||||
|
||||
font-size: 80%;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
div + div {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
[redraftValue]="commentReplyRedraftValue"
|
||||
>
|
||||
<div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2">
|
||||
<span class="glyphicon glyphicon-menu-down"></span>
|
||||
<span class="chevron-down"></span>
|
||||
|
||||
<ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
|
||||
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
|
||||
<ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template>
|
||||
|
||||
<my-loader size="sm" class="comment-thread-loading ms-1" [loading]="threadLoading[comment.id]"></my-loader>
|
||||
<my-loader size="sm" class="ms-1" [loading]="threadLoading[comment.id]"></my-loader>
|
||||
</div>
|
||||
</my-video-comment>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,14 +11,6 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.glyphicon,
|
||||
.comment-thread-loading {
|
||||
@include margin-right(5px);
|
||||
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.title-block {
|
||||
.title-page {
|
||||
@include margin-right(0);
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@
|
|||
<label class="small-title" i18n>GLOBAL SEARCH</label>
|
||||
<div class="advanced-search-status muted">
|
||||
<span *ngIf="serverConfig" class="me-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
|
||||
<i class="glyphicon glyphicon-globe"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div>
|
||||
|
|
@ -41,7 +40,6 @@
|
|||
<span [ngClass]="canSearchAnyURI ? 'text-success' : 'muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
|
||||
<span *ngIf="canSearchAnyURI()" class="me-1" i18n>any instance</span>
|
||||
<span *ngIf="!canSearchAnyURI()" class="me-1" i18n>only followed instances</span>
|
||||
<i [ngClass]="canSearchAnyURI() ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -129,10 +129,6 @@ li.suggestion {
|
|||
}
|
||||
}
|
||||
|
||||
.glyphicon {
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.advanced-search-status {
|
||||
height: max-content;
|
||||
cursor: default;
|
||||
|
|
|
|||
|
|
@ -352,10 +352,6 @@ my-actor-avatar {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i.glyphicon-menu-right {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.hover-display-toggle {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -24,14 +24,19 @@
|
|||
<div>
|
||||
<button
|
||||
*ngIf="unreadNotifications"
|
||||
i18n-title title="Mark all as read" class="glyphicon glyphicon-ok me-2"
|
||||
i18n-title title="Mark all as read" class="me-2"
|
||||
(click)="markAllAsRead()"
|
||||
></button>
|
||||
>
|
||||
<my-global-icon iconName="tick"></my-global-icon>
|
||||
</button>
|
||||
|
||||
<a
|
||||
i18n-title title="Update your notification preferences" class="glyphicon glyphicon-cog"
|
||||
i18n-title title="Update your notification preferences"
|
||||
routerLink="/my-account/settings" fragment="notifications"
|
||||
#settingsNotifications (click)="onNavigate(settingsNotifications)"
|
||||
></a>
|
||||
>
|
||||
<my-global-icon iconName="cog"></my-global-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -119,6 +119,10 @@
|
|||
color: rgba(20, 20, 20, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.all-notifications {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
<a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:"' + abuse.reporterAccount.displayName + '"' }"
|
||||
class="ms-auto muted abuse-details-links" i18n
|
||||
>
|
||||
{abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ms-1 glyphicon glyphicon-flag"></span>
|
||||
{abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}
|
||||
<my-global-icon iconName="flag"></my-global-icon>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -39,7 +40,8 @@
|
|||
<a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:"' +abuse.flaggedAccount.displayName + '"' }"
|
||||
class="ms-auto muted abuse-details-links" i18n
|
||||
>
|
||||
{abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ms-1 glyphicon glyphicon-flag"></span>
|
||||
{abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}
|
||||
<my-global-icon iconName="flag"></my-global-icon>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,3 +15,7 @@
|
|||
.abuse-details-links {
|
||||
@include disable-default-a-behaviour;
|
||||
}
|
||||
|
||||
my-global-icon[iconName=flag] {
|
||||
width: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
</span>
|
||||
|
||||
<span name>
|
||||
<span *ngIf="abuse.video.blacklisted" i18n-title title="The video was blocked" class="glyphicon glyphicon-ban-circle"></span>
|
||||
<my-global-icon *ngIf="abuse.video.blacklisted" iconName="no" i18n-title title="The video was blocked"></my-global-icon>
|
||||
</span>
|
||||
</my-video-cell>
|
||||
</td>
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
<div class="table-video-text">
|
||||
<div>
|
||||
{{ abuse.video.name }}
|
||||
<span class="glyphicon glyphicon-trash"></span>
|
||||
<my-global-icon iconName="delete"></my-global-icon>
|
||||
</div>
|
||||
<div i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
|
||||
</div>
|
||||
|
|
@ -116,8 +116,8 @@
|
|||
<td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short' }}</td>
|
||||
|
||||
<td class="c-hand abuse-states" [pRowToggler]="abuse">
|
||||
<span *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-ok"></span>
|
||||
<span *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-remove"></span>
|
||||
<my-global-icon *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" iconName="tick"></my-global-icon>
|
||||
<my-global-icon *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" iconName="cross"></my-global-icon>
|
||||
</td>
|
||||
|
||||
<td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)">
|
||||
|
|
|
|||
|
|
@ -7,10 +7,6 @@
|
|||
color: var(--greyForegroundColor);
|
||||
}
|
||||
|
||||
.abuse-states .glyphicon-comment {
|
||||
@include margin-left(0.5rem);
|
||||
}
|
||||
|
||||
.abuse-messages {
|
||||
my-global-icon {
|
||||
@include margin-left(3px);
|
||||
|
|
@ -20,3 +16,10 @@
|
|||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-video-text my-global-icon,
|
||||
my-video-cell my-global-icon {
|
||||
width: 15px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,5 +25,5 @@
|
|||
(keyup)="onInputSearch($event)"
|
||||
>
|
||||
|
||||
<a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></a>
|
||||
<my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></my-global-icon>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,9 @@
|
|||
#input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
|
||||
/>
|
||||
|
||||
<button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [title]="toggleTitle">
|
||||
<span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span>
|
||||
<button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
|
||||
<my-global-icon *ngIf="show" iconName="sensitive"></my-global-icon>
|
||||
<my-global-icon *ngIf="!show" iconName="unsensitive"></my-global-icon>
|
||||
</button>
|
||||
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -9,10 +9,8 @@ input {
|
|||
|
||||
.btn {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
width: 18px;
|
||||
@include button-with-icon(18px);
|
||||
}
|
||||
|
||||
.copy-text {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { Component, forwardRef, Input } from '@angular/core'
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
|
||||
import { Notifier } from '@app/core'
|
||||
import { GlobalIconName } from '../shared-icons'
|
||||
|
||||
@Component({
|
||||
selector: 'my-input-text',
|
||||
|
|
@ -47,6 +48,12 @@ export class InputTextComponent implements ControlValueAccessor {
|
|||
this.notifier.success($localize`Copied`)
|
||||
}
|
||||
|
||||
getEyeIcon (): GlobalIconName {
|
||||
if (this.show) return 'sensitive'
|
||||
|
||||
return 'unsensitive'
|
||||
}
|
||||
|
||||
propagateChange = (_: any) => { /* empty */ }
|
||||
|
||||
writeValue (value: string) {
|
||||
|
|
|
|||
|
|
@ -91,6 +91,7 @@ export type GlobalIconName = keyof typeof icons
|
|||
})
|
||||
export class GlobalIconComponent implements OnInit {
|
||||
@Input() iconName: GlobalIconName
|
||||
@Input() width: string
|
||||
|
||||
constructor (
|
||||
private el: ElementRef,
|
||||
|
|
@ -106,6 +107,10 @@ export class GlobalIconComponent implements OnInit {
|
|||
'filter:internal.common.svg-icons.get-content.params',
|
||||
'filter:internal.common.svg-icons.get-content.result'
|
||||
)
|
||||
|
||||
if (this.width) {
|
||||
nativeElement.style.width = this.width
|
||||
}
|
||||
}
|
||||
|
||||
private getSVGContent (options: { name: string }) {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,2 @@
|
|||
<span *ngIf="value === true" class="glyphicon glyphicon-ok" i18n-aria-label aria-label="yes"></span>
|
||||
<span *ngIf="value === false" class="glyphicon glyphicon-remove" i18n-aria-label aria-label="no"></span>
|
||||
|
||||
<my-global-icon *ngIf="value === true" iconName="tick" i18n-aria-label aria-label="yes"></my-global-icon>
|
||||
<my-global-icon *ngIf="value === false" iconName="cross" i18n-aria-label aria-label="no"></my-global-icon>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
|
||||
.glyphicon-ok {
|
||||
my-global-icon[iconName=tick] {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
.glyphicon-remove {
|
||||
my-global-icon[iconName=cross] {
|
||||
color: $red;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<p class="stat-value">{{ serverStats.totalUsers | number }}</p>
|
||||
<p class="stat-label" i18n>users</p>
|
||||
</div>
|
||||
<i class="glyphicon glyphicon-user icon-bottom"></i>
|
||||
<my-global-icon iconName="user"></my-global-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<p class="stat-value">{{ serverStats.totalLocalVideos | number }}</p>
|
||||
<p class="stat-label" i18n>videos</p>
|
||||
</div>
|
||||
<i class="glyphicon glyphicon-facetime-video"></i>
|
||||
<my-global-icon iconName="film"></my-global-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<p class="stat-value">{{ serverStats.totalLocalVideoViews | number }}</p>
|
||||
<p class="stat-label" i18n>views</p>
|
||||
</div>
|
||||
<i class="glyphicon glyphicon-eye-open"></i>
|
||||
<my-global-icon iconName="sensitive"></my-global-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<p class="stat-value">{{ serverStats.totalLocalVideoComments | number }}</p>
|
||||
<p class="stat-label" i18n>comments</p>
|
||||
</div>
|
||||
<i class="glyphicon glyphicon-comment"></i>
|
||||
<my-global-icon iconName="message-circle"></my-global-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p>
|
||||
<p class="stat-label" i18n>hosted video</p>
|
||||
</div>
|
||||
<i class="glyphicon glyphicon-hdd"></i>
|
||||
<my-global-icon iconName="home"></my-global-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
<p class="stat-value">{{ serverStats.totalVideos | number }}</p>
|
||||
<p class="stat-label" i18n>videos</p>
|
||||
</div>
|
||||
<i class="glyphicon glyphicon-facetime-video"></i>
|
||||
<my-global-icon iconName="film"></my-global-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
<p class="stat-value">{{ serverStats.totalVideoComments | number }}</p>
|
||||
<p class="stat-label" i18n>comments</p>
|
||||
</div>
|
||||
<i class="glyphicon glyphicon-comment"></i>
|
||||
<my-global-icon iconName="message-circle"></my-global-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
<p class="stat-value">{{ serverStats.totalInstanceFollowers | number }}</p>
|
||||
<p class="stat-label" i18n>followers</p>
|
||||
</div>
|
||||
<i class="glyphicon glyphicon-retweet"></i>
|
||||
<my-global-icon iconName="share"></my-global-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
<p class="stat-value">{{ serverStats.totalInstanceFollowing | number }}</p>
|
||||
<p class="stat-label" i18n>following</p>
|
||||
</div>
|
||||
<i class="glyphicon glyphicon-retweet"></i>
|
||||
<my-global-icon iconName="globe"></my-global-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
|
|
@ -19,22 +21,19 @@ h3 {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.glyphicon {
|
||||
opacity: 0.12;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: -24px;
|
||||
|
||||
&.icon-bottom {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
font-size: 8em;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
opacity: 0.12;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: -24px;
|
||||
width: 110px;
|
||||
|
||||
&.icon-bottom {
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
|
||||
import { NgModule } from '@angular/core'
|
||||
import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
|
||||
import { SharedGlobalIconModule } from '../shared-icons'
|
||||
import { SharedMainModule } from '../shared-main/shared-main.module'
|
||||
import { FeatureBooleanComponent } from './feature-boolean.component'
|
||||
import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
|
||||
|
|
@ -12,6 +13,7 @@ import { InstanceService } from './instance.service'
|
|||
@NgModule({
|
||||
imports: [
|
||||
SharedMainModule,
|
||||
SharedGlobalIconModule,
|
||||
NgbAccordionModule
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export class LoaderComponent {
|
|||
sm: {
|
||||
width: '1rem',
|
||||
height: '1rem',
|
||||
'border-width': '.2em'
|
||||
'border-width': '0.15rem'
|
||||
},
|
||||
xl: {
|
||||
width: '3rem',
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
[placeholder]="placeholder"
|
||||
>
|
||||
|
||||
<a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></a>
|
||||
<my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon>
|
||||
</div>
|
||||
|
||||
<my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
.root > my-global-icon {
|
||||
@include margin-left(10px);
|
||||
|
||||
height: 28px;
|
||||
|
|
@ -25,3 +25,7 @@ input {
|
|||
box-shadow: 0 0 5px 0 #a5a5a5;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group > my-global-icon {
|
||||
width: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -266,7 +266,7 @@
|
|||
[attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
|
||||
|
||||
<ng-container *ngIf="isAdvancedCustomizationCollapsed">
|
||||
<span class="glyphicon glyphicon-menu-down"></span>
|
||||
<span class="chevron-down"></span>
|
||||
|
||||
<ng-container i18n>
|
||||
More customization
|
||||
|
|
@ -274,7 +274,7 @@
|
|||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!isAdvancedCustomizationCollapsed">
|
||||
<span class="glyphicon glyphicon-menu-up"></span>
|
||||
<span class="chevron-up"></span>
|
||||
|
||||
<ng-container i18n>
|
||||
Less customization
|
||||
|
|
|
|||
|
|
@ -49,10 +49,6 @@ my-input-text {
|
|||
font-size: 16px;
|
||||
font-weight: $font-semibold;
|
||||
cursor: pointer;
|
||||
|
||||
.glyphicon {
|
||||
@include margin-right(5px);
|
||||
}
|
||||
}
|
||||
|
||||
.video-caption-block {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core'
|
|||
selector: 'my-table-expander-icon',
|
||||
template: `
|
||||
<span class="expander">
|
||||
<i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
|
||||
<i [ngClass]="expanded ? 'chevron-down' : 'chevron-right'"></i>
|
||||
</span>`
|
||||
})
|
||||
export class TableExpanderIconComponent {
|
||||
|
|
|
|||
|
|
@ -59,13 +59,6 @@
|
|||
color: pvar(--mainForegroundColor);
|
||||
line-height: 1rem;
|
||||
|
||||
div .glyphicon {
|
||||
@include margin-left(0.1rem);
|
||||
|
||||
font-size: 80%;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
div + div {
|
||||
color: var(--greyForegroundColor);
|
||||
font-size: 11px;
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@
|
|||
[attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
|
||||
>
|
||||
<ng-container *ngIf="isAdvancedCustomizationCollapsed">
|
||||
<span class="glyphicon glyphicon-menu-down"></span>
|
||||
<span class="chevron-down"></span>
|
||||
|
||||
<ng-container i18n>
|
||||
Advanced
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!isAdvancedCustomizationCollapsed">
|
||||
<span class="glyphicon glyphicon-menu-up"></span>
|
||||
<span class="chevron-up"></span>
|
||||
|
||||
<ng-container i18n>
|
||||
Simple
|
||||
|
|
|
|||
|
|
@ -17,10 +17,6 @@
|
|||
.nav-tabs {
|
||||
margin-top: 10x;
|
||||
}
|
||||
|
||||
.glyphicon {
|
||||
@include margin-right(5px);
|
||||
}
|
||||
}
|
||||
|
||||
.peertube-select-container.title-select {
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-back"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5"/></svg>
|
||||
|
After Width: | Height: | Size: 298 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-forward"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>
|
||||
|
After Width: | Height: | Size: 315 B |
|
|
@ -1,19 +1,15 @@
|
|||
$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
||||
|
||||
@use 'sass:math';
|
||||
|
||||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
@use '_icons' as *;
|
||||
|
||||
@use '_fonts';
|
||||
|
||||
@use './classes';
|
||||
|
||||
@use './custom-markup';
|
||||
|
||||
@use './ng-select';
|
||||
|
||||
// Needs an import because we extends glyphicon icons in primeng
|
||||
@import './bootstrap';
|
||||
@import './primeng-custom';
|
||||
|
||||
|
|
@ -316,15 +312,27 @@ my-global-icon[iconName=external-link] {
|
|||
}
|
||||
|
||||
.chevron-down {
|
||||
@include chevron-down(0.55rem, 0.20em);
|
||||
@include chevron-down(0.55rem, 0.15rem);
|
||||
|
||||
margin: 0 5px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.chevron-up {
|
||||
@include chevron-up(0.55rem, 0.20em);
|
||||
@include chevron-up(0.55rem, 0.15rem);
|
||||
|
||||
margin: 0 5px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.chevron-right {
|
||||
@include chevron-right(0.55rem, 0.15rem);
|
||||
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.chevron-left {
|
||||
@include chevron-left(0.55rem, 0.15rem);
|
||||
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
/* offsetTop for scrollToAnchor */
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
||||
|
||||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
|
||||
|
|
@ -31,8 +29,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
@import '~bootstrap/scss/helpers';
|
||||
@import '~bootstrap/scss/utilities/api';
|
||||
|
||||
@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
|
||||
|
||||
.flex-auto {
|
||||
flex: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
@use '_variables' as *;
|
||||
|
||||
@mixin chevron ($size, $border-width) {
|
||||
border-style: solid;
|
||||
border-width: $border-width $border-width 0 0;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
transform: rotate(-45deg);
|
||||
height: $size;
|
||||
width: $size;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@mixin chevron-right ($size, $border-width) {
|
||||
@include chevron($size, $border-width);
|
||||
|
||||
left: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
@mixin chevron-down ($size, $border-width) {
|
||||
@include chevron($size, $border-width);
|
||||
|
||||
bottom: 0.15em;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
@mixin chevron-up ($size, $border-width) {
|
||||
@include chevron($size, $border-width);
|
||||
|
||||
top: 0.15em;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
@mixin chevron-left ($size, $border-width) {
|
||||
@include chevron($size, $border-width);
|
||||
|
||||
left: 0.25em;
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
@mixin arrow-up ($size) {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: $size solid transparent;
|
||||
border-right: $size solid transparent;
|
||||
border-bottom: $size solid pvar(--mainForegroundColor);
|
||||
}
|
||||
|
||||
@mixin arrow-down ($size) {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: $size solid transparent;
|
||||
border-right: $size solid transparent;
|
||||
border-top: $size solid pvar(--mainForegroundColor);
|
||||
}
|
||||
|
|
@ -562,45 +562,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin chevron ($size, $border-width) {
|
||||
border-style: solid;
|
||||
border-width: $border-width $border-width 0 0;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
transform: rotate(-45deg);
|
||||
height: $size;
|
||||
width: $size;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@mixin chevron-right ($size, $border-width) {
|
||||
@include chevron($size, $border-width);
|
||||
|
||||
left: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
@mixin chevron-down ($size, $border-width) {
|
||||
@include chevron($size, $border-width);
|
||||
|
||||
bottom: 0.15em;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
@mixin chevron-up ($size, $border-width) {
|
||||
@include chevron($size, $border-width);
|
||||
|
||||
top: 0.15em;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
@mixin chevron-left ($size, $border-width) {
|
||||
@include chevron($size, $border-width);
|
||||
|
||||
left: 0.25em;
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
|
||||
@mixin in-content-small-title {
|
||||
text-transform: uppercase;
|
||||
color: pvar(--mainColor);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
@use '_icons' as *;
|
||||
@use './_player-variables' as *;
|
||||
|
||||
$setting-transition-duration: 0.15s;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
@use '_icons' as *;
|
||||
|
||||
/* stylelint-disable */
|
||||
@import '~primeng/resources/primeng.css';
|
||||
|
|
@ -495,14 +496,9 @@ body p-selectbutton.ng-dirty.ng-invalid .p-button {
|
|||
border: 1px solid #a80000;
|
||||
}
|
||||
|
||||
// data table customizations
|
||||
|
||||
@mixin glyphicon-light {
|
||||
font-family: 'Glyphicons Halflings';
|
||||
text-decoration: none !important;
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
font-display: swap;
|
||||
}
|
||||
// ---------------------------------------------------------------------------
|
||||
// PeerTube customizations
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
p-table {
|
||||
.p-datatable-header {
|
||||
|
|
@ -618,24 +614,20 @@ p-table {
|
|||
&.p-highlight {
|
||||
background-color: pvar(--submenuBackgroundColor) !important;
|
||||
|
||||
.pi {
|
||||
@extend .glyphicon !optional;
|
||||
.pi-sort-amount-up-alt,
|
||||
.pi-sort-amount-down {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
}
|
||||
|
||||
color: #000 !important;
|
||||
font-size: 11px !important;
|
||||
top: 0 !important;
|
||||
.pi-sort-amount-up-alt {
|
||||
@include arrow-up(5px);
|
||||
}
|
||||
|
||||
&.pi-sort-amount-up-alt {
|
||||
@extend .glyphicon-triangle-top !optional;
|
||||
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
}
|
||||
|
||||
&.pi-sort-amount-down {
|
||||
@extend .glyphicon-triangle-bottom !optional;
|
||||
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
}
|
||||
.pi-sort-amount-down {
|
||||
@include arrow-down(5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -693,12 +685,10 @@ p-table {
|
|||
.p-paginator-prev,
|
||||
.p-paginator-next,
|
||||
.p-paginator-last {
|
||||
@include glyphicon-light;
|
||||
padding: 5px 2px;
|
||||
height: auto;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
font-size: 13px;
|
||||
top: -1px;
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
||||
&.focus-within,
|
||||
&:focus {
|
||||
|
|
@ -710,23 +700,37 @@ p-table {
|
|||
}
|
||||
|
||||
&.p-paginator-first {
|
||||
@extend .glyphicon-step-backward !optional;
|
||||
.p-paginator-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('../assets/images/feather/skip-back.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-paginator-prev {
|
||||
@extend .glyphicon-chevron-left !optional;
|
||||
.p-paginator-icon {
|
||||
@extend .chevron-left !optional;
|
||||
}
|
||||
|
||||
@include margin-right(10px);
|
||||
}
|
||||
|
||||
&.p-paginator-next {
|
||||
@extend .glyphicon-chevron-right !optional;
|
||||
.p-paginator-icon {
|
||||
@extend .chevron-right !optional;
|
||||
}
|
||||
|
||||
@include margin-left(10px);
|
||||
}
|
||||
|
||||
&.p-paginator-last {
|
||||
@extend .glyphicon-step-forward !optional;
|
||||
.p-paginator-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('../assets/images/feather/skip-forward.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -810,8 +814,7 @@ p-calendar .p-datepicker {
|
|||
}
|
||||
|
||||
.p-datepicker-next {
|
||||
@extend .glyphicon-chevron-right !optional;
|
||||
@include glyphicon-light;
|
||||
@extend .chevron-right !optional;
|
||||
|
||||
color: #000 !important;
|
||||
text-align: end;
|
||||
|
|
@ -822,8 +825,7 @@ p-calendar .p-datepicker {
|
|||
}
|
||||
|
||||
.p-datepicker-prev {
|
||||
@extend .glyphicon-chevron-left !optional;
|
||||
@include glyphicon-light;
|
||||
@extend .chevron-left !optional;
|
||||
|
||||
color: #000 !important;
|
||||
text-align: start;
|
||||
|
|
@ -837,15 +839,13 @@ p-calendar .p-datepicker {
|
|||
.p-timepicker {
|
||||
|
||||
.pi.pi-chevron-up {
|
||||
@extend .glyphicon-chevron-up !optional;
|
||||
@include glyphicon-light;
|
||||
@extend .chevron-up !optional;
|
||||
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.pi.pi-chevron-down {
|
||||
@extend .glyphicon-chevron-down !optional;
|
||||
@include glyphicon-light;
|
||||
@extend .chevron-down !optional;
|
||||
|
||||
color: #000 !important;
|
||||
}
|
||||
|
|
@ -901,15 +901,14 @@ p-toast {
|
|||
min-width: 200px;
|
||||
|
||||
.p-toast-icon-close {
|
||||
font-family: "Glyphicons Halflings";
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
|
||||
&:after {
|
||||
content: "\e014";
|
||||
}
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('../assets/images/feather/x.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&:hover .p-toast-icon-close {
|
||||
|
|
@ -927,22 +926,6 @@ p-toast {
|
|||
box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
|
||||
overflow: hidden;
|
||||
|
||||
&.p-toast-message-success my-global-icon {
|
||||
color: #8BC34A !important;
|
||||
}
|
||||
|
||||
&.p-toast-message-error my-global-icon {
|
||||
color: #F44336 !important;
|
||||
}
|
||||
|
||||
&.p-toast-message-warn my-global-icon {
|
||||
color: #F1680D !important;
|
||||
}
|
||||
|
||||
&.p-toast-message-info my-global-icon {
|
||||
color: #03A9F4 !important;
|
||||
}
|
||||
|
||||
.notification-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -962,13 +945,24 @@ p-toast {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.glyphicon {
|
||||
font-size: 32px;
|
||||
@include margin-right(5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-toast-message-success my-global-icon {
|
||||
color: #8BC34A !important;
|
||||
}
|
||||
|
||||
.p-toast-message-error my-global-icon {
|
||||
color: #F44336 !important;
|
||||
}
|
||||
|
||||
.p-toast-message-warn my-global-icon {
|
||||
color: #F1680D !important;
|
||||
}
|
||||
|
||||
.p-toast-message-info my-global-icon {
|
||||
color: #03A9F4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-selectbutton {
|
||||
|
|
|
|||
|
|
@ -1456,11 +1456,6 @@
|
|||
"@jridgewell/resolve-uri" "^3.0.3"
|
||||
"@jridgewell/sourcemap-codec" "^1.4.10"
|
||||
|
||||
"@neos21/bootstrap3-glyphicons@^1.0.1":
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/@neos21/bootstrap3-glyphicons/-/bootstrap3-glyphicons-1.0.7.tgz#b3f62f0dc54b383afcc26d44fcb3bb0ca1bd4de2"
|
||||
integrity sha512-JfvPdx8W2+kVhW+8fj2kIJNS0tesU21hrWF7TBHtYDHpVfcFGU/yn3Eh02sJiNfZABkutP3oU0Ftw8LGF43Jng==
|
||||
|
||||
"@ng-bootstrap/ng-bootstrap@^12.1.2":
|
||||
version "12.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-12.1.2.tgz#19f21313234fe21090ba50a7721046ed5d9928e1"
|
||||
|
|
|
|||
Loading…
Reference in New Issue