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

Merge pull request #3743 from hadicharara/hadicharara/added-support-for-rtl-layouts

Browse source 
Add Initial support for RTL layouts
This commit is contained in:
Bill Thornton 2022-10-15 02:50:48 -04:00 • committed by GitHub
commit 84c007fa0b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
82 changed files with 1163 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/controllers/dashboard/dashboard.html
View file

@ -80,31 +80,31 @@
<div class="listItem listItem-border">
<div class="listItemBody two-line">
<div class="listItemBodyText secondary" style="margin:0;">${LabelCache}</div>
<div class="listItemBodyText" id="cachePath"></div>
<div class="listItemBodyText" id="cachePath" dir="ltr" style="text-align: left;"></div>
</div>
</div>
<div class="listItem listItem-border">
<div class="listItemBody two-line">
<div class="listItemBodyText secondary" style="margin:0;">${LabelLogs}</div>
<div class="listItemBodyText" id="logPath"></div>
<div class="listItemBodyText" id="logPath" dir="ltr" style="text-align: left;"></div>
</div>
</div>
<div class="listItem listItem-border">
<div class="listItemBody two-line">
<div class="listItemBodyText secondary" style="margin:0;">${LabelMetadata}</div>
<div class="listItemBodyText" id="metadataPath"></div>
<div class="listItemBodyText" id="metadataPath" dir="ltr" style="text-align: left;"></div>
</div>
</div>
<div class="listItem listItem-border">
<div class="listItemBody two-line">
<div class="listItemBodyText secondary" style="margin:0;">${LabelTranscodes}</div>
<div class="listItemBodyText" id="transcodePath"></div>
<div class="listItemBodyText" id="transcodePath" dir="ltr" style="text-align: left;"></div>
</div>
</div>
<div class="listItem listItem-border">
<div class="listItemBody two-line">
<div class="listItemBodyText secondary" style="margin:0;">${LabelWeb}</div>
<div class="listItemBodyText" id="webPath"></div>
<div class="listItemBodyText" id="webPath" dir="ltr" style="text-align: left;"></div>
</div>
</div>
</div>

2
src/controllers/dashboard/dashboard.js
View file

@ -280,7 +280,7 @@ import confirm from '../../components/confirm/confirm';
html += clientImage;
}
html += '<div class="sessionAppName" style="display:inline-block;">';
html += '<div class="sessionAppName" style="display:inline-block; text-align:left;" dir="ltr" >';
html += '<div class="sessionDeviceName">' + escapeHtml(session.DeviceName) + '</div>';
html += '<div class="sessionAppSecondaryText">' + escapeHtml(DashboardPage.getAppSecondaryText(session)) + '</div>';
html += '</div>';

5
src/controllers/dashboard/devices/devices.js
View file

@ -115,7 +115,10 @@ import confirm from '../../../components/confirm/confirm';
deviceHtml += '<div class="cardFooter">';
if (canEdit || canDelete(device.Id)) {
deviceHtml += '<div style="text-align:right; float:right;padding-top:5px;">';
if (globalize.getIsRTL())
deviceHtml += '<div style="text-align:left; float:left;padding-top:5px;">';
else
deviceHtml += '<div style="text-align:right; float:right;padding-top:5px;">';
deviceHtml += '<button type="button" is="paper-icon-button-light" data-id="' + device.Id + '" title="' + globalize.translate('Menu') + '" class="btnDeviceMenu"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
deviceHtml += '</div>';
}

6
src/controllers/dashboard/encodingsettings.html
View file

@ -220,7 +220,7 @@
<div class="inputContainer fldEncoderPath">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">
<input is="emby-input" class="txtEncoderPath" label="${LabelffmpegPath}" autocomplete="off" />
<input is="emby-input" class="txtEncoderPath" label="${LabelffmpegPath}" autocomplete="off" dir="ltr" />
</div>
<button type="button" is="paper-icon-button-light" id="btnSelectEncoderPath" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
</div>
@ -231,7 +231,7 @@
<div class="inputContainer">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">
<input is="emby-input" id="txtTranscodingTempPath" label="${LabelTranscodePath}" autocomplete="off" />
<input is="emby-input" id="txtTranscodingTempPath" label="${LabelTranscodePath}" autocomplete="off" dir="ltr" />
</div>
<button type="button" is="paper-icon-button-light" id="btnSelectTranscodingTempPath" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
</div>
@ -240,7 +240,7 @@
<div class="inputContainer">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">
<input is="emby-input" id="txtFallbackFontPath" label="${LabelFallbackFontPath}" autocomplete="off" />
<input is="emby-input" id="txtFallbackFontPath" label="${LabelFallbackFontPath}" autocomplete="off" dir="ltr" />
</div>
<button type="button" is="paper-icon-button-light" id="btnSelectFallbackFontPath" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
</div>

4
src/controllers/dashboard/general.html
View file

