OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Replace glyphicon chevron

pull/5067/head
Chocobozzz 2022-06-10 17:05:55 +02:00
parent 3e3b360c53
commit c2faa073d1
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
16 changed files with 57 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/+admin/follows/followers-list/followers-list.component.html
View File

@ -41,7 +41,7 @@
<td>
<a [href]="follow.follower.url" i18n-title title="Open actor page in a new tab" target="_blank" rel="noopener noreferrer">
{{ follow.follower.name + '@' + follow.follower.host }}
<span class="glyphicon glyphicon-new-window"></span>
<my-global-icon iconName="external-link"></my-global-icon>
</a>
</td>

2
client/src/app/+admin/follows/following-list/following-list.component.html
View File

@ -43,7 +43,7 @@
<td>
<a [href]="follow.following.url" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
{{ follow.following.name + '@' + follow.following.host }}
<span class="glyphicon glyphicon-new-window"></span>
<my-global-icon iconName="external-link"></my-global-icon>
</a>
</td>

2
client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
View File

@ -46,7 +46,7 @@
<td>
<a [href]="redundancy.url" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
{{ redundancy.name }}
<span class="glyphicon glyphicon-new-window"></span>
<my-global-icon iconName="external-link"></my-global-icon>
</a>
</td>

2
client/src/app/+my-library/my-follows/my-followers.component.html
View File

@ -19,7 +19,7 @@
<div class="actor-info">
<a [href]="follow.follower.url" class="actor-names" rel="noopener noreferrer" target="_blank" i18n-title title="Follower page">
<div class="actor-display-name">{{ follow.follower.name + '@' + follow.follower.host }}</div>
<span class="glyphicon glyphicon-new-window"></span>
<my-global-icon iconName="external-link"></my-global-icon>
</a>
<div class="muted">

6
client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html
View File

@ -11,9 +11,11 @@
>{{ video.originInstanceHost }}</a>
<a
i18n-title title="Open the video on the origin instance" class="glyphicon glyphicon-new-window"
i18n-title title="Open the video on the origin instance"
target="_blank" rel="noopener noreferrer" [href]="video.url"
></a>
>
<my-global-icon iconName="external-link"></my-global-icon>
</a>
</div>
<div *ngIf="!!video.originallyPublishedAt" class="attribute attribute-originally-published-at">

6
client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss
View File

@ -33,12 +33,6 @@ a.attribute-value {
}
}
.glyphicon-new-window {
color: pvar(--inputPlaceholderColor);
margin-left: 5px;
font-size: 12px;
}
@media screen and (max-width: 1600px) {
.attributes .attribute {
margin-bottom: 5px;

4
client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
View File

@ -8,12 +8,12 @@
<div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
<ng-container i18n>Show more</ng-container>
<span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
<span *ngIf="descriptionLoading === false" class="chevron-down"></span>
<my-loader size="sm" class="description-loading" [loading]="descriptionLoading"></my-loader>
</div>
<div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
<ng-container i18n>Show less</ng-container>
<span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
<span *ngIf="descriptionLoading === false" class="chevron-up"></span>
</div>
</div>

12
client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
View File

@ -17,13 +17,8 @@
}
}
.glyphicon,
.description-loading {
@include margin-left(3px);
}
.description-loading {
display: inline-block;
@include margin-left(5px);
}
.video-info-description-more {
@ -31,11 +26,6 @@
font-weight: $font-semibold;
color: pvar(--greyForegroundColor);
font-size: 14px;
.glyphicon {
position: relative;
top: 2px;
}
}
}

2
client/src/app/menu/menu.component.html
View File

@ -16,7 +16,7 @@
</div>
<div class="dropdown-toggle-indicator">
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="chevron-down"></span>
</div>
</div>

25
client/src/app/menu/menu.component.scss
View File

@ -106,6 +106,7 @@ my-notification {
}
.logged-in-more {
@mixin display-hints($is-mobile: false) {
background-color: rgba(255, 255, 255, 0.15);
@ -114,18 +115,16 @@ my-notification {
display: inherit !important;
}
.dropdown-toggle {
> .dropdown-toggle {
max-width: 88% !important;
}
}
}
$main-radius: 25px;
@include margin-left(13px);
flex: 1;
border-radius: $main-radius;
border-radius: 25px;
transition: all .1s ease-in-out;
cursor: pointer;
line-height: 1;
@ -157,7 +156,6 @@ my-notification {
.dropdown-toggle-indicator {
position: relative;
width: 0;
display: none;
span {
@ -165,21 +163,17 @@ my-notification {
right: -35px;
top: -8px;
color: #808080;
width: $main-radius;
}
}
.dropdown-toggle {
&::after {
border: 0;
}
.dropdown-toggle::after {
border: 0;
}
.dropdown-toggle:first-child {
> .dropdown-toggle:first-child {
display: flex;
align-items: center;
padding: 5px 7px;
border-radius: $main-radius;
}
}
@ -396,13 +390,6 @@ my-actor-avatar {
.dropdown-menu {
width: calc(100vw - 30px);
}
.dropdown-item:hover,
.dropdown-item:active {
&.settings-sensitive my-global-icon ::ng-deep svg {
margin-top: 0 !important;
}
}
}
my-global-icon {

1
client/src/app/shared/shared-icons/global-icon.component.ts
View File

@ -63,6 +63,7 @@ const icons = {
'exit-fullscreen': require('!!raw-loader?!../../../assets/images/feather/minimize.svg').default,
film: require('!!raw-loader?!../../../assets/images/feather/film.svg').default,
edit: require('!!raw-loader?!../../../assets/images/feather/edit-2.svg').default,
'external-link': require('!!raw-loader?!../../../assets/images/feather/external-link.svg').default,
sensitive: require('!!raw-loader?!../../../assets/images/feather/eye.svg').default,
unsensitive: require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default,
refresh: require('!!raw-loader?!../../../assets/images/feather/refresh-cw.svg').default,

4
client/src/app/shared/shared-main/misc/list-overflow.component.html
View File

@ -5,7 +5,7 @@
<ng-container *ngIf="isMenuDisplayed()">
<button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="chevron-down"></span>
</button>
<div
@ -16,7 +16,7 @@
<button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="chevron-down"></span>
</button>
<div ngbDropdownMenu>

2
client/src/app/shared/shared-moderation/server-blocklist.component.html
View File

@ -41,7 +41,7 @@
<td>
<a [href]="'https://' + serverBlock.blockedServer.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
{{ serverBlock.blockedServer.host }}
<span class="glyphicon glyphicon-new-window"></span>
<my-global-icon iconName="external-link"></my-global-icon>
</a>
</td>
<td>{{ serverBlock.createdAt | date: 'short' }}</td>

1
client/src/assets/images/feather/external-link.svg Normal file
View File

@ -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-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 388 B

19
client/src/sass/application.scss
View File

@ -308,6 +308,25 @@ table {
}
}
my-global-icon[iconName=external-link] {
margin: 0 3px;
width: 13px;
vertical-align: text-bottom;
color: pvar(--inputPlaceholderColor);
}
.chevron-down {
@include chevron-down(0.55rem, 0.20em);
margin: 0 5px;
}
.chevron-up {
@include chevron-up(0.55rem, 0.20em);
margin: 0 5px;
}
/* offsetTop for scrollToAnchor */
.anchor {

15
client/src/sass/include/_mixins.scss
View File

@ -570,6 +570,7 @@
transform: rotate(-45deg);
height: $size;
width: $size;
position: relative;
}
@mixin chevron-right ($size, $border-width) {
@ -579,6 +580,20 @@
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);