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

Style cleanup, address suggestions and placeholders for songs in cardBuilder and listView

Browse source
This commit is contained in:
ferferga 2020-06-22 17:37:06 +02:00
parent d13e1acf8d
commit f6a9f4679a
15 changed files with 167 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/assets/css/flexstyles.css
View file

@ -42,6 +42,10 @@
justify-content: flex-end;
}
.justify-content-space-between {
justify-content: space-between;
}
.flex-wrap-wrap {
flex-wrap: wrap;
}

3
src/components/cardbuilder/card.css
View file

@ -167,8 +167,9 @@ button::-moz-focus-inner {
position: relative;
background-clip: content-box !important;
color: inherit;
}
/* This is only needed for scalable cards */
.cardImageContainer.cardScalable {
height: 100%;
contain: strict;
}

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

@ -1537,8 +1537,11 @@ import 'programStyles';
case 'MusicAlbum':
return '<span class="cardImageIcon material-icons album"></span>';
case 'MusicArtist':
return '<span class="cardImageIcon material-icons person"></span>';
case 'Person':
return '<span class="cardImageIcon material-icons person"></span>';
case 'Audio':
return '<span class="cardImageIcon material-icons audiotrack"></span>';
case 'Movie':
return '<span class="cardImageIcon material-icons movie"></span>';
case 'Series':

96
src/components/listview/listview.js
View file

