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

add background colors to user and library cards

Browse source
This commit is contained in:
dkanada 2021-02-07 00:16:45 +09:00
parent 22c66ae353
commit 50b9e1adf4
6 changed files with 22 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -226,8 +226,8 @@ button::-moz-focus-inner {
}
.visualCardBox .cardContent {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0.2em;
border-top-right-radius: 0.2em;
}
.cardContent-shadow,

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

@ -9,6 +9,7 @@ import '../../components/cardbuilder/card.css';
import '../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator';
import Dashboard, { pageClassOn, pageIdOn } from '../../scripts/clientUtils';
import confirm from '../../components/confirm/confirm';
import cardBuilder from '../../components/cardbuilder/cardBuilder';
/* eslint-disable indent */
@ -276,10 +277,11 @@ import confirm from '../../components/confirm/confirm';
let hasCardImageContainer;
if (imgUrl) {
html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;background-image:url(\'' + imgUrl + "');\">";
html += `<div class="cardImageContainer editLibrary ${cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer">`;
html += `<img src="${imgUrl}" style="width:100%" />`;
hasCardImageContainer = true;
} else if (!virtualFolder.showNameWithIcon) {
html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;">';
html += `<div class="cardImageContainer editLibrary ${cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer;">`;
html += '<span class="cardImageIcon-small material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
hasCardImageContainer = true;
}

11
src/controllers/dashboard/plugins/available/index.js
View file

@ -104,13 +104,14 @@ function getPluginHtml(plugin, options, installedPlugins) {
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += `<div class="cardContent ${cardBuilder.getDefaultBackgroundClass()}">`;
html += `<a class="cardImageContainer" is="emby-linkbutton" href="${href}" ${target}>`;
html += `<span class="cardImageIcon ${plugin.ImageUrl ? '' : 'material-icons extension'}">`;
if (plugin.ImageUrl) {
html += `<img src="${plugin.ImageUrl}" style="width:100%;height:auto" />`;
html += `<a class="cardImageContainer" is="emby-linkbutton" style="margin:0;padding:0" href="${href}" ${target}>`;
if (plugin.imageUrl) {
html += `<img src="${plugin.imageUrl}" style="width:100%" />`;
} else {
html += `<span class="cardImageIcon material-icons extension"></span>`;
}
html += '</span>';
html += '</a>';
html += '</div>';
html += '</div>';

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

@ -54,8 +54,10 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
const configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
return pluginConfigurationPage.PluginId == plugin.Id;
})[0];
const configPageUrl = configPage ? Dashboard.getPluginUrl(configPage.Name) : null;
let html = '';
html += `<div data-id='${plugin.Id}' data-version='${plugin.Version}' data-name='${plugin.Name}' data-removable='${plugin.CanUninstall}' data-status='${plugin.Status}' class='card backdropCard'>`;
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable">';
@ -67,12 +69,12 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
html += '<div class="cardImageContainer noConfigPluginCard noHoverEffect emby-button">';
}
html += `<span class="cardImageIcon ${plugin.HasImage ? '' : 'material-icons extension'}">`;
if (plugin.HasImage) {
html += `<img src="/Plugins/${plugin.Id}/${plugin.Version}/Image" style="width:100%;height:auto" />`;
html += `<img src="/Plugins/${plugin.Id}/${plugin.Version}/Image" style="width:100%" />`;
} else {
html += `<span class="cardImageIcon material-icons extension"></span>`;
}
html += '</span>';
html += configPageUrl ? '</a>' : '</div>';
html += '</div>';
html += '</div>';
@ -140,7 +142,7 @@ function showPluginMenu(page, elem) {
const id = card.getAttribute('data-id');
const name = card.getAttribute('data-name');
const removable = card.getAttribute('data-removable');
const configHref = card.querySelector('.cardContent').getAttribute('href');
const configHref = card.querySelector('.cardImageContainer').getAttribute('href');
const status = card.getAttribute('data-status');
const version = card.getAttribute('data-version');
const menuItems = [];

3
src/controllers/dashboard/users/userprofilespage.js
View file

@ -10,6 +10,7 @@ import '../../../components/indicators/indicators.css';
import '../../../assets/css/flexstyles.scss';
import Dashboard, { pageIdOn } from '../../../scripts/clientUtils';
import confirm from '../../../components/confirm/confirm';
import cardBuilder from '../../../components/cardbuilder/cardBuilder';
/* eslint-disable indent */
@ -93,7 +94,7 @@ import confirm from '../../../components/confirm/confirm';
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-square"></div>';
html += '<a is="emby-linkbutton" class="cardContent" href="#!/useredit.html?userId=' + user.Id + '">';
html += `<a is="emby-linkbutton" class="cardContent ${cardBuilder.getDefaultBackgroundClass()}" href="#!/useredit.html?userId=${user.Id}">`;
let imgUrl;
if (user.PrimaryImageTag) {

2
src/strings/en-us.json
View file

@ -179,6 +179,8 @@
"DirectStreamHelp1": "The video stream is compatible with the device, but has an incompatible audio format (DTS, TRUEHD, etc) or number of audio channels. The video stream will be repackaged losslessly on the fly before being sent to the device. Only the audio stream will be transcoded.",
"DirectStreamHelp2": "Power consumed by direct streaming usually depends on the audio profile. Only the video stream is lossless.",
"DirectStreaming": "Direct streaming",
"EnablePlugin": "Enable Plugin",
"DisablePlugin": "Disable Plugin",
"Disc": "Disc",
"Disconnect": "Disconnect",
"Display": "Display",