diff --git a/CHANGELOG.md b/CHANGELOG.md index 2586329..974c392 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Change log +## 0.4.0 (release date: 25.01.2019) + +* Major visual redesign of popup. + ## 0.3.0 (release date: 27.08.2018) * Added device info(type, versions, model, resolution, locale, etc.) to default popup data diff --git a/lib/about.css b/lib/about.css index ca8fd4a..7c44f9b 100644 --- a/lib/about.css +++ b/lib/about.css @@ -1,15 +1,214 @@ -/* About popup -*******************************/ - -.p-zb-about {} - .p-zb-about__container { - width: 360px; - min-height: 140px; - background: #fff url(about.png) 10px 50% no-repeat; +.p-zb-about { + background-color: rgba(0, 0, 0, 0.8); + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + & .p-zb-about__container { + width: 162rem; + height: 270rem; + background-color: #fff; + font-family: Consolas, monospace; + font-size: 7rem; + line-height: 11rem; color: #000; - box-sizing: border-box; overflow: hidden; - padding: 10px; - padding-left: 120px; - border: 4px solid #A9A9A9; + position: absolute; + top: 50%; + left: 50%; + padding-right: 21rem; + padding-left: 24rem; + margin-top: -135rem; + margin-left: -104rem; + border-radius: 2rem; + + &::before, + &::after { + height: 24rem; + background-repeat: no-repeat; + background-position: 0 0; + background-size: 100% 100%; + content: ''; + position: absolute; + right: 0; + left: 0; + z-index: 1; + } + &::before { + background-image: url(img/shadow-top.png); + top: 0; + } + + &::after { + background-image: url(img/shadow-bottom.png); + bottom: 0; + } + + &._no-scrolling { + &::before, + &::after { + display: none; + } + } + } + + & .p-zb-about__slider { + text-align: left; + position: absolute; + top: 0; + right: 21rem; + left: 24rem; + padding-top: 18rem; + padding-bottom: 24rem; + } + + & .p-zb-about__content { + line-height: 11rem; + white-space: pre-wrap; + word-break: break-word; + margin-top: 6rem; + } + + & .p-zb-about__content-label { + font-weight: bold; + line-height: 15rem; + display: inline-block; + } + + & .p-zb-about__content-value { + display: inline-block; + } + + & .p-zb-about__logo { + height: 75rem; + background-image: url(img/logo-evil.png); + background-repeat: no-repeat; + background-position: 0 0; + } + + & .p-zb-about__title { + font-size: 12rem; + line-height: 14rem; + margin-top: 13rem; + + & span { + font-weight: bold; + } + } + + & .p-zb-about__copyright { + margin-top: 2rem; + } + + & .p-zb-about__btn { + width: 12rem; + height: 12rem; + background-color: #dcdcdc; + background-repeat: no-repeat; + background-position: 50% 50%; + box-sizing: border-box; + position: absolute; + z-index: 2; + border: 1px solid transparent; + border-radius: 100%; + + &._exit { + background-image: url(img/icon-close.png); + top: 6rem; + left: 6rem; + } + + &._up { + background-image: url(img/icon-up.png); + background-position: 50% 48%; + right: 6rem; + bottom: 20rem; + } + + &._down { + background-image: url(img/icon-down.png); + background-position: 50% 54%; + right: 6rem; + bottom: 6rem; + } + + &._active { + background-color: #000; + + &._exit { + background-image: url(img/icon-close-focused.png); + } + &._up { + background-image: url(img/icon-up-focused.png); + } + &._down { + background-image: url(img/icon-down-focused.png); + } + } + + &._disabled { + background-color: transparent; + border-color: #dcdcdc; + + &._up { + background-image: url(img/icon-up-disabled.png); + } + &._down { + background-image: url(img/icon-down-disabled.png); + } + } + } +} + +.zb-hd { + & .p-zb-about__container { + &::before { + background-image: url(img/hd/shadow-top.png); + } + + &::after { + background-image: url(img/hd/shadow-bottom.png); + } + } + + & .p-zb-about__logo { + background-image: url(img/hd/logo-evil.png); + } + + & .p-zb-about__btn { + &._exit { + background-image: url(img/hd/icon-close.png); + } + + &._up { + background-image: url(img/hd/icon-up.png); + } + + &._down { + background-image: url(img/hd/icon-down.png); + } + + &._active { + &._exit { + background-image: url(img/hd/icon-close-focused.png); + } + &._up { + background-image: url(img/hd/icon-up-focused.png); + } + &._down { + background-image: url(img/hd/icon-down-focused.png); + } + } + + &._disabled { + &._up { + background-image: url(img/hd/icon-up-disabled.png); + } + &._down { + background-image: url(img/hd/icon-down-disabled.png); + } + } } +} diff --git a/lib/about.js b/lib/about.js index 1ceac27..2f34c8c 100644 --- a/lib/about.js +++ b/lib/about.js @@ -17,19 +17,54 @@ zb.popups.About = class extends zb.layers.CutePopup { constructor() { super(); - this._addContainerClass('p-zb-about'); - /** * @type {zb.ext.about.popups.templates.AboutOut} * @protected */ this._exported; + /** + * @type {number} x2 relative to line-height + * @protected + */ + this._step = 0; + + /** + * @type {number} + * @protected + */ + this._containerSize = 0; + /** * @type {number} - * @private + * @protected */ - this._keyProcessCounter = 0; + this._sliderSize = 0; + + /** + * @type {number} + * @protected + */ + this._diff = 0; + + /** + * @type {number} + * @protected + */ + this._position = 0; + + this._exported.arrowUp.onClick(this._moveUp.bind(this)); + this._exported.arrowDown.onClick(this._moveDown.bind(this)); + this._exported.btnExit.onClick(() => this.close(undefined)); + } + + /** + * @override + */ + afterDOMShow() { + super.afterDOMShow(); + + this._updateView(); } /** @@ -40,7 +75,8 @@ zb.popups.About = class extends zb.layers.CutePopup { const data = this._getData(); for (const [key, value] of Object.entries(data)) { - this._exported.content.appendChild(zb.html.textNode(key + ': ' + value)); + this._exported.content.appendChild(zb.html.node('div', 'p-zb-about__content-label', key + ': ')); + this._exported.content.appendChild(zb.html.node('div', 'p-zb-about__content-value', value)); this._exported.content.appendChild(zb.html.node('br')); } } @@ -55,15 +91,155 @@ zb.popups.About = class extends zb.layers.CutePopup { /** * @override */ - _processKey() { - if (this._keyProcessCounter > 0) { - this.close(0); + _processKey(zbKey, e) { + const exp = this._exported; + const keys = zb.device.input.Keys; + + if (zbKey === keys.ENTER) { + switch (this._activeWidget) { + case exp.arrowUp: + return this._moveUp(); + + case exp.arrowDown: + return this._moveDown(); + + case exp.btnExit: + this.close(undefined); + + return true; + } + } + + if (zbKey === keys.BACK) { + this.close(undefined); + + return true; + } + + return super._processKey(zbKey, e); + } + + /** + * @return {boolean} + * @protected + */ + _moveUp() { + if (this._getPosition() === 0) { + return false; } - this._keyProcessCounter++; + + this._setPosition(this._position - this._step); + this._toogleArrows(); + + return true; + } + + /** + * @return {boolean} + * @protected + */ + _moveDown() { + if (this._getPosition() === 100) { + return false; + } + + this._setPosition(this._position + this._step); + this._toogleArrows(); return true; } + /** + * @return {boolean} + * @protected + */ + _isScrollable() { + return this._diff > this._step / zb.popups.About.MULTIPLICITY_STEP; + } + + /** + * @return {number} in percents + * @protected + */ + _getPosition() { + return this._diff ? this._position * 100 / this._diff : 0; + } + + /** + * @protected + */ + _calculateSize() { + const exp = this._exported; + const lineHeight = window.getComputedStyle(exp.content)['line-height']; + + this._step = parseInt(lineHeight, 10) * zb.popups.About.MULTIPLICITY_STEP; + this._containerSize = exp.popupContainer.offsetHeight; + this._sliderSize = exp.slider.offsetHeight; + this._diff = Math.max(this._sliderSize - this._containerSize, 0); + } + + /** + * @protected + */ + _updateView() { + this._calculateSize(); + + this._toogleArrows(); + this._renderShadows(); + + this._setPosition(this._position); + } + + /** + * @param {number} position + * @protected + */ + _setPosition(position) { + let normalizedPosition = position; + + normalizedPosition = Math.min(normalizedPosition, this._diff); + normalizedPosition = Math.max(normalizedPosition, 0); + + this._exported.slider.style.top = `${-normalizedPosition}px`; + this._position = normalizedPosition; + } + + /** + * @protected + */ + _renderShadows() { + zb.html.updateClassName(this._exported.popupContainer, '_no-scrolling', !this._isScrollable()); + } + + /** + * @protected + */ + _toogleArrows() { + const exp = this._exported; + + if (this._getPosition() === 0) { + exp.arrowUp.disable(); + exp.arrowDown.enable(); + this.activateWidget(exp.arrowDown); + } + + if (this._getPosition() === 100) { + exp.arrowUp.enable(); + exp.arrowDown.disable(); + this.activateWidget(exp.arrowUp); + } + + if (this._getPosition() !== 0 && this._getPosition() !== 100) { + exp.arrowUp.enable(); + exp.arrowDown.enable(); + } + + if (!this._isScrollable()) { + exp.arrowUp.disable(); + exp.arrowDown.disable(); + } + } + /** * @return {!Object} * @protected @@ -86,13 +262,12 @@ zb.popups.About = class extends zb.layers.CutePopup { addInfo('Application name', zb.packageInfo['name']); addInfo('Application version', zb.packageInfo['version']); - addInfo('Zombiebox version', zb.packageInfo['dependencies']['zombiebox']); - addInfo('Zombiebox in web', 'http://zombiebox.tv/'); + addInfo('ZombieBox version', zb.packageInfo['dependencies']['zombiebox']); - addInfo('Type', () => app.device.info.type()); + addInfo('Device type', () => app.device.info.type()); addInfo('Version', () => app.device.info.version()); - addInfo('Model', () => app.device.info.model()); - addInfo('SW', () => app.device.info.softwareVersion()); + addInfo('Device model', () => app.device.info.model()); + addInfo('Software version', () => app.device.info.softwareVersion()); addInfo('Resolution', () => zb.device.ResolutionInfo[app.device.info.osdResolutionType()].name); addInfo('Locale', () => '' + app.device.info.locale()); @@ -135,6 +310,12 @@ zb.popups.About = class extends zb.layers.CutePopup { }; +/** + * @const {number} + */ +zb.popups.About.MULTIPLICITY_STEP = 2; + + /** * @type {number} * @private diff --git a/lib/about.jst b/lib/about.jst index 7eea7f2..dcdc640 100644 --- a/lib/about.jst +++ b/lib/about.jst @@ -1,7 +1,17 @@ {{$ zb.ext.about.popups.templates.about }} -
-
-
+
+
+
+
+ +
ZombieBox Application
+
zombiebox.tv © Interfaced
+
+
+
+
+
+
diff --git a/lib/about.png b/lib/about.png deleted file mode 100644 index b361a1a..0000000 Binary files a/lib/about.png and /dev/null differ diff --git a/lib/img/hd/icon-close-focused.png b/lib/img/hd/icon-close-focused.png new file mode 100644 index 0000000..45a751f Binary files /dev/null and b/lib/img/hd/icon-close-focused.png differ diff --git a/lib/img/hd/icon-close.png b/lib/img/hd/icon-close.png new file mode 100644 index 0000000..a3c3f79 Binary files /dev/null and b/lib/img/hd/icon-close.png differ diff --git a/lib/img/hd/icon-down-disabled.png b/lib/img/hd/icon-down-disabled.png new file mode 100644 index 0000000..6d19b61 Binary files /dev/null and b/lib/img/hd/icon-down-disabled.png differ diff --git a/lib/img/hd/icon-down-focused.png b/lib/img/hd/icon-down-focused.png new file mode 100644 index 0000000..16c499c Binary files /dev/null and b/lib/img/hd/icon-down-focused.png differ diff --git a/lib/img/hd/icon-down.png b/lib/img/hd/icon-down.png new file mode 100644 index 0000000..7423fe4 Binary files /dev/null and b/lib/img/hd/icon-down.png differ diff --git a/lib/img/hd/icon-up-disabled.png b/lib/img/hd/icon-up-disabled.png new file mode 100644 index 0000000..01ca66e Binary files /dev/null and b/lib/img/hd/icon-up-disabled.png differ diff --git a/lib/img/hd/icon-up-focused.png b/lib/img/hd/icon-up-focused.png new file mode 100644 index 0000000..afd7ccc Binary files /dev/null and b/lib/img/hd/icon-up-focused.png differ diff --git a/lib/img/hd/icon-up.png b/lib/img/hd/icon-up.png new file mode 100644 index 0000000..ca78ca9 Binary files /dev/null and b/lib/img/hd/icon-up.png differ diff --git a/lib/img/hd/logo-evil.png b/lib/img/hd/logo-evil.png new file mode 100644 index 0000000..20e801f Binary files /dev/null and b/lib/img/hd/logo-evil.png differ diff --git a/lib/img/hd/shadow-bottom.png b/lib/img/hd/shadow-bottom.png new file mode 100644 index 0000000..8df6193 Binary files /dev/null and b/lib/img/hd/shadow-bottom.png differ diff --git a/lib/img/hd/shadow-top.png b/lib/img/hd/shadow-top.png new file mode 100644 index 0000000..ec44a9f Binary files /dev/null and b/lib/img/hd/shadow-top.png differ diff --git a/lib/img/icon-close-focused.png b/lib/img/icon-close-focused.png new file mode 100644 index 0000000..ea5742f Binary files /dev/null and b/lib/img/icon-close-focused.png differ diff --git a/lib/img/icon-close.png b/lib/img/icon-close.png new file mode 100644 index 0000000..61ceae1 Binary files /dev/null and b/lib/img/icon-close.png differ diff --git a/lib/img/icon-down-disabled.png b/lib/img/icon-down-disabled.png new file mode 100644 index 0000000..6756ca4 Binary files /dev/null and b/lib/img/icon-down-disabled.png differ diff --git a/lib/img/icon-down-focused.png b/lib/img/icon-down-focused.png new file mode 100644 index 0000000..07fa4b9 Binary files /dev/null and b/lib/img/icon-down-focused.png differ diff --git a/lib/img/icon-down.png b/lib/img/icon-down.png new file mode 100644 index 0000000..9d77b7d Binary files /dev/null and b/lib/img/icon-down.png differ diff --git a/lib/img/icon-up-disabled.png b/lib/img/icon-up-disabled.png new file mode 100644 index 0000000..4888b62 Binary files /dev/null and b/lib/img/icon-up-disabled.png differ diff --git a/lib/img/icon-up-focused.png b/lib/img/icon-up-focused.png new file mode 100644 index 0000000..25520a4 Binary files /dev/null and b/lib/img/icon-up-focused.png differ diff --git a/lib/img/icon-up.png b/lib/img/icon-up.png new file mode 100644 index 0000000..b4822b4 Binary files /dev/null and b/lib/img/icon-up.png differ diff --git a/lib/img/logo-evil.png b/lib/img/logo-evil.png new file mode 100644 index 0000000..169cc45 Binary files /dev/null and b/lib/img/logo-evil.png differ diff --git a/lib/img/shadow-bottom.png b/lib/img/shadow-bottom.png new file mode 100644 index 0000000..9cf759c Binary files /dev/null and b/lib/img/shadow-bottom.png differ diff --git a/lib/img/shadow-top.png b/lib/img/shadow-top.png new file mode 100644 index 0000000..73b3140 Binary files /dev/null and b/lib/img/shadow-top.png differ diff --git a/package-lock.json b/package-lock.json index 7d54796..d06a90b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "zombiebox-extension-about", - "version": "0.3.0", + "version": "0.4.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 3da77a1..23dd571 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "zombiebox-extension-about", "description": "ZombieBox extension for displaying main info about an application", - "version": "0.3.0", + "version": "0.4.0", "license": "MIT", "author": "Interfaced (http://interfaced.tv)", "files": [ @@ -25,5 +25,8 @@ "eslint-config-interfaced": "1.1.0", "eslint-plugin-goog": "1.0.0", "eslint-plugin-interfaced": "1.1.2" + }, + "peerDependencies": { + "zombiebox": "1.0.0-beta6" } }