Verified Commit 27bc9586 authored by Chocobozzz's avatar Chocobozzz
Browse files

Bidi support

parent 8beea2d3
Pipeline #422042 failed with stages
in 14 minutes and 12 seconds
......@@ -6,10 +6,11 @@
display: flex;
.left {
@include margin-right(10px);
display: flex;
flex-direction: column;
align-items: center;
margin-right: 10px;
.vertical-border {
width: 2px;
......@@ -51,6 +52,9 @@ my-actor-avatar {
}
.video-author {
@include padding-right(6px);
@include padding-left(6px);
height: 20px;
background-color: #888888;
border-radius: 12px;
......@@ -60,8 +64,6 @@ my-actor-avatar {
flex-direction: row;
align-items: center;
display: inline-flex;
padding-right: 6px;
padding-left: 6px;
color: #fff !important;
}
......@@ -86,9 +88,10 @@ my-actor-avatar {
}
.comment-date {
@include margin-left(5px);
font-size: 90%;
color: pvar(--greyForegroundColor);
margin-left: 5px;
text-decoration: none;
&:hover {
......@@ -129,9 +132,10 @@ my-actor-avatar {
::ng-deep .dropdown-toggle,
.comment-action-reply {
@include margin-right(10px);
color: pvar(--greyForegroundColor);
cursor: pointer;
margin-right: 10px;
&:hover,
&:active,
......@@ -162,25 +166,25 @@ my-video-comment-add {
}
.left {
margin-right: 6px;
@include margin-right(6px);
}
}
@media screen and (max-width: 1200px) {
.children {
margin-left: -10px;
@include margin-left(-10px);
}
}
@media screen and (max-width: 600px) {
.children {
margin-left: -20px;
@include margin-left(-20px);
.left {
align-items: flex-start;
.vertical-border {
margin-left: 2px;
@include margin-left(2px);
}
}
}
......@@ -189,7 +193,7 @@ my-video-comment-add {
flex-direction: column;
.comment-date {
margin-left: 0;
@include margin-left(0);
}
}
}
......@@ -13,19 +13,21 @@
.glyphicon,
.comment-thread-loading {
margin-right: 5px;
@include margin-right(5px);
display: inline-block;
font-size: 13px;
}
.title-block {
.title-page {
margin-right: 0;
@include margin-right(0);
}
my-feed {
@include margin-left(5px);
display: inline-block;
margin-left: 5px;
opacity: 0;
transition: ease-in .2s opacity;
width: 12px;
......@@ -47,7 +49,7 @@
@media screen and (max-width: 600px) {
.view-replies {
margin-left: 46px;
@include margin-left(46px);
}
}
......
......@@ -10,8 +10,9 @@
.title-page.active,
.title-page.title-page-single {
@include margin-right(.5rem !important);
margin-bottom: unset;
margin-right: .5rem !important;
}
}
......@@ -20,14 +21,16 @@
}
.title-page-autoplay {
@include margin-left(auto);
display: flex;
width: max-content;
height: max-content;
align-items: center;
margin-left: auto;
span {
margin-right: 0.3rem;
@include margin-right(0.3rem);
text-transform: uppercase;
font-size: 85%;
font-weight: 600;
......
......@@ -15,9 +15,9 @@
.wrapper {
@include actor-avatar-size(35px);
@include margin-right(5px);
position: relative;
margin-right: 5px;
margin-bottom: 5px;
&.generic-channel {
......
......@@ -26,7 +26,7 @@
display: flex;
.playlist-by {
margin-right: 5px;
@include margin-right(5px);
}
.playlist-index span:first-child::after {
......@@ -40,7 +40,7 @@
margin: 10px 0;
my-global-icon:not(:last-child) {
margin-right: .5rem;
@include margin-right(.5rem);
}
my-global-icon {
......@@ -59,7 +59,7 @@
::ng-deep {
.video {
.position {
margin-right: 0;
@include margin-right(0);
}
.video-info {
......
......@@ -152,7 +152,7 @@ $video-info-margin-left: 44px;
.video-info-name {
@include peertube-word-wrap;
margin-right: 30px;
@include margin-right(30px);
min-height: 40px; // Align with the action buttons
font-size: 27px;
font-weight: $font-semibold;
......@@ -167,9 +167,10 @@ $video-info-margin-left: 44px;
}
.video-info-date-views {
align-self: start;
@include margin-right(10px);
margin-bottom: 10px;
margin-right: 10px;
align-self: start;
font-size: 1em;
}
......@@ -209,15 +210,19 @@ $video-info-margin-left: 44px;
}
my-subscribe-button {
margin-left: 5px;
@include margin-left(5px);
}
}
.video-actions-rates {
margin: 0 0 10px;
@include margin-left(auto);
@include margin-right(0);
margin-top: 0;
margin-bottom: 10px;
align-items: start;
width: max-content;
margin-left: auto;
.video-actions {
height: 40px; // Align with the title
......@@ -227,7 +232,7 @@ $video-info-margin-left: 44px;
.action-button:not(:first-child),
.action-dropdown,
my-video-actions-dropdown {
margin-left: 5px;
@include margin-left(5px);
}
::ng-deep.action-button {
......@@ -305,7 +310,7 @@ $video-info-margin-left: 44px;
}
.icon-text {
margin-left: 3px;
@include margin-left(3px);
}
}
}
......@@ -341,8 +346,11 @@ $video-info-margin-left: 44px;
}
.video-info-description {
margin: 20px 0;
margin-left: $video-info-margin-left;
@include margin-left($video-info-margin-left);
@include margin-right(0);
margin-top: 20px;
margin-bottom: 20px;
font-size: 15px;
.video-info-description-html {
......@@ -355,7 +363,7 @@ $video-info-margin-left: 44px;
.glyphicon,
.description-loading {
margin-left: 3px;
@include margin-left(3px);
}
.description-loading {
......@@ -376,7 +384,7 @@ $video-info-margin-left: 44px;
}
.video-attributes {
margin-left: $video-info-margin-left;
@include margin-left($video-info-margin-left);
}
.video-attributes .video-attribute {
......@@ -385,8 +393,9 @@ $video-info-margin-left: 44px;
margin-bottom: 12px;
.video-attribute-label {
@include padding-right(5px);
min-width: 142px;
padding-right: 5px;
display: inline-block;
color: pvar(--greyForegroundColor);
font-weight: $font-bold;
......@@ -413,8 +422,9 @@ $video-info-margin-left: 44px;
}
my-recommended-videos {
@include padding-left(15px);
display: block;
padding-left: 15px;
min-width: 250px;
}
......@@ -432,14 +442,15 @@ my-video-comments {
@media screen and (max-width: $small-view) {
.privacy-concerns {
margin-left: $menu-width - 15px; // Menu is absolute
@include margin-left($menu-width - 15px); // Menu is absolute
}
}
:host-context(.expanded) {
.privacy-concerns {
@include margin-left(-15px);
width: 100%;
margin-left: -15px;
}
}
......@@ -473,8 +484,9 @@ my-video-comments {
}
.privacy-concerns-button {
@include margin-left(auto);
padding: 5px 8px 5px 7px;
margin-left: auto;
border-radius: 3px;
white-space: nowrap;
cursor: pointer;
......@@ -487,8 +499,9 @@ my-video-comments {
}
.privacy-concerns-okay {
@include margin-left(10px);
background-color: pvar(--mainColor);
margin-left: 10px;
}
}
......@@ -525,7 +538,7 @@ my-video-comments {
}
my-recommended-videos {
padding-left: 0;
@include padding-left(0);
}
}
......
......@@ -53,17 +53,18 @@
my-actor-avatar {
@include actor-avatar-size(28px);
@include margin-right(8px);
font-size: initial;
margin-right: 8px;
}
}
.followers {
@include margin-left(10px);
color: pvar(--greyForegroundColor);
font-weight: normal;
font-size: 14px;
margin-left: 10px;
position: relative;
top: 2px;
}
......@@ -87,8 +88,9 @@
overflow: initial;
.section-title {
@include margin-left(10px);
font-size: 17px;
margin-left: 10px;
}
}
}
@import '_mixins';
.btn-group label {
border: 1px solid transparent;
border-radius: 9999px !important;
......@@ -5,13 +7,14 @@
opacity: .8;
&:not(:first-child) {
margin-left: .5rem;
@include margin-left(.5rem);
}
my-global-icon {
@include margin-right(.1rem);
position: relative;
top: -2px;
height: 1rem;
margin-right: .1rem;
}
}
......@@ -83,10 +83,11 @@
}
.icon.icon-logo {
@include margin-right(0.5rem);
display: inline-block;
width: 23px;
height: 24px;
margin-right: 0.5rem;
}
}
......
import { Hotkey, HotkeysService } from 'angular2-hotkeys'
import { filter, map, pairwise, switchMap } from 'rxjs/operators'
import { DOCUMENT, PlatformLocation, ViewportScroller } from '@angular/common'
import { DOCUMENT, getLocaleDirection, PlatformLocation, ViewportScroller } from '@angular/common'
import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core'
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
import { Event, GuardsCheckStart, NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart, Router, Scroll } from '@angular/router'
......@@ -107,6 +107,7 @@ export class AppComponent implements OnInit, AfterViewInit {
this.openModalsIfNeeded()
this.document.documentElement.lang = getShortLocale(this.localeId)
this.document.documentElement.dir = getLocaleDirection(this.localeId)
}
ngAfterViewInit () {
......
......@@ -51,24 +51,25 @@
.cfp-hotkeys-keys {
padding: 5px;
text-align: right;
text-align: end;
}
.cfp-hotkeys-key {
@include margin-right(5px);
display: inline-block;
color: #fff;
background-color: #333;
border: 1px solid #333;
border-radius: 5px;
text-align: center;
margin-right: 5px;
box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb;
padding: 5px 9px;
font-size: 1em;
}
.cfp-hotkeys-text {
padding-left: 10px;
@include padding-left(10px);
font-size: 1em;
}
......
......@@ -2,22 +2,22 @@
@import '_mixins';
my-search-typeahead {
margin-right: 15px;
@include margin-right(15px);
}
.publish-button {
@include peertube-button-link;
@include orange-button;
@include button-with-icon(22px, 3px, -1px);
margin-right: 25px;
@include margin-right(25px);
@media screen and (max-width: 600px) {
margin-right: 10px;
@include margin-right(10px);
padding: 0 10px;
.icon.icon-upload {
margin-right: 0;
@include margin-right(0);
}
.publish-button-label {
......
......@@ -6,8 +6,9 @@
#search-video {
@include peertube-input-text($search-input-width);
padding-left: 10px;
padding-right: 40px; // For the search icon
@include padding-left(10px);
@include padding-right(40px); // For the search icon
font-size: 14px;
&::placeholder {
......@@ -17,11 +18,12 @@
.icon-search {
@include icon(25px);
@include margin-left(-35px);
height: 18px;
// yolo
position: absolute;
margin-left: -35px;
margin-top: 3.5px;
right: 10px;
}
......@@ -65,8 +67,9 @@ li.suggestion {
margin-bottom: .5rem;
em {
@include margin-right(0.2rem);
font-weight: 600;
margin-right: 0.2rem;
font-style: normal;
}
}
......@@ -81,7 +84,7 @@ li.suggestion {
}
@media screen and (min-width: $mobile-view) {
margin-left: 10px;
@include margin-left(10px);
}
@media screen and (max-width: $small-view) {
......
......@@ -3,7 +3,10 @@
<div class="top-menu">
<div *ngIf="isLoggedIn" class="logged-in-block">
<div>
<div class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left" [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside">
<div
class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
[container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside"
>
<div ngbDropdownToggle>
<my-actor-avatar [account]="user.account" size="34"></my-actor-avatar>
<div class="logged-in-info">
......@@ -18,8 +21,10 @@
</div>
<div ngbDropdownMenu>
<a *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/a', user.account.nameWithHost ]"
#profile (click)="onActiveLinkScrollToAnchor(profile)">
<a
*ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/a', user.account.nameWithHost ]"
#profile (click)="onActiveLinkScrollToAnchor(profile)"
>
<my-global-icon iconName="go" aria-hidden="true"></my-global-icon> <ng-container i18n>Public profile</ng-container>
</a>
......
......@@ -7,16 +7,17 @@ $footer-links-base-opacity: .8;
.menu-link {
@include disable-default-a-behaviour;
@include padding-left($menu-lateral-padding);
@include padding-right(20px);
display: flex;
align-items: center;
padding-left: $menu-lateral-padding;
color: pvar(--menuForegroundColor);
cursor: pointer;
font-size: 16px;
white-space: normal;
word-break: break-word;
padding-right: 20px;
transition: background-color .1s ease-in-out;
line-height: $line-height-normal;
......@@ -31,11 +32,11 @@ $footer-links-base-opacity: .8;
my-global-icon {
@include apply-svg-color(#808080);
@include margin-right($menu-link-icon-margin-right);
display: flex;
width: $menu-link-icon-size;
height: $menu-link-icon-size;
margin-right: $menu-link-icon-margin-right;
}
}
......@@ -99,8 +100,8 @@ menu {
}
my-notification {
margin-left: auto;
margin-right: 15px;