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

Make login card scalable on focus (#535)

Browse source 
* Make login card scalable on focus
* Remove focus related classes
This commit is contained in:
Dmitry Lyzo 2019-11-11 12:28:27 +03:00 • committed by Vasily
parent 9c47f8fc1c
commit ad8fe23ef8
17 changed files with 131 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -26,7 +26,7 @@ button {
font-weight: inherit !important;
}
.card-nofocustransform {
.card:not(.show-animation) {
contain: layout style paint;
}
@ -98,20 +98,21 @@ button {
contain: layout style;
}
.cardBox-withfocuscontent-large {
.card.show-focus:not(.show-animation) .cardBox {
margin: .4em;
}
.card-focuscontent-large {
.card.show-focus:not(.show-animation) .cardBox.visualCardBox,
.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
border: .5em solid transparent;
}
.cardBox-focustransform {
.card.show-animation .cardBox {
will-change: transform;
transition: transform 200ms ease-out;
}
.card:focus > .cardBox-focustransform {
.card.show-animation:focus > .cardBox {
transform: scale(1.18, 1.18);
}

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

@ -3,7 +3,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
'use strict';
var devicePixelRatio = window.devicePixelRatio || 1;
var enableFocusTransfrom = !browser.slow && !browser.edge;
var enableFocusTransform = !browser.slow && !browser.edge;
function getCardsHtml(items, options) {
if (arguments.length === 1) {
@ -1203,6 +1203,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
shape = shape || 'mixedSquare';
}
// TODO move card creation code to Card component
var className = 'card';
if (shape) {
@ -1221,8 +1223,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
className += ' card-hoverable';
}
if (!enableFocusTransfrom || !layoutManager.tv) {
className += ' card-nofocustransform';
if (layoutManager.tv) {
className += ' show-focus';
if (enableFocusTransform) {
className += ' show-animation';
}
}
var imgInfo = getCardImageUrl(item, apiClient, options, shape);
@ -1250,23 +1256,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
var cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox';
if (layoutManager.tv) {
if (enableFocusTransfrom) {
cardBoxClass += ' cardBox-focustransform cardBox-withfocuscontent';
} else {
cardBoxClass += ' cardBox-withfocuscontent-large';
}
if (options.cardLayout) {
cardBoxClass += ' card-focuscontent';
if (!enableFocusTransfrom) {
cardBoxClass += ' card-focuscontent-large';
}
}
}
var footerCssClass;
var progressHtml = indicators.getProgressBarHtml(item);
@ -1385,15 +1374,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
var cardScalableClass = 'cardScalable';
if (layoutManager.tv && !options.cardLayout) {
cardScalableClass += ' card-focuscontent';
if (!enableFocusTransfrom) {
cardScalableClass += ' card-focuscontent-large';
}
}
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
cardBoxClose = '</div>';
cardScalableClose = '</div>';

27
src/components/cardbuilder/chaptercardbuilder.js
View file

@ -1,12 +1,20 @@
define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browser'], function (datetime, imageLoader, connectionManager, layoutManager, browser) {
'use strict';
var enableFocusTransform = !browser.slow && !browser.edge;
function buildChapterCardsHtml(item, chapters, options) {
// TODO move card creation code to Card component
var className = 'card itemAction chapterCard';
if (layoutManager.tv && (browser.animate || browser.edge)) {
className += ' card-focusscale';
if (layoutManager.tv) {
className += ' show-focus';
if (enableFocusTransform) {
className += ' show-animation';
}
}
var mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
@ -92,19 +100,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
var cardBoxCssClass = 'cardBox';
var cardScalableClass = 'cardScalable';
if (layoutManager.tv) {
var enableFocusTransfrom = !browser.slow && !browser.edge;
cardScalableClass += ' card-focuscontent';
if (enableFocusTransfrom) {
cardBoxCssClass += ' cardBox-focustransform cardBox-withfocuscontent';
} else {
cardBoxCssClass += ' cardBox-withfocuscontent-large';
cardScalableClass += ' card-focuscontent-large';
}
}
var html = '<button type="button" class="' + className + '"' + dataAttributes + '><div class="' + cardBoxCssClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainer + '</div><div class="innerCardFooter">' + nameHtml + '</div></div></div></button>';
return html;
@ -137,4 +132,4 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
buildChapterCards: buildChapterCards
};
});
});

16
src/components/imagedownloader/imagedownloader.js
View file

@ -1,6 +1,8 @@
define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader', 'browser', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'emby-checkbox', 'paper-icon-button-light', 'emby-button', 'formDialogStyle', 'cardStyle'], function (loading, appHost, dialogHelper, connectionManager, imageLoader, browser, layoutManager, scrollHelper, globalize, require) {
'use strict';
var enableFocusTransform = !browser.slow && !browser.edge;
var currentItemId;
var currentItemType;
var currentResolve;
@ -164,6 +166,8 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
var tagName = layoutManager.tv ? 'button' : 'div';
var enableFooterButtons = !layoutManager.tv;
// TODO move card creation code to Card component
var html = '';
var cssClass = "card scalableCard imageEditorCard";
@ -196,12 +200,12 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
if (tagName === 'button') {
cssClass += ' btnImageCard';
if (layoutManager.tv && !browser.slow) {
cardBoxCssClass += ' cardBox-focustransform';
}
if (layoutManager.tv) {
cardBoxCssClass += ' card-focuscontent cardBox-withfocuscontent';
cssClass += ' show-focus';
if (enableFocusTransform) {
cssClass += ' show-animation';
}
}
html += '<button type="button" class="' + cssClass + '"';
@ -413,4 +417,4 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
});
}
};
});
});

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

