From 4fb6c82bfc3b823d021da41b628fb7c42256cf4e Mon Sep 17 00:00:00 2001 From: brook hong Date: Sun, 7 Jan 2024 10:18:28 +0800 Subject: [PATCH] 1.16.0 Add settings verticalTabs --- README.md | 1 + README_CN.md | 1 + package.json | 2 +- src/content_scripts/common/runtime.js | 1 + src/content_scripts/ui/frontend.css | 30 ++++++++++++++++++++++----- src/content_scripts/ui/frontend.js | 12 +++++++++-- 6 files changed, 39 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 200fe25ee..1b0572169 100644 --- a/README.md +++ b/README.md @@ -544,6 +544,7 @@ Some functionalities are also available when you're using original pdf viewer, b | settings.omnibarSuggestionTimeout | 200 | Timeout duration before Omnibar suggestion URLs are queried, in milliseconds. Helps prevent unnecessary HTTP requests and API rate-limiting. | | settings.focusFirstCandidate | false | Whether to focus first candidate of matched result in Omnibar. | | settings.tabsThreshold | 100 | When total of opened tabs exceeds the number, Omnibar will be used for choosing tabs. | +| settings.verticalTabs | true | Whether to show tab pickers vertically aligned. | | settings.clickableSelector | "" | Extra CSS selector to pick elements for hints mode, such as "\*.jfk-button, \*.goog-flat-menu-button". | | settings.clickablePat | /(https?|thunder|magnet):\/\/\S+/ig | A regex to detect clickable links from text, you could use `O` to open them. | | settings.editableSelector | div.CodeMirror-scroll,div.ace_content | CSS selector for additional editable elements. | diff --git a/README_CN.md b/README_CN.md index bbf5a6594..59dc1af94 100644 --- a/README_CN.md +++ b/README_CN.md @@ -532,6 +532,7 @@ Surfingkeys默认使用[这个markdown分析器](https://github.com/chjj/marked) | settings.omnibarSuggestionTimeout | 200 | 设置触发搜索引擎提示的超时，当按键过去设定毫秒后才发起搜索引擎提示的请求，这样避免每次按键就触发请求。| | settings.focusFirstCandidate | false | 是否在搜索栏下面自动选择第一个匹配的结果。 | | settings.tabsThreshold | 100 | 当打开标签页的数量超过设定值时，使用搜索栏来查找标签页。 | +| settings.verticalTabs | true | 是否纵向排列标签选择栏。 | | settings.clickableSelector | "" | 自定义CSS selector用于f键选择无法检测到的可点击元素，例如"\*.jfk-button, \*.goog-flat-menu-button"。 | | settings.clickablePat | /(https?|thunder|magnet):\/\/\S+/ig | 用于检测文字中可点击链接的正则表达式，你可以按`O`打开检测到的链接。| | settings.editableSelector | div.CodeMirror-scroll,div.ace_content | 额外CSS selector以自定义可编辑元素。| diff --git a/package.json b/package.json index cca22a4a3..def8b2271 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Surfingkeys", - "version": "1.15.0", + "version": "1.16.0", "description": "Map your keys for web surfing, expand your browser with javascript and keyboard.", "main": "background.js", "directories": { diff --git a/src/content_scripts/common/runtime.js b/src/content_scripts/common/runtime.js index 81eb4aea9..0adf35554 100644 --- a/src/content_scripts/common/runtime.js +++ b/src/content_scripts/common/runtime.js @@ -83,6 +83,7 @@ var runtime = (function() { startToShowEmoji: 2, stealFocusOnLoad: true, tabsThreshold: 100, + verticalTabs: true, textAnchorPat: /(^[\n\r\s]*\S{3,}|\b\S{4,})/g, ignoredFrameHosts: ["https://tpc.googlesyndication.com"], scrollFriction: 0, diff --git a/src/content_scripts/ui/frontend.css b/src/content_scripts/ui/frontend.css index ae85a4b5a..59ae68bee 100644 --- a/src/content_scripts/ui/frontend.css +++ b/src/content_scripts/ui/frontend.css @@ -284,24 +284,45 @@ kbd { position: fixed; top: 0; left: 0; - width: 100%; background: #000; overflow: auto; z-index: 2147483000; } -div.sk_tab { +#sk_tabs.horizontal { + width: 100%; +} +#sk_tabs.horizontal div.sk_tab { display: inline-grid; +} +#sk_tabs.horizontal div.sk_tab_hint { + float:right; +} +#sk_tabs.vertical div.sk_tab_title { + min-width: 100pt; + max-width: 60vw; +} +#sk_tabs.vertical div.sk_tab_hint { + position: fixed; + left: 80pt; +} +#sk_tabs.vertical div.tab_rocket { + margin: 6px; + display: inline-block; + padding: 0px 2px 0px 2px; + opacity: 0; +} +div.sk_tab { vertical-align: bottom; justify-items: center; border-radius: 3px; margin: 1px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DAE6F5), color-stop(100%,#B0CCEF)); box-shadow: 0px 3px 7px 0px rgba(245, 245, 0, 0.3); + padding-top: 2px; + border-top: solid 1px black; } div.sk_tab_wrap { display: inline-block; - padding-top: 2px; - border-top: solid 1px black; } div.sk_tab_icon { display: inline-block; @@ -330,7 +351,6 @@ div.sk_tab_url { } div.sk_tab_hint { display: inline-block; - float:right; font-size: 10pt; font-weight: bold; padding: 0px 2px 0px 2px; diff --git a/src/content_scripts/ui/frontend.js b/src/content_scripts/ui/frontend.js index 1e1bf09b6..3817201f8 100644 --- a/src/content_scripts/ui/frontend.js +++ b/src/content_scripts/ui/frontend.js @@ -255,10 +255,14 @@ const Front = (function() { var hintLabels = hints.genLabels(tabs.length - 1); var j = 0; const unitWidth = window.innerWidth / tabs.length - 2; + const verticalTabs = runtime.conf.verticalTabs; + _tabs.className = verticalTabs ? "vertical" : "horizontal"; tabs.forEach(function(t, i) { var tab = document.createElement('div'); tab.setAttribute('class', 'sk_tab'); - tab.style.width = unitWidth + 'px'; + if (!verticalTabs) { + tab.style.width = unitWidth + 'px'; + } if (t.active === false) { setSanitizedContent(tab, `
${hintLabels[j]}
${htmlEncode(t.title)}
`); const tabHint = tab.querySelector("div.sk_tab_hint"); @@ -270,7 +274,11 @@ const Front = (function() { tab.style.boxShadow = "0px 3px 7px 0px rgba(245, 245, 0, 0.9)"; } attachFaviconToImgSrc(t, tab.querySelector("img")); - tab.querySelector("div.sk_tab_title").style.width = (unitWidth - 24) + 'px'; + if (verticalTabs) { + tab.append(createElementWithContent('div', '🚀', {class: "tab_rocket"})); + } else { + tab.querySelector("div.sk_tab_title").style.width = (unitWidth - 24) + 'px'; + } _tabs.append(tab); }); };