@ -1,4 +1,4 @@
define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutManager', 'globalize', 'datetime', 'apphost', 'css!./listview', 'emby-ratingbutton', 'emby-playstatebutton'], function (itemHelper, mediaInfo, indicators, connectionManager, layoutManager, globalize, datetime, appHost) {
define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutManager', 'globalize', 'datetime', 'cardBuilder', 'css!./listview', 'emby-ratingbutton', 'emby-playstatebutton'], function (itemHelper, mediaInfo, indicators, connectionManager, layoutManager, globalize, datetime, cardBuilder) {
'use strict';
function getIndex(item, options) {
@ -270,54 +270,56 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (options.image !== false) {
let imgData = options.imageSource === 'channel' ? getChannelImageUrl(item, downloadWidth) : getImageUrl(item, downloadWidth);
let imgUrl;
let blurhash;
if (imgData) {
let imgUrl = imgData.url;
let blurhash = imgData.blurhash;
let imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
if (isLargeStyle && layoutManager.tv) {
imageClass += ' listItemImage-large-tv';
}
var playOnImageClick = options.imagePlayButton && !layoutManager.tv;
if (!clickEntireItem) {
imageClass += ' itemAction';
}
var imageAction = playOnImageClick ? 'resume' : action;
let blurhashAttrib = '';
if (blurhash && blurhash.length > 0) {
blurhashAttrib = 'data-blurhash="' + blurhash + '"';
}
if (imgUrl) {
html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + ' item-icon>';
} else {
html += '<div class="' + imageClass + '">';
}
var indicatorsHtml = '';
indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
if (indicatorsHtml) {
html += '<div class="indicators listItemIndicators">' + indicatorsHtml + '</div>';
}
if (playOnImageClick) {
html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><span class="material-icons listItemImageButton-icon play_arrow"></span></button>';
}
var progressHtml = indicators.getProgressBarHtml(item, {
containerClass: 'listItemProgressBar'
});
if (progressHtml) {
html += progressHtml;
}
html += '</div>';
imgUrl = imgData.url;
blurhash = imgData.blurhash;
}
let imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
if (isLargeStyle && layoutManager.tv) {
imageClass += ' listItemImage-large-tv';
}
var playOnImageClick = options.imagePlayButton && !layoutManager.tv;
if (!clickEntireItem) {
imageClass += ' itemAction';
}
var imageAction = playOnImageClick ? 'resume' : action;
let blurhashAttrib = '';
if (blurhash && blurhash.length > 0) {
blurhashAttrib = 'data-blurhash="' + blurhash + '"';
}
if (imgUrl) {
html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + ' item-icon>';
} else {
html += '<div class="' + imageClass + ' cardImageContainer ' + cardBuilder.getDefaultBackgroundClass(item.Name) + '">' + cardBuilder.getDefaultText(item, options);
}
var indicatorsHtml = '';
indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
if (indicatorsHtml) {
html += '<div class="indicators listItemIndicators">' + indicatorsHtml + '</div>';
}
if (playOnImageClick) {
html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><span class="material-icons listItemImageButton-icon play_arrow"></span></button>';
}
var progressHtml = indicators.getProgressBarHtml(item, {
containerClass: 'listItemProgressBar'
});
if (progressHtml) {
html += progressHtml;
}
html += '</div>';
}
if (options.showIndexNumberLeft) {

20
src/components/nowPlayingBar/nowPlayingBar.css
View file

@ -133,10 +133,7 @@
.toggleRepeatButton {
display: none !important;
}
}
@media all and (max-width: 66em) {
.btnShuffle {
.nowPlayingBar .btnShuffleQueue {
display: none !important;
}
}
@ -152,18 +149,21 @@
}
}
.layout-mobile .nowPlayingBarRight button:not(.playPauseButton, .nextTrackButton) {
display: none;
}
.layout-mobile .nowPlayingBarRight input,
.layout-mobile .nowPlayingBarRight div {
display: none;
}
@media all and (max-width: 56em) {
.nowPlayingBarCenter {
display: none !important;
}
}
@media all and (min-width: 56em) {
.nowPlayingBarRight .playPauseButton {
display: none;
}
}
@media all and (max-width: 60em) {
.nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
display: none !important;

17
src/components/nowPlayingBar/nowPlayingBar.js
View file

@ -63,7 +63,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
html += '</div>';
html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><span class="material-icons repeat"></span></button>';
html += '<button is="paper-icon-button-light" class="btnShuffle mediaButton"><span class="material-icons shuffle"></span></button>';
html += '<button is="paper-icon-button-light" class="btnShuffleQueue mediaButton"><span class="material-icons shuffle"></span></button>';
html += '<div class="nowPlayingBarUserDataButtons">';
html += '</div>';
@ -179,7 +179,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
}
});
elem.querySelector('.btnShuffle').addEventListener('click', function () {
elem.querySelector('.btnShuffleQueue').addEventListener('click', function () {
if (currentPlayer) {
if (playbackManager.getQueueShuffleMode(currentPlayer) === 'Sorted') {
playbackManager.setQueueShuffleMode('Shuffle', currentPlayer);
@ -290,7 +290,8 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar');
if (layoutManager.mobile) {
hideButton(nowPlayingBarElement.querySelector('.shuffle'));
hideButton(nowPlayingBarElement.querySelector('.btnShuffleQueue'));
hideButton(nowPlayingBarElement.querySelector('.nowPlayingBarCenter'));
}
if (browser.safari && browser.slow) {
@ -634,12 +635,12 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
function onQueueShuffleModeChange() {
let shuffleMode = playbackManager.getQueueShuffleMode(this);
let context = nowPlayingBarElement;
let toggleShuffleButton = context.querySelector('.btnShuffle');
let toggleShuffleButton = context.querySelector('.btnShuffleQueue');
if ('Sorted' === shuffleMode) {
toggleShuffleButton.classList.remove('shuffleButton-active');
} else if ('Shuffle' === shuffleMode) {
toggleShuffleButton.classList.add('shuffleButton-active');
if (shuffleMode === 'Sorted') {
toggleShuffleButton.classList.remove('shuffleQueue-active');
} else if (shuffleMode === 'Shuffle') {
toggleShuffleButton.classList.add('shuffleQueue-active');
}
}

87
src/components/remotecontrol/remotecontrol.css
View file

@ -175,10 +175,6 @@
background: rgba(0, 0, 0, 0) !important;
}
.layout-mobile .btnShuffle {
display: unset !important;
}
.layout-mobile .playlistSection .playlist,
.layout-mobile .playlistSection .contextMenu {
position: absolute;
@ -202,62 +198,82 @@
padding-right: 7.3%;
}
.playlistSectionButton:not(>.layout-mobile) {
background: unset !important;
.layout-desktop .playlistSectionButton,
.layout-tv .playlistSectionButton {
background: none;
}
.nowPlayingPlaylist:not(>.layout-mobile) {
background: unset !important;
.layout-desktop .nowPlayingPlaylist,
.layout-tv .nowPlayingPlaylist {
background: none;
}
.layout-mobile .playlistSectionButton .btnTogglePlaylist {
font-size: larger;
margin: 0;
padding-left: 0;
}
.layout-mobile .playlistSectionButton .btnSavePlaylist {
margin: 0;
padding-right: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
border-radius: 0;
}
.layout-mobile .playlistSectionButton .volumecontrol {
margin: 0;
padding-right: 0;
border-radius: 0;
}
.layout-mobile .playlistSectionButton .btnToggleContextMenu {
font-size: larger;
margin: 0;
padding-right: 0;
}
.layout-mobile .nowPlayingSecondaryButtons .btnShuffleQueue {
display: none;
}
.layout-mobile .nowPlayingSecondaryButtons .volumecontrol {
display: none;
}
.layout-mobile .nowPlayingSecondaryButtons .btnRepeat {
display: none;
}
.layout-desktop .nowPlayingInfoButtons .btnRepeat,
.layout-tv .nowPlayingInfoButtons .btnRepeat {
display: none;
}
.layout-desktop .nowPlayingInfoButtons .btnShuffleQueue,
.layout-tv .nowPlayingInfoButtons .btnShuffleQueue{
display: none;
}
.layout-desktop .playlistSectionButton .volumecontrol,
.layout-tv .playlistSectionButton .volumecontrol {
display: none;
}
.nowPlayingSecondaryButtons {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
border-radius: 0;
}
.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
display: none;
}
@media all and (min-width: 63em) {
.nowPlayingPage {
padding: 8em 0 0 0 !important;
}
.nowPlayingSecondaryButtons {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.nowPlayingPageUserDataButtonsTitle {
display: none !important;
}
}
@media all and (min-width: 80em) {
@ -275,6 +291,10 @@
flex-direction: column;
}
.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
display: unset;
}
.nowPlayingInfoContainer {
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
@ -362,7 +382,7 @@
font-size: smaller;
}
.nowPlayingInfoButtons .btnShuffle {
.nowPlayingInfoButtons .btnShuffleQueue {
position: absolute;
right: 0;
margin-right: 0;
@ -447,6 +467,10 @@
background-image: url(../../assets/img/equalizer.gif) !important;
}
.playlistIndexIndicatorImage > * {
display: none;
}
.hideVideoButtons .videoButton {
display: none;
}
@ -456,7 +480,6 @@
}
@media all and (max-width: 63em) {
.nowPlayingSecondaryButtons .nowPlayingPageUserDataButtons,
.nowPlayingSecondaryButtons .repeatToggleButton,
.nowPlayingInfoButtons .playlist .listItemMediaInfo,
.nowPlayingInfoButtons .btnStop {

20
src/components/remotecontrol/remotecontrol.js
View file

@ -511,11 +511,11 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function onShuffleQueueModeChange() {
let shuffleMode = playbackManager.getQueueShuffleMode(this);
let context = dlg;
let shuffleButton = context.querySelector('.btnShuffle');
let shuffleButton = context.querySelector('.btnShuffleQueue');
if ('Sorted' === shuffleMode) {
shuffleButton.classList.remove('shuffleButton-active');
shuffleButton.classList.remove('shuffleQueue-active');
} else if ('Shuffle' === shuffleMode) {
shuffleButton.classList.add('shuffleButton-active');
shuffleButton.classList.add('shuffleQueue-active');
}
onPlaylistUpdate();
}
@ -703,7 +703,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
playbackManager.fastForward(currentPlayer);
}
});
context.querySelector('.btnShuffle').addEventListener('click', function () {
context.querySelector('.btnShuffleQueue').addEventListener('click', function () {
if (currentPlayer) {
if (playbackManager.getQueueShuffleMode(currentPlayer) === 'Sorted') {
playbackManager.setQueueShuffleMode('Shuffle', currentPlayer);
@ -841,27 +841,23 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
}
function init(ownerView, context) {
let contextmenuHtml = `<button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title=${globalize.translate('ButtonToggleContextMenu')}><span class="material-icons more_vert"></span></button>`;
let volumecontrolHtml = '<div class="volumecontrol flex align-items-center flex-wrap-wrap justify-content-center">';
volumecontrolHtml += `<button is="paper-icon-button-light" class="buttonMute autoSize" title=${globalize.translate('Mute')}><span class="xlargePaperIconButton material-icons volume_up"></span></button>`;
volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>';
volumecontrolHtml += '</div>';
let shuffleButtonHtml = `<button is="paper-icon-button-light" class="btnShuffle autoSize" title="${globalize.translate('ButtonShuffle')}"><span class="material-icons shuffle"></span></button>`;
let repeatButtonHtml = `<button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${globalize.translate('ButtonRepeat')}" data-command="SetRepeatMode"><span class="material-icons repeat"></span></button>`;
let optionsSection = context.querySelector('.playlistSectionButton');
if (!layoutManager.mobile) {
context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', repeatButtonHtml + shuffleButtonHtml + volumecontrolHtml);
optionsSection.innerHTML += contextmenuHtml;
context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml);
optionsSection.classList.remove('align-items-center', 'justify-content-center');
optionsSection.classList.add('align-items-right', 'justify-content-flex-end');
context.querySelector('.playlist').classList.remove('hide');
context.querySelector('.btnSavePlaylist').classList.remove('hide');
} else {
optionsSection.innerHTML += volumecontrolHtml + contextmenuHtml;
optionsSection.querySelector('.btnTogglePlaylist').insertAdjacentHTML('afterend', volumecontrolHtml);
optionsSection.classList.add('playlistSectionButtonTransparent');
context.querySelector('.btnTogglePlaylist').classList.remove('hide');
context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('afterbegin', repeatButtonHtml);
context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('beforeend', shuffleButtonHtml);
context.querySelector('.playlistSectionButton').classList.remove('justify-content-center');
context.querySelector('.playlistSectionButton').classList.add('justify-content-space-between');
}
bindEvents(context);

21
src/nowplaying.html
View file

@ -29,6 +29,11 @@
<div class="nowPlayingButtonsContainer focuscontainer-x">
<div class="nowPlayingInfoButtons">
<button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${ButtonRepeat}"
data-command="SetRepeatMode">
<span class="material-icons repeat"></span>
</button>
<button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
<span class="material-icons replay_10"></span>
@ -54,6 +59,10 @@
<span class="material-icons forward_30"></span>
</button>
<button is="paper-icon-button-light" class="btnShuffleQueue autoSize" title="${ButtonShuffle}">
<span class="material-icons shuffle"></span>
</button>
</div>
<div class="nowPlayingSecondaryButtons">
@ -72,6 +81,15 @@
<span class="material-icons fullscreen"></span>
</button>
<button is="paper-icon-button-light" class="btnShuffleQueue autoSize" title="${ButtonShuffle}">
<span class="material-icons shuffle"></span>
</button>
<button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${ButtonRepeat}"
data-command="SetRepeatMode">
<span class="material-icons repeat"></span>
</button>
</div>
</div>
</div>
@ -165,6 +183,9 @@
<button is="paper-icon-button-light" class="btnSavePlaylist hide" title="${ButtonSave}">
<span class="material-icons save"></span>
</button>
<button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title="${ButtonToggleContextMenu}">
<span class="material-icons more_vert"></span>
</button>
</div>
<div id="playlist" class="playlist itemsContainer vertical-list nowPlayingPlaylist hide" is="emby-itemscontainer" data-dragreorder="true"></div>
</div>

2
src/themes/appletv/theme.css
View file

@ -450,7 +450,7 @@ html {
color: #4285f4;
}
.shuffleButton-active {
.shuffleQueue-active {
color: #4285f4 !important;
}

2
src/themes/blueradiance/theme.css
View file

@ -450,7 +450,7 @@ html {
color: #4285f4;
}
.shuffleButton-active {
.shuffleQueue-active {
color: #4285f4 !important;
}

2
src/themes/dark/theme.css
View file

@ -421,7 +421,7 @@ html {
color: #4285f4;
}
.shuffleButton-active {
.shuffleQueue-active {
color: #4285f4 !important;
}

2
src/themes/light/theme.css
View file

@ -432,7 +432,7 @@ html {
color: #4285f4;
}
.shuffleButton-active {
.shuffleQueue-active {
color: #4285f4 !important;
}

2
src/themes/purplehaze/theme.css
View file

@ -547,7 +547,7 @@ a[data-role=button] {
color: #4285f4;
}
.shuffleButton-active {
.shuffleQueue-active {
color: #4285f4 !important;
}

2
src/themes/wmc/theme.css
View file

@ -430,7 +430,7 @@ html {
color: #4285f4;
}
.shuffleButton-active {
.shuffleQueue-active {
color: #4285f4 !important;
}