Skip to content

Commit

Permalink
Merge pull request jellyfin#2343 from jellyfin/plugin-icon
Browse files Browse the repository at this point in the history 
fix image alignment on plugin cards
  • Loading branch information
@dkanada
dkanada committed Feb 22, 2021
2 parents 218a406 + 9fbefcd commit 536797a
Show file tree
Hide file tree
Showing 9 changed files with 52 additions and 50 deletions.
10 changes: 3 additions & 7 deletions src/components/cardbuilder/card.css
View file
Expand Up @@ -174,6 +174,7 @@ button::-moz-focus-inner {

.cardScalable .cardImageContainer {
height: 100%;
width: 100%;
contain: strict;
}

Expand Down Expand Up @@ -225,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,
Expand Down Expand Up @@ -368,11 +369,6 @@ button::-moz-focus-inner {
color: inherit;
}

.cardImageIcon-small {
font-size: 3em !important;
margin-bottom: 0.1em;
}

.cardIndicators {
right: 0.225em;
top: 0.225em;
Expand Down
2 changes: 1 addition & 1 deletion src/controllers/dashboard/devices/devices.js
View file
Expand Up @@ -96,7 +96,7 @@ import confirm from '../../../components/confirm/confirm';
deviceHtml += '<div class="cardBox visualCardBox">';
deviceHtml += '<div class="cardScalable">';
deviceHtml += '<div class="cardPadder cardPadder-backdrop"></div>';
deviceHtml += '<a is="emby-linkbutton" href="' + (canEdit ? '#!/device.html?id=' + device.Id : '#') + '" class="cardContent cardImageContainer">';
deviceHtml += `<a is="emby-linkbutton" href="${canEdit ? '#!/device.html?id=' + device.Id : '#'}" class="cardContent cardImageContainer">`;
const iconUrl = imageHelper.getDeviceIcon(device);

if (iconUrl) {
Expand Down
10 changes: 6 additions & 4 deletions src/controllers/dashboard/library.js
View file
Expand Up @@ -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 */

Expand Down Expand Up @@ -276,11 +277,12 @@ 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 ${imgUrl ? '' : 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 += '<span class="cardImageIcon-small material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
html += `<div class="cardImageContainer editLibrary ${cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer;">`;
html += '<span class="cardImageIcon material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
hasCardImageContainer = true;
}

Expand All @@ -293,7 +295,7 @@ import confirm from '../../components/confirm/confirm';

if (!imgUrl && virtualFolder.showNameWithIcon) {
html += '<h3 class="cardImageContainer addLibrary" style="position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;flex-direction:column;">';
html += '<span class="cardImageIcon-small material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
html += '<span class="cardImageIcon material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';

if (virtualFolder.showNameWithIcon) {
html += '<div style="margin:1em 0;position:width:100%;">';
Expand Down
15 changes: 13 additions & 2 deletions src/controllers/dashboard/plugins/available/index.js
View file
@@ -1,6 +1,7 @@
import loading from '../../../../components/loading/loading';
import libraryMenu from '../../../../scripts/libraryMenu';
import globalize from '../../../../scripts/globalize';
import * as cardBuilder from '../../../../components/cardbuilder/cardBuilder.js';
import '../../../../components/cardbuilder/card.css';
import '../../../../elements/emby-button/emby-button';
import '../../../../elements/emby-checkbox/emby-checkbox';
Expand Down Expand Up @@ -102,10 +103,20 @@ function getPluginHtml(plugin, options, installedPlugins) {
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + '>';
html += '<span class="cardImageIcon material-icons folder"></span>';
html += '<div class="cardContent">';
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 += `<div class="cardImage flex align-items-center justify-content-center ${cardBuilder.getDefaultBackgroundClass()}">`;
html += '<span class="cardImageIcon material-icons extension"></span>';
html += '</div>';
}

html += '</a>';
html += '</div>';
html += '</div>';
html += '<div class="cardFooter">';
html += "<div class='cardText'>";
html += plugin.name;
Expand Down
22 changes: 16 additions & 6 deletions src/controllers/dashboard/plugins/installed/index.js
View file
Expand Up @@ -2,6 +2,7 @@ import loading from '../../../../components/loading/loading';
import libraryMenu from '../../../../scripts/libraryMenu';
import dom from '../../../../scripts/dom';
import globalize from '../../../../scripts/globalize';
import * as cardBuilder from '../../../../components/cardbuilder/cardBuilder.js';
import '../../../../components/cardbuilder/card.css';
import '../../../../elements/emby-button/emby-button';
import Dashboard, { pageIdOn } from '../../../../scripts/clientUtils';
Expand Down Expand Up @@ -53,22 +54,31 @@ 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">';
html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += configPageUrl ? `<a class="cardContent cardImageContainer" is="emby-linkbutton" href="${configPageUrl}">` : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer emby-button">';
html += '<span class="cardImageIcon';
html += '<div class="cardContent">';
if (configPageUrl) {
html += `<a class="cardImageContainer" is="emby-linkbutton" style="margin:0;padding:0" href="${configPageUrl}">`;
} else {
html += '<div class="cardImageContainer noConfigPluginCard noHoverEffect emby-button">';
}

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 += ' material-icons folder">';
html += `<div class="cardImage flex align-items-center justify-content-center ${cardBuilder.getDefaultBackgroundClass()}">`;
html += '<span class="cardImageIcon material-icons extension"></span>';
html += '</div>';
}
html += '</span> ';
html += configPageUrl ? '</a>' : '</div>';
html += '</div>';
html += '</div>';
html += '<div class="cardFooter">';

if (configPage || plugin.CanUninstall) {
Expand Down Expand Up @@ -133,7 +143,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 = [];
Expand Down
5 changes: 3 additions & 2 deletions src/controllers/dashboard/users/userprofilespage.js
View file
Expand Up @@ -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 */

Expand Down Expand Up @@ -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 ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}" href="#!/useredit.html?userId=${user.Id}">`;
let imgUrl;

if (user.PrimaryImageTag) {
Expand All @@ -113,7 +114,7 @@ import confirm from '../../../components/confirm/confirm';
if (imgUrl) {
html += '<div class="' + imageClass + '" style="background-image:url(\'' + imgUrl + "');\">";
} else {
html += '<div class="' + imageClass + ' flex align-items-center justify-content-center">';
html += `<div class="${imageClass} ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()} flex align-items-center justify-content-center">`;
html += '<span class="material-icons cardImageIcon person"></span>';
}

Expand Down
33 changes: 6 additions & 27 deletions src/controllers/session/login/index.js
View file
Expand Up @@ -13,6 +13,7 @@ import ServerConnections from '../../../components/ServerConnections';
import toast from '../../../components/toast/toast';
import dialogHelper from '../../../components/dialogHelper/dialogHelper';
import baseAlert from '../../../components/alert';
import cardBuilder from '../../../components/cardbuilder/cardBuilder';

/* eslint-disable indent */

Expand Down Expand Up @@ -131,29 +132,6 @@ import baseAlert from '../../../components/alert';
}
}

const metroColors = ['#6FBD45', '#4BB3DD', '#4164A5', '#E12026', '#800080', '#E1B222', '#008040', '#0094FF', '#FF00C7', '#FF870F', '#7F0037'];

function getRandomMetroColor() {
const index = Math.floor(Math.random() * (metroColors.length - 1));
return metroColors[index];
}

function getMetroColor(str) {
if (str) {
const character = String(str.substr(0, 1).charCodeAt());
let sum = 0;

for (let i = 0; i < character.length; i++) {
sum += parseInt(character.charAt(i));
}

const index = String(sum).substr(-1);
return metroColors[index];
}

return getRandomMetroColor();
}

function loadUserList(context, apiClient, users) {
let html = '';

Expand All @@ -176,7 +154,7 @@ import baseAlert from '../../../components/alert';
html += '<div class="' + cardBoxCssClass + '">';
html += '<div class="cardScalable">';
html += '<div class="cardPadder cardPadder-square"></div>';
html += '<div class="cardContent" data-haspw="' + user.HasPassword + '" data-username="' + user.Name + '" data-userid="' + user.Id + '">';
html += `<div class="cardContent" style="border-radius:0.2em" data-haspw="${user.HasPassword}" data-username="${user.Name}" data-userid="${user.Id}">`;
let imgUrl;

if (user.PrimaryImageTag) {
Expand All @@ -185,11 +163,12 @@ import baseAlert from '../../../components/alert';
tag: user.PrimaryImageTag,
type: 'Primary'
});

html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + imgUrl + "');\"></div>";
} else {
const background = getMetroColor(user.Id);
imgUrl = 'assets/img/avatar.png';
html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + imgUrl + "');background-color:" + background + ';"></div>';
html += `<div class="cardImage flex align-items-center justify-content-center ${cardBuilder.getDefaultBackgroundClass()}">`;
html += '<span class="material-icons cardImageIcon person"></span>';
html += '</div>';
}

html += '</div>';
Expand Down
3 changes: 2 additions & 1 deletion src/controllers/session/selectServer/index.js
View file
Expand Up @@ -17,6 +17,7 @@ import '../../../elements/emby-button/emby-button';
import Dashboard from '../../../scripts/clientUtils';
import ServerConnections from '../../../components/ServerConnections';
import alert from '../../../components/alert';
import cardBuilder from '../../../components/cardbuilder/cardBuilder';

/* eslint-disable indent */

Expand Down Expand Up @@ -64,7 +65,7 @@ import alert from '../../../components/alert';
cardContainer += '<div class="cardPadder cardPadder-square">';
cardContainer += '</div>';
cardContainer += '<div class="cardContent">';
cardContainer += '<div class="cardImageContainer coveredImage" style="background:#0288D1;border-radius:.15em;">';
cardContainer += `<div class="cardImageContainer coveredImage ${cardBuilder.getDefaultBackgroundClass()}" style="border-radius:0.2em">`;
cardContainer += cardImageContainer;
cardContainer += '</div>';
cardContainer += '</div>';
Expand Down
2 changes: 2 additions & 0 deletions src/strings/en-us.json
View file
Expand Up @@ -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",
Expand Down

0 comments on commit 536797a

Please sign in to comment.