mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Initial support for RTL layouts

Browse source
This commit is contained in:
Hadi Charara 2022-07-02 15:50:52 -04:00
parent 941fe35103
commit 0f994ccb5b
19 changed files with 212 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/cardbuilder/card.scss
View file

@ -303,6 +303,10 @@ button::-moz-focus-inner {
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
[dir="rtl"] & {
text-align: right;
}
}
.dialog .cardText {

13
src/components/cardbuilder/cardBuilder.js
View file

@ -11,7 +11,7 @@ import imageLoader from '../images/imageLoader';
import itemHelper from '../itemHelper';
import focusManager from '../focusManager';
import indicators from '../indicators/indicators';
import globalize from '../../scripts/globalize';
import globalize, { getCurrentDateTimeLocale } from '../../scripts/globalize';
import layoutManager from '../layoutManager';
import dom from '../../scripts/dom';
import browser from '../../scripts/browser';
@ -909,19 +909,20 @@ import { appRouter } from '../appRouter';
}
if (options.showYear || options.showSeriesYear) {
const productionYear = item.ProductionYear?.toLocaleString(getCurrentDateTimeLocale(), {useGrouping: false});
if (item.Type === 'Series') {
if (item.Status === 'Continuing') {
lines.push(globalize.translate('SeriesYearToPresent', item.ProductionYear || ''));
lines.push(globalize.translate('SeriesYearToPresent', productionYear || ''));
} else {
if (item.EndDate && item.ProductionYear) {
const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
lines.push(item.ProductionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear)));
const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear().toLocaleString(getCurrentDateTimeLocale(), {useGrouping: false});
lines.push(productionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear)));
} else {
lines.push(item.ProductionYear || '');
lines.push(productionYear || '');
}
}
} else {
lines.push(item.ProductionYear || '');
lines.push(productionYear || '');
}
}

2
src/components/itemHelper.js
View file

@ -27,7 +27,7 @@ export function getDisplayName(item, options = {}) {
let nameSeparator = ' - ';
if (options.includeParentInfo !== false) {
number = 'S' + item.ParentIndexNumber + ':E' + number;
number = 'S' + item.ParentIndexNumber.toLocaleString() + ':E' + number.toLocaleString();
} else {
nameSeparator = '. ';
}

6
src/components/listview/listview.scss
View file

@ -13,6 +13,10 @@
padding: 0.25em 0.25em 0.25em 0.5em;
cursor: pointer;
overflow: hidden;
[dir='rtl'] & {
text-align: right;
}
}
.listItem-withContentWrapper {
@ -211,7 +215,7 @@
width: 1em !important;
height: 1em !important;
font-size: 143%;
padding: 0 0.25em 0 0;
margin: 0 0.25em 0 0;
}
.listItemIcon:not(.listItemIcon-transparent) {

2
src/components/loading/loading.js
View file

@ -18,7 +18,7 @@ export function show() {
elem.classList.add('docspinner');
elem.classList.add('mdl-spinner');
elem.innerHTML = '<div class="mdl-spinner__layer mdl-spinner__layer-1"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div>';
elem.innerHTML = '<div class="mdl-spinner__layer mdl-spinner__layer-1" dir="ltr"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div>';
document.body.appendChild(elem);

14
src/components/mediainfo/mediainfo.js
View file

@ -1,6 +1,6 @@
import escapeHtml from 'escape-html';
import datetime from '../../scripts/datetime';
import globalize from '../../scripts/globalize';
import globalize, { getCurrentDateTimeLocale } from '../../scripts/globalize';
import { appRouter } from '../appRouter';
import itemHelper from '../itemHelper';
import indicators from '../indicators/indicators';
@ -111,6 +111,8 @@ import '../../elements/emby-button/emby-button';
const showFolderRuntime = item.Type === 'MusicAlbum' || item.MediaType === 'MusicArtist' || item.Type === 'Playlist' || item.MediaType === 'Playlist' || item.MediaType === 'MusicGenre';
const dateTimeLocale = getCurrentDateTimeLocale();
if (showFolderRuntime) {
count = item.SongCount || item.ChildCount;
@ -175,16 +177,16 @@ import '../../elements/emby-button/emby-button';
if (options.year !== false && item.ProductionYear && item.Type === 'Series') {
if (item.Status === 'Continuing') {
miscInfo.push(globalize.translate('SeriesYearToPresent', item.ProductionYear));
miscInfo.push(globalize.translate('SeriesYearToPresent', item.ProductionYear.toLocaleString(dateTimeLocale, {useGrouping: false})));
} else if (item.ProductionYear) {
text = item.ProductionYear;
text = item.ProductionYear.toLocaleString(dateTimeLocale, {useGrouping: false});
if (item.EndDate) {
try {
const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear().toLocaleString(dateTimeLocale, {useGrouping: false});
if (endYear !== item.ProductionYear) {
text += `-${datetime.parseISO8601Date(item.EndDate).getFullYear()}`;
text += `-${endYear}`;
}
} catch (e) {
console.error('error parsing date:', item.EndDate);
@ -245,7 +247,7 @@ import '../../elements/emby-button/emby-button';
miscInfo.push(item.ProductionYear);
} else if (item.PremiereDate) {
try {
text = datetime.parseISO8601Date(item.PremiereDate).getFullYear();
text = datetime.parseISO8601Date(item.PremiereDate).getFullYear().toLocaleString(dateTimeLocale, {useGrouping: false});
miscInfo.push(text);
} catch (e) {
console.error('error parsing date:', item.PremiereDate);

9
src/components/mediainfo/mediainfo.scss
View file

@ -1,6 +1,10 @@
.mediaInfoItem {
margin: 0 1em 0 0;
padding: 0;
[dir="rtl"] & {
margin: 0 0 0 1em;
}
}
.mediaInfoText {
@ -26,6 +30,11 @@
.mediaInfoItem:last-child {
margin-right: 0;
[dir='rtl'] & {
margin-right: unset;
margin-left: 0;
}
}
.starRatingContainer {