From 7b06dab4eeebd8c746a929223888ac79f089f7fc Mon Sep 17 00:00:00 2001 From: open-trade Date: Fri, 28 Jan 2022 16:58:32 +0800 Subject: [PATCH 1/4] improve responsive tab size --- src/ui/ab.tis | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/ui/ab.tis b/src/ui/ab.tis index 3d39bac33..bc7201a15 100644 --- a/src/ui/ab.tis +++ b/src/ui/ab.tis @@ -26,7 +26,7 @@ class SearchBar: Reactor.Component { var value = searchPatterns[this.type] || ""; var me = this; self.timer(1ms, function() { me.search_id.value = value; }); - return
+ return
{search_icon} {value && {clear_icon}} @@ -297,10 +297,22 @@ class MultipleSessions: Reactor.Component { } function onSize() { - var w = this.$(.sessions-bar).box(#width) - 220; - this.$(#sessions-type span).style.set{ - "max-width": (w / (handler.is_installed() ? 2 : 3)) + "px", - }; + var w = this.$(.sessions-bar .sessions-tab).box(#width); + var len = translate('Recent Sessions').length; + var totalChars = 0; + for (var el in this.$$(#sessions-type span)) { + totalChars += el.text.length; + } + for (var el in this.$$(#sessions-type span)) { + var n = el.text.length; + var padding = n > 8 ? 8 : 12; + var maxWidth = w * n / totalChars - 2 * padding; + if (maxWidth < 0) maxWidth = 36; + el.style.set{ + "max-width": maxWidth + "px", + "padding": '6px ' + padding + 'px', + }; + } } } From 9118511bbd97d01153e92cfbbbb0027309e68539 Mon Sep 17 00:00:00 2001 From: open-trade Date: Fri, 28 Jan 2022 17:13:56 +0800 Subject: [PATCH 2/4] min 3 chars --- src/ui/ab.tis | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/ui/ab.tis b/src/ui/ab.tis index bc7201a15..60662e7de 100644 --- a/src/ui/ab.tis +++ b/src/ui/ab.tis @@ -301,10 +301,13 @@ class MultipleSessions: Reactor.Component { var len = translate('Recent Sessions').length; var totalChars = 0; for (var el in this.$$(#sessions-type span)) { - totalChars += el.text.length; + var n = el.text.length; + if (n < 3) n = 3; + totalChars += n; } for (var el in this.$$(#sessions-type span)) { var n = el.text.length; + if (n < 3) n = 3; var padding = n > 8 ? 8 : 12; var maxWidth = w * n / totalChars - 2 * padding; if (maxWidth < 0) maxWidth = 36; From 4108635b3420c063380db5549c6e6802d806d99b Mon Sep 17 00:00:00 2001 From: open-trade Date: Fri, 28 Jan 2022 17:48:49 +0800 Subject: [PATCH 3/4] refactor tab responsive size again --- src/ui/ab.tis | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/ui/ab.tis b/src/ui/ab.tis index 60662e7de..bce1fe0c4 100644 --- a/src/ui/ab.tis +++ b/src/ui/ab.tis @@ -25,7 +25,7 @@ class SearchBar: Reactor.Component { function render() { var value = searchPatterns[this.type] || ""; var me = this; - self.timer(1ms, function() { me.search_id.value = value; }); + self.timer(1ms, function() { (me.search_id || {}).value = value; }); return
{search_icon} @@ -285,6 +285,7 @@ class MultipleSessions: Reactor.Component { self.timer(60ms, function() { me.hidden = false; me.update(); + self.timer(30ms, function() { me.onSize(); }); }); } @@ -300,16 +301,17 @@ class MultipleSessions: Reactor.Component { var w = this.$(.sessions-bar .sessions-tab).box(#width); var len = translate('Recent Sessions').length; var totalChars = 0; + var nEle = 0; + var padding = 12; for (var el in this.$$(#sessions-type span)) { + nEle += 1; var n = el.text.length; - if (n < 3) n = 3; + if (n > 6) padding = 8; totalChars += n; } for (var el in this.$$(#sessions-type span)) { var n = el.text.length; - if (n < 3) n = 3; - var padding = n > 8 ? 8 : 12; - var maxWidth = w * n / totalChars - 2 * padding; + var maxWidth = (w - nEle * 2 * padding) * n / totalChars; if (maxWidth < 0) maxWidth = 36; el.style.set{ "max-width": maxWidth + "px", From 2719936ea9cb014f52663e81f11ccad180c19ae5 Mon Sep 17 00:00:00 2001 From: open-trade Date: Fri, 28 Jan 2022 17:55:09 +0800 Subject: [PATCH 4/4] change tab padding to 8 --- src/ui/ab.tis | 5 +---- src/ui/index.css | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/ui/ab.tis b/src/ui/ab.tis index bce1fe0c4..7363b1570 100644 --- a/src/ui/ab.tis +++ b/src/ui/ab.tis @@ -302,20 +302,17 @@ class MultipleSessions: Reactor.Component { var len = translate('Recent Sessions').length; var totalChars = 0; var nEle = 0; - var padding = 12; for (var el in this.$$(#sessions-type span)) { nEle += 1; var n = el.text.length; - if (n > 6) padding = 8; totalChars += n; } for (var el in this.$$(#sessions-type span)) { var n = el.text.length; - var maxWidth = (w - nEle * 2 * padding) * n / totalChars; + var maxWidth = (w - nEle * 2 * 8) * n / totalChars; if (maxWidth < 0) maxWidth = 36; el.style.set{ "max-width": maxWidth + "px", - "padding": '6px ' + padding + 'px', }; } } diff --git a/src/ui/index.css b/src/ui/index.css index 31079e963..57089c8c6 100644 --- a/src/ui/index.css +++ b/src/ui/index.css @@ -50,7 +50,7 @@ div.sessions-bar { div.sessions-tab span { display: inline-block; - padding: 6px 12px; + padding: 6px 8px; cursor: pointer; @ELLIPSIS; }