Skip to content
This repository has been archived by the owner on Oct 8, 2020. It is now read-only.

Commit

Permalink
fixes for default tab, tab highlight, and view size
Browse files Browse the repository at this point in the history
  • Loading branch information
@maykar
maykar committed Dec 18, 2019
1 parent 2c1ed9c commit 7bbda42
Show file tree
Hide file tree
Showing 7 changed files with 97 additions and 88 deletions.
2 changes: 1 addition & 1 deletion .devcontainer/ui-lovelace.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ custom_header:
options: '{% if states.input_boolean.text_changes.state == "on" %}{{dayNameLong}}<br>{{date}}{% endif %}'
menu_dropdown: '{{ states.input_boolean.menu_dropdown.state == "on" }}'
voice_dropdown: '{{ states.input_boolean.voice_dropdown.state == "on" }}'
background: black #url('https://bit.ly/375dx0T')
background: url('https://bit.ly/375dx0T')
views:
- icon: mdi:pac-man
title: pacman
Expand Down
149 changes: 77 additions & 72 deletions dist/custom-header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ const defaultVariables = locale => {
dayNameLong: d.toLocaleDateString(locale, {
weekday: 'long'
}),
hours12: d.getHours() > 12 ? d.getHours() - 12 : d.getHours(),
hours12LZ: String(d.getHours() > 12 ? d.getHours() - 12 : d.getHours()).padStart(2, 0),
hours12: String((d.getHours() + 24) % 12 || 12),
hours12LZ: String((d.getHours() + 24) % 12 || 12).padStart(2, 0),
hours24: d.getHours(),
hours24LZ: String(d.getHours()).padStart(2, 0),
minutes: d.getMinutes(),
Expand Down Expand Up @@ -4252,6 +4252,75 @@ const menuButtonObservers = (config, header) => {
}
};

const selectTab = () => {
const haActiveTabIndex = haElem.tabContainer.indexOf(root.querySelector('paper-tab.iron-selected'));
const chActiveTabIndex = header.tabContainer.querySelector('paper-tab.iron-selected');

if (chActiveTabIndex !== haActiveTabIndex) {
header.tabContainer.setAttribute('selected', haActiveTabIndex);
}
};
const observers = () => {
const callback = mutations => {
const config = window.customHeaderConfig;
mutations.forEach(({
addedNodes,
target
}) => {
if (target.id == 'view' && addedNodes.length && header.tabs.length) {
// Navigating to new tab/view.
selectTab();
} else if (addedNodes.length && target.nodeName == 'PARTIAL-PANEL-RESOLVER') {
// When returning to lovelace/overview from elsewhere in HA.
if (haElem.main.shadowRoot.querySelector(' ha-panel-lovelace')) {
if (config.compact_mode && !config.footer_mode) {
haElem.sidebar.main.shadowRoot.querySelector('.menu').style = 'height:49px;';
haElem.sidebar.main.shadowRoot.querySelector('paper-listbox').style = 'height:calc(100% - 175px);';
haElem.sidebar.main.shadowRoot.querySelector('div.divider').style = '';
} else if (config.footer_mode) {
haElem.sidebar.main.shadowRoot.querySelector('.menu').style = '';
haElem.sidebar.main.shadowRoot.querySelector('paper-listbox').style = 'height: calc(100% - 170px);';
haElem.sidebar.main.shadowRoot.querySelector('div.divider').style = 'margin-bottom: -10px;';
}
} else {
haElem.sidebar.main.shadowRoot.querySelector('.menu').style = '';
haElem.sidebar.main.shadowRoot.querySelector('paper-listbox').style = '';
haElem.sidebar.main.shadowRoot.querySelector('div.divider').style = '';
}

if (root.querySelector('editor')) root.querySelector('editor').remove();
buildConfig();
} else if (target.className === 'edit-mode' && addedNodes.length) {
// Entered edit mode.
if (root.querySelector('editor')) root.querySelector('editor').remove();
if (!window.customHeaderDisabled) hideMenuItems(config, header, true);
header.menu.style.display = 'none';
root.querySelector('ch-header').style.display = 'none';
haElem.appHeader.style.display = 'block';
if (root.querySelector('#ch_view_style')) root.querySelector('#ch_view_style').remove();
} else if (target.nodeName === 'APP-HEADER' && addedNodes.length) {
// Exited edit mode.
haElem.menu = haElem.appHeader.querySelector('ha-menu-button');
haElem.appHeader.style.display = 'none';
header.menu.style.display = '';
root.querySelector('ch-header').style.display = '';
buildConfig();
}
});
};

const observer = new MutationObserver(callback);
observer.observe(haElem.partialPanelResolver, {
childList: true
});
observer.observe(haElem.appHeader, {
childList: true
});
observer.observe(root.querySelector('#view'), {
childList: true
});
};