@ -30,7 +30,7 @@
<div class="inputContainer">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">
<input is="emby-input" id="txtCachePath" label="${LabelCachePath}" autocomplete="off" />
<input is="emby-input" id="txtCachePath" label="${LabelCachePath}" autocomplete="off" dir="ltr" />
</div>
<button type="button" is="paper-icon-button-light" id="btnSelectCachePath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
</div>
@ -40,7 +40,7 @@
<div class="inputContainer">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">
<input is="emby-input" id="txtMetadataPath" label="${LabelMetadataPath}" autocomplete="off" />
<input is="emby-input" id="txtMetadataPath" label="${LabelMetadataPath}" autocomplete="off" dir="ltr" />
</div>
<button type="button" is="paper-icon-button-light" id="btnSelectMetadataPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
</div>

7
src/controllers/dashboard/library.js
View file

@ -310,7 +310,10 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
html += '<div class="cardFooter visualCardBox-cardFooter">'; // always show menu unless explicitly hidden
if (virtualFolder.showMenu !== false) {
html += '<div style="text-align:right; float:right;padding-top:5px;">';
let dirTextAlign = 'right';
if (globalize.getIsRTL())
dirTextAlign = 'left';
html += '<div style="text-align:' + dirTextAlign + '; float:' + dirTextAlign + ';padding-top:5px;">';
html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
html += '</div>';
}
@ -343,7 +346,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
html += '&nbsp;';
html += '</div>';
} else if (virtualFolder.Locations.length && virtualFolder.Locations.length === 1) {
html += "<div class='cardText cardText-secondary'>";
html += "<div class='cardText cardText-secondary' dir='ltr' style='text-align:left;'>";
html += virtualFolder.Locations[0];
html += '</div>';
} else {

2
src/controllers/dashboard/logs.js
View file

@ -42,7 +42,7 @@ import alert from '../../components/alert';
let logHtml = '';
logHtml += '<a is="emby-linkbutton" href="' + logUrl + '" target="_blank" class="listItem listItem-border" style="color:inherit;">';
logHtml += '<div class="listItemBody two-line">';
logHtml += "<h3 class='listItemBodyText'>" + log.Name + '</h3>';
logHtml += "<h3 class='listItemBodyText' dir='ltr' style='text-align: left'>" + log.Name + '</h3>';
const date = datetime.parseISO8601Date(log.DateModified, true);
let text = datetime.toLocaleDateString(date);
text += ' ' + datetime.getDisplayTime(date);

5
src/controllers/dashboard/plugins/installed/index.js
View file

@ -83,7 +83,10 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
html += '<div class="cardFooter">';
if (configPage || plugin.CanUninstall) {
html += '<div style="text-align:right; float:right;padding-top:5px;">';
if (globalize.getIsRTL())
html += '<div style="text-align:left; float:left;padding-top:5px;">';
else
html += '<div style="text-align:right; float:right;padding-top:5px;">';
html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
html += '</div>';
}

5
src/controllers/dashboard/scheduledtasks/scheduledtasks.js
View file

@ -59,7 +59,10 @@ import '../../../elements/emby-button/emby-button';
html += '<span class="material-icons listItemIcon schedule" aria-hidden="true"></span>';
html += '</a>';
html += '<div class="listItemBody two-line">';
html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:left;' is='emby-linkbutton' href='scheduledtask.html?id=" + task.Id + "'>";
let textAlignStyle = 'left';
if (globalize.getIsRTL())
textAlignStyle = 'right';
html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:" + textAlignStyle + ";' is='emby-linkbutton' href='scheduledtask.html?id=" + task.Id + "'>";
html += "<h3 class='listItemBodyText'>" + task.Name + '</h3>';
html += "<div class='secondary listItemBodyText' id='taskProgress" + task.Id + "'>" + getTaskProgressHtml(task) + '</div>';
html += '</a>';

14
src/controllers/itemDetails/index.js
View file

@ -476,7 +476,7 @@ function renderName(item, container, context) {
html = '<h3 class="parentName musicParentName focuscontainer-x">' + parentNameHtml.join(' - ') + '</h3>';
}
} else {
html = '<h1 class="parentName focuscontainer-x">' + tvShowHtml + '</h1>';
html = '<h1 class="parentName focuscontainer-x"><bdi>' + tvShowHtml + '</bdi></h1>';
}
}
@ -486,14 +486,14 @@ function renderName(item, container, context) {
if (html && !parentNameLast) {
if (tvSeasonHtml) {
html += '<h3 class="itemName infoText subtitle focuscontainer-x">' + tvSeasonHtml + ' - ' + name + '</h3>';
html += '<h3 class="itemName infoText subtitle focuscontainer-x"><bdi>' + tvSeasonHtml + ' - ' + name + '</bdi></h3>';
} else {
html += '<h3 class="itemName infoText subtitle">' + name + '</h3>';
html += '<h3 class="itemName infoText subtitle"><bdi>' + name + '</bdi></h3>';
}
} else if (item.OriginalTitle && item.OriginalTitle != item.Name) {
html = '<h1 class="itemName infoText parentNameLast withOriginalTitle">' + name + '</h1>' + html;
html = '<h1 class="itemName infoText parentNameLast withOriginalTitle"><bdi>' + name + '</bdi></h1>' + html;
} else {
html = '<h1 class="itemName infoText parentNameLast">' + name + '</h1>' + html;
html = '<h1 class="itemName infoText parentNameLast"><bdi>' + name + '</bdi></h1>' + html;
}
if (item.OriginalTitle && item.OriginalTitle != item.Name) {
@ -915,7 +915,7 @@ function renderOverview(page, item) {
if (overview) {
for (const overviewElemnt of overviewElements) {
overviewElemnt.innerHTML = overview;
overviewElemnt.innerHTML = '<bdi>' + overview + '</bdi>';
overviewElemnt.classList.remove('hide');
overviewElemnt.classList.add('detail-clamp-text');
@ -1068,7 +1068,7 @@ function renderTagline(page, item) {
if (item.Taglines && item.Taglines.length) {
taglineElement.classList.remove('hide');
taglineElement.innerText = item.Taglines[0];
taglineElement.innerHTML = '<bdi>' + item.Taglines[0] + '</bdi>';
} else {
taglineElement.classList.add('hide');
}

4
src/controllers/playback/queue/index.html
View file

@ -18,7 +18,7 @@
</div>
<div class="sliderContainer flex">
<div class="sliderContainer flex" dir="ltr">
<div class="positionTime"></div>
<div class="nowPlayingPositionSliderContainer">
<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" data-slider-keep-progress="true" />
@ -28,7 +28,7 @@
<div class="nowPlayingButtonsContainer focuscontainer-x justify-content-space-between">
<div class="nowPlayingInfoButtons">
<div class="nowPlayingInfoButtons" dir="ltr">
<button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${Repeat}"
data-command="SetRepeatMode">

52
src/controllers/playback/video/index.html
View file

@ -18,7 +18,7 @@
<div class="osdTextContainer osdSecondaryMediaInfo"></div>
<div class="flex flex-direction-row align-items-center">
<div class="flex flex-direction-row align-items-center" dir="ltr">
<div class="osdTextContainer startTimeText osdPositionText" style="margin: 0 .25em 0 0;"></div>
<div class="sliderContainer flex-grow" style="margin: .5em 0 .25em;">
<div class="sliderMarkerContainer"></div>
@ -28,37 +28,39 @@
</div>
<div class="buttons focuscontainer-x">
<button is="paper-icon-button-light" class="btnRecord autoSize hide">
<span class="xlargePaperIconButton material-icons fiber_manual_record" aria-hidden="true"></span>
</button>
<div dir="ltr">
<button is="paper-icon-button-light" class="btnRecord autoSize hide">
<span class="xlargePaperIconButton material-icons fiber_manual_record" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnPreviousTrack autoSize hide" title="${PreviousTrack}">
<span class="xlargePaperIconButton material-icons skip_previous" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnPreviousTrack autoSize hide" title="${PreviousTrack}">
<span class="xlargePaperIconButton material-icons skip_previous" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnPreviousChapter autoSize hide" title="${PreviousChapter}">
<span class="xlargePaperIconButton material-icons undo" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnPreviousChapter autoSize hide" title="${PreviousChapter}">
<span class="xlargePaperIconButton material-icons undo" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnRewind" title="${Rewind} (j)" aria-label="${Rewind}">
<span class="xlargePaperIconButton material-icons fast_rewind" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnRewind" title="${Rewind} (j)" aria-label="${Rewind}">
<span class="xlargePaperIconButton material-icons fast_rewind" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnPause autoSize">
<span class="xlargePaperIconButton material-icons pause" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnPause autoSize">
<span class="xlargePaperIconButton material-icons pause" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnFastForward" title="${FastForward} (l)" aria-label="${FastForward}">
<span class="xlargePaperIconButton material-icons fast_forward" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnFastForward" title="${FastForward} (l)" aria-label="${FastForward}">
<span class="xlargePaperIconButton material-icons fast_forward" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnNextChapter autoSize hide" title="${NextChapter}">
<span class="xlargePaperIconButton material-icons redo" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnNextChapter autoSize hide" title="${NextChapter}">
<span class="xlargePaperIconButton material-icons redo" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnNextTrack autoSize hide" title="${NextTrack}">
<span class="xlargePaperIconButton material-icons skip_next" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnNextTrack autoSize hide" title="${NextTrack}">
<span class="xlargePaperIconButton material-icons skip_next" aria-hidden="true"></span>
</button>
</div>
<div class="osdTimeText">
<span class="endsAtText"></span>

2
src/controllers/playback/video/index.js
View file

@ -216,7 +216,7 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
let title = itemName;
if (item.PremiereDate) {
try {
const year = datetime.parseISO8601Date(item.PremiereDate).getFullYear();
const year = datetime.toLocaleString(datetime.parseISO8601Date(item.PremiereDate).getFullYear(), {useGrouping: false});
title += ` (${year})`;
} catch (e) {
console.error(e);