@ -1,6 +1,8 @@
define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', 'focusManager', 'globalize', 'scrollHelper', 'imageLoader', 'require', 'browser', 'apphost', 'cardStyle', 'formDialogStyle', 'emby-button', 'paper-icon-button-light', 'css!./imageeditor'], function (dialogHelper, connectionManager, loading, dom, layoutManager, focusManager, globalize, scrollHelper, imageLoader, require, browser, appHost) {
'use strict';
var enableFocusTransform = !browser.slow && !browser.edge;
var currentItem;
var hasChanges = false;
@ -95,6 +97,8 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
function getCardHtml(image, index, numImages, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) {
// TODO move card creation code to Card component
var html = '';
var cssClass = "card scalableCard imageEditorCard";
@ -105,12 +109,12 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
if (tagName === 'button') {
cssClass += ' btnImageCard';
if (layoutManager.tv && !browser.slow) {
cardBoxCssClass += ' cardBox-focustransform';
}
if (layoutManager.tv) {
cardBoxCssClass += ' card-focuscontent cardBox-withfocuscontent';
cssClass += ' show-focus';
if (enableFocusTransform) {
cssClass += ' show-animation';
}
}
html += '<button type="button" class="' + cssClass + '"';

16
src/components/itemidentifier/itemidentifier.js
View file

@ -1,6 +1,8 @@
define(["dialogHelper", "loading", "connectionManager", "require", "globalize", "scrollHelper", "layoutManager", "focusManager", "browser", "emby-input", "emby-checkbox", "paper-icon-button-light", "css!./../formdialog", "material-icons", "cardStyle"], function (dialogHelper, loading, connectionManager, require, globalize, scrollHelper, layoutManager, focusManager, browser) {
"use strict";
var enableFocusTransform = !browser.slow && !browser.edge;
var currentItem;
var currentItemType;
var currentServerId;
@ -172,6 +174,8 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
function getSearchResultHtml(result, index) {
// TODO move card creation code to Card component
var html = "";
var cssClass = "card scalableCard";
var cardBoxCssClass = "cardBox";
@ -190,16 +194,16 @@ define(["dialogHelper", "loading", "connectionManager", "require", "globalize",
padderClass = "cardPadder-portrait";
}
if (layoutManager.tv && !browser.slow) {
cardBoxCssClass += " cardBox-focustransform";
if (layoutManager.tv) {
cssClass += " show-focus";
if (enableFocusTransform) {
cssClass += " show-animation";
}
}
cardBoxCssClass += " cardBox-bottompadded";
if (layoutManager.tv) {
cardBoxCssClass += " card-focuscontent cardBox-withfocuscontent";
}
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
html += '<div class="' + cardBoxCssClass + '">';
html += '<div class="cardScalable">';

5
src/components/themes/appletv/theme.css
View file

@ -455,8 +455,9 @@ html {
color: #4285F4
}
.card:focus .card-focuscontent {
border-color: #00a4dc
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #00a4dc !important
}
.metadataSidebarIcon {

5
src/components/themes/blueradiance/theme.css
View file

@ -440,8 +440,9 @@ html {
color: #4285F4
}
.card:focus .card-focuscontent {
border-color: #00a4dc
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #00a4dc !important
}
.layout-desktop ::-webkit-scrollbar {

5
src/components/themes/dark/theme.css
View file

@ -417,8 +417,9 @@ html {
color: #4285F4
}
.card:focus .card-focuscontent {
border-color: #00a4dc
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #00a4dc !important
}
.layout-desktop ::-webkit-scrollbar {

5
src/components/themes/emby/theme.css
View file

@ -417,8 +417,9 @@ html {
color: #4285F4
}
.card:focus .card-focuscontent {
border-color: #52b54b
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #52b54b !important
}
.layout-desktop ::-webkit-scrollbar {

5
src/components/themes/light/theme.css
View file

@ -436,8 +436,9 @@ html {
color: #4285F4
}
.card:focus .card-focuscontent {
border-color: #00a4dc
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #00a4dc !important
}
.metadataSidebarIcon {

5
src/components/themes/purple-haze/theme.css
View file

@ -533,8 +533,9 @@ a[data-role=button] {
color: #4285F4
}
.card:focus .card-focuscontent {
border-color: #ff77f1
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #ff77f1 !important
}
.layout-desktop,

5
src/components/themes/wmc/theme.css
View file

@ -439,8 +439,9 @@ html {
color: #4285F4
}
.card:focus .card-focuscontent {
border-color: #fff
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #fff !important
}
.layout-desktop ::-webkit-scrollbar {

14
src/components/tunerpicker.js
View file

@ -1,6 +1,8 @@
define(["dialogHelper", "dom", "layoutManager", "connectionManager", "globalize", "loading", "material-icons", "formDialogStyle", "emby-button", "emby-itemscontainer", "cardStyle"], function (dialogHelper, dom, layoutManager, connectionManager, globalize, loading) {
define(["dialogHelper", "dom", "layoutManager", "connectionManager", "globalize", "loading", "browser", "material-icons", "formDialogStyle", "emby-button", "emby-itemscontainer", "cardStyle"], function (dialogHelper, dom, layoutManager, connectionManager, globalize, loading, browser) {
"use strict";
var enableFocusTransform = !browser.slow && !browser.edge;
function getEditorHtml() {
var html = "";
html += '<div class="formDialogContent scrollY">';
@ -24,12 +26,16 @@ define(["dialogHelper", "dom", "layoutManager", "connectionManager", "globalize"
cssClass += " backdropCard backdropCard-scalable";
padderClass = "cardPadder-backdrop";
// TODO move card creation code to Card component
if (layoutManager.tv) {
cssClass += " card-focusscale";
cardBoxCssClass += " cardBox-focustransform";
cssClass += " show-focus";
if (enableFocusTransform) {
cssClass += " show-animation";
}
}
cardBoxCssClass += " card-focuscontent";
html += '<button type="button" class="' + cssClass + '" data-id="' + device.DeviceId + '" style="min-width:33.3333%;">';
html += '<div class="' + cardBoxCssClass + '">';
html += '<div class="cardScalable visualCardBox-cardScalable">';

14
src/controllers/livetvstatus.js
View file

@ -1,6 +1,8 @@
define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layoutManager", "loading", "listViewStyle", "flexStyles", "emby-itemscontainer", "cardStyle", "material-icons", "emby-button"], function ($, globalize, taskButton, dom, libraryMenu, layoutManager, loading) {
define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layoutManager", "loading", "browser", "listViewStyle", "flexStyles", "emby-itemscontainer", "cardStyle", "material-icons", "emby-button"], function ($, globalize, taskButton, dom, libraryMenu, layoutManager, loading, browser) {
"use strict";
var enableFocusTransform = !browser.slow && !browser.edge;
function getDeviceHtml(device) {
var padderClass;
var html = "";
@ -9,12 +11,16 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
cssClass += " backdropCard backdropCard-scalable";
padderClass = "cardPadder-backdrop";
// TODO move card creation code to Card component
if (layoutManager.tv) {
cssClass += " card-focusscale";
cardBoxCssClass += " cardBox-focustransform";
cssClass += " show-focus";
if (enableFocusTransform) {
cssClass += " show-animation";
}
}
cardBoxCssClass += " card-focuscontent";
html += '<div type="button" class="' + cssClass + '" data-id="' + device.Id + '">';
html += '<div class="' + cardBoxCssClass + '">';
html += '<div class="cardScalable visualCardBox-cardScalable">';

22
src/controllers/loginpage.js
View file

@ -1,6 +1,8 @@
define(["apphost", "appSettings", "dom", "connectionManager", "loading", "cardStyle", "emby-checkbox"], function(appHost, appSettings, dom, connectionManager, loading) {
define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layoutManager", "browser", "cardStyle", "emby-checkbox"], function(appHost, appSettings, dom, connectionManager, loading, layoutManager, browser) {
"use strict";
var enableFocusTransform = !browser.slow && !browser.edge;
function authenticateUserByName(page, apiClient, username, password) {
loading.show();
apiClient.authenticateUserByName(username, password).then(function(result) {
@ -60,7 +62,23 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "cardSt
var html = "";
for (var i = 0; i < users.length; i++) {
var user = users[i];
html += '<button type="button" class="card squareCard scalableCard squareCard-scalable"><div class="cardBox cardBox-bottompadded">';
// TODO move card creation code to Card component
var cssClass = "card squareCard scalableCard squareCard-scalable";
if (layoutManager.tv) {
cssClass += " show-focus";
if (enableFocusTransform) {
cssClass += " show-animation";
}
}
var cardBoxCssClass = "cardBox cardBox-bottompadded";
html += '<button type="button" class="' + cssClass + '">';
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 + '">';

20
src/controllers/selectserver.js
View file

@ -1,6 +1,8 @@
define(["loading", "appRouter", "layoutManager", "appSettings", "apphost", "focusManager", "connectionManager", "globalize", "actionsheet", "dom", "material-icons", "flexStyles", "emby-scroller", "emby-itemscontainer", "cardStyle", "emby-button"], function (loading, appRouter, layoutManager, appSettings, appHost, focusManager, connectionManager, globalize, actionSheet, dom) {
define(["loading", "appRouter", "layoutManager", "appSettings", "apphost", "focusManager", "connectionManager", "globalize", "actionsheet", "dom", "browser", "material-icons", "flexStyles", "emby-scroller", "emby-itemscontainer", "cardStyle", "emby-button"], function (loading, appRouter, layoutManager, appSettings, appHost, focusManager, connectionManager, globalize, actionSheet, dom, browser) {
"use strict";
var enableFocusTransform = !browser.slow && !browser.edge;
function renderSelectServerItems(view, servers) {
var items = servers.map(function (server) {
return {
@ -21,17 +23,25 @@ define(["loading", "appRouter", "layoutManager", "appSettings", "apphost", "focu
cardImageContainer = '<div class="cardImage" style="' + item.cardImageStyle + '"></div>';
}
var cardBoxCssClass = "cardBox";
// TODO move card creation code to Card component
var cssClass = "card overflowSquareCard loginSquareCard scalableCard overflowSquareCard-scalable";
if (layoutManager.tv) {
cardBoxCssClass += " cardBox-focustransform";
cssClass += " show-focus";
if (enableFocusTransform) {
cssClass += " show-animation";
}
}
var cardBoxCssClass = "cardBox";
var innerOpening = '<div class="' + cardBoxCssClass + '">';
var cardContainer = '';
cardContainer += '<button raised class="card overflowSquareCard loginSquareCard scalableCard overflowSquareCard-scalable" style="display:inline-block;" data-id="' + item.id + '" data-url="' + (item.url || "") + '" data-cardtype="' + item.cardType + '">';
cardContainer += '<button raised class="' + cssClass + '" style="display:inline-block;" data-id="' + item.id + '" data-url="' + (item.url || "") + '" data-cardtype="' + item.cardType + '">';
cardContainer += innerOpening;
cardContainer += '<div class="cardScalable card-focuscontent">';
cardContainer += '<div class="cardScalable">';
cardContainer += '<div class="cardPadder cardPadder-square">';
cardContainer += '</div>';
cardContainer += '<div class="cardContent">';