const insertStyleTags = config => {
let headerHeight = 48;

Expand Down Expand Up @@ -4385,7 +4454,7 @@ const insertStyleTags = config => {
min-height: calc(100vh - 112px);
margin-top: -96px;
${config.footer_mode ? `padding-bottom: ${headerHeight}px;` : ''}
${config.footer_mode ? `margin-bottom: -${headerHeight + 4}px;` : 'margin-bottom: -16px;'}
${config.footer_mode ? `margin-bottom: -${headerHeight}px;` : ''}
}
hui-panel-view {
margin-top: 0;
Expand All @@ -4397,8 +4466,9 @@ const insertStyleTags = config => {
${config.view_css ? config.view_css : ''}
}
#view {
${config.footer_mode ? `min-height: calc(100vh - ${headerHeight + 4}px) !important;` : ''}
${config.compact_mode && !config.footer_mode ? `min-height: calc(100vh - ${headerHeight + 16}px) !important;` : ''}
min-height: calc(100vh - 96px) !important;
${config.footer_mode ? `min-height: calc(100vh - ${headerHeight}px) !important;` : ''}
${config.compact_mode && !config.footer_mode ? `min-height: calc(100vh - ${headerHeight}px) !important;` : ''}
}
`; // Add updated view style if changed.
// Prevents background images flashing on every change.
Expand Down Expand Up @@ -4446,7 +4516,7 @@ const redirects = (config, header) => {
break;
}
}
} else if (config.hide_tabs.includes(0)) {
} else if (config.default_tab) {
overview.setAttribute('href', `/lovelace/${tabIndexByName(config.default_tab)}`);
} // Redirect off hidden tab to first not hidden tab or default tab.

Expand Down Expand Up @@ -4668,6 +4738,7 @@ const styleHeader = config => {
});
}

selectTab();
A(header.container, 'iron-resize');
};

Expand Down Expand Up @@ -4753,71 +4824,5 @@ const buildConfig = config => {
}
};

const observers = () => {
const callback = mutations => {
const config = window.customHeaderConfig;
mutations.forEach(({
addedNodes,
target
}) => {
if (target.id == 'view' && addedNodes.length && header.tabs.length) {
// Navigating to new tab/view.
const haActiveTabIndex = haElem.tabContainer.indexOf(root.querySelector('paper-tab.iron-selected'));
const chActiveTabIndex = header.tabContainer.querySelector('paper-tab.iron-selected');

if (chActiveTabIndex !== haActiveTabIndex) {
header.tabContainer.setAttribute('selected', haActiveTabIndex);
}
} else if (addedNodes.length && target.nodeName == 'PARTIAL-PANEL-RESOLVER') {
// When returning to lovelace/overview from elsewhere in HA.
if (haElem.main.shadowRoot.querySelector(' ha-panel-lovelace')) {
if (config.compact_mode && !config.footer_mode) {
haElem.sidebar.main.shadowRoot.querySelector('.menu').style = 'height:49px;';
haElem.sidebar.main.shadowRoot.querySelector('paper-listbox').style = 'height:calc(100% - 175px);';
haElem.sidebar.main.shadowRoot.querySelector('div.divider').style = '';
} else if (config.footer_mode) {
haElem.sidebar.main.shadowRoot.querySelector('.menu').style = '';
haElem.sidebar.main.shadowRoot.querySelector('paper-listbox').style = 'height: calc(100% - 170px);';
haElem.sidebar.main.shadowRoot.querySelector('div.divider').style = 'margin-bottom: -10px;';
}
} else {
haElem.sidebar.main.shadowRoot.querySelector('.menu').style = '';
haElem.sidebar.main.shadowRoot.querySelector('paper-listbox').style = '';
haElem.sidebar.main.shadowRoot.querySelector('div.divider').style = '';
}

if (root.querySelector('editor')) root.querySelector('editor').remove();
buildConfig();
} else if (target.className === 'edit-mode' && addedNodes.length) {
// Entered edit mode.
if (root.querySelector('editor')) root.querySelector('editor').remove();
if (!window.customHeaderDisabled) hideMenuItems(config, header, true);
header.menu.style.display = 'none';
root.querySelector('ch-header').style.display = 'none';
haElem.appHeader.style.display = 'block';
if (root.querySelector('#ch_view_style')) root.querySelector('#ch_view_style').remove();
} else if (target.nodeName === 'APP-HEADER' && addedNodes.length) {
// Exited edit mode.
haElem.menu = haElem.appHeader.querySelector('ha-menu-button');
haElem.appHeader.style.display = 'none';
header.menu.style.display = '';
root.querySelector('ch-header').style.display = '';
buildConfig();
}
});
};

const observer = new MutationObserver(callback);
observer.observe(haElem.partialPanelResolver, {
childList: true
});
observer.observe(haElem.appHeader, {
childList: true
});
observer.observe(root.querySelector('#view'), {
childList: true
});
};

buildConfig();
observers();
14 changes: 9 additions & 5 deletions src/observers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,21 @@ import { hideMenuItems } from './overflow-menu';
import { buildConfig } from './config.js';
import { haElem, root } from './ha-elements';

export const selectTab = () => {
const haActiveTabIndex = haElem.tabContainer.indexOf(root.querySelector('paper-tab.iron-selected'));
const chActiveTabIndex = header.tabContainer.querySelector('paper-tab.iron-selected');
if (chActiveTabIndex !== haActiveTabIndex) {
header.tabContainer.setAttribute('selected', haActiveTabIndex);
}
};

export const observers = () => {
const callback = mutations => {
const config = window.customHeaderConfig;
mutations.forEach(({ addedNodes, target }) => {
if (target.id == 'view' && addedNodes.length && header.tabs.length) {
// Navigating to new tab/view.
const haActiveTabIndex = haElem.tabContainer.indexOf(root.querySelector('paper-tab.iron-selected'));
const chActiveTabIndex = header.tabContainer.querySelector('paper-tab.iron-selected');
if (chActiveTabIndex !== haActiveTabIndex) {
header.tabContainer.setAttribute('selected', haActiveTabIndex);
}
selectTab();
} else if (addedNodes.length && target.nodeName == 'PARTIAL-PANEL-RESOLVER') {
// When returning to lovelace/overview from elsewhere in HA.
if (haElem.main.shadowRoot.querySelector(' ha-panel-lovelace')) {
Expand Down
2 changes: 1 addition & 1 deletion src/redirects.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const redirects = (config, header) => {
break;
}
}
} else if (config.hide_tabs.includes(0)) {
} else if (config.default_tab) {
overview.setAttribute('href', `/lovelace/${tabIndexByName(config.default_tab)}`);
}

Expand Down
3 changes: 3 additions & 0 deletions src/style-header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { tabIndexByName } from './helpers';
import { hideMenuItems, buttonToOverflow, insertSettings } from './overflow-menu';
import { kioskMode, removeKioskMode } from './kiosk-mode';
import { menuButtonObservers } from './menu-observers';
import { selectTab } from './observers';
import { insertStyleTags } from './style-tags';
import { haElem, root, lovelace } from './ha-elements';
import { redirects } from './redirects';
Expand Down Expand Up @@ -205,5 +206,7 @@ export const styleHeader = config => {
});
}

selectTab();

fireEvent(header.container, 'iron-resize');
};
11 changes: 4 additions & 7 deletions src/style-tags.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export const insertStyleTags = config => {
min-height: calc(100vh - 112px);
margin-top: -96px;
${config.footer_mode ? `padding-bottom: ${headerHeight}px;` : ''}
${config.footer_mode ? `margin-bottom: -${headerHeight + 4}px;` : 'margin-bottom: -16px;'}
${config.footer_mode ? `margin-bottom: -${headerHeight}px;` : ''}
}
hui-panel-view {
margin-top: 0;
Expand All @@ -155,12 +155,9 @@ export const insertStyleTags = config => {
${config.view_css ? config.view_css : ''}
}
#view {
${config.footer_mode ? `min-height: calc(100vh - ${headerHeight + 4}px) !important;` : ''}
${
config.compact_mode && !config.footer_mode
? `min-height: calc(100vh - ${headerHeight + 16}px) !important;`
: ''
}
min-height: calc(100vh - 96px) !important;
${config.footer_mode ? `min-height: calc(100vh - ${headerHeight}px) !important;` : ''}
${config.compact_mode && !config.footer_mode ? `min-height: calc(100vh - ${headerHeight}px) !important;` : ''}
}
`;

Expand Down
4 changes: 2 additions & 2 deletions src/template-variables.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ export const defaultVariables = locale => {
dayNumLZ: String(d.getDate()).padStart(2, 0),
dayNameShort: d.toLocaleDateString(locale, { weekday: 'short' }),
dayNameLong: d.toLocaleDateString(locale, { weekday: 'long' }),
hours12: d.getHours() > 12 ? d.getHours() - 12 : d.getHours(),
hours12LZ: String(d.getHours() > 12 ? d.getHours() - 12 : d.getHours()).padStart(2, 0),
hours12: String((d.getHours() + 24) % 12 || 12),
hours12LZ: String((d.getHours() + 24) % 12 || 12).padStart(2, 0),
hours24: d.getHours(),
hours24LZ: String(d.getHours()).padStart(2, 0),
minutes: d.getMinutes(),
Expand Down

0 comments on commit 7bbda42

Please sign in to comment.