milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki 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

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">';