From c17209774c2b3dec877c2d658cc8dcb5df9b0084 Mon Sep 17 00:00:00 2001 From: Taveesh Anand Date: Sat, 1 Aug 2020 20:17:02 +0530 Subject: [PATCH] Ta css refactor (#51) * Containers * Backdrop DONE * spantree classname added * spin * Vg arrow fix (#53) * right fixed * jerky but working * remove transition * version Increased Co-authored-by: vedanshgarg --- .../scripts/components/Backdrop/Backdrop.jsx | 5 ++- .../scripts/components/Backdrop/styles.css | 2 +- .../src/scripts/components/Loader/Loader.jsx | 2 +- .../src/scripts/components/Loader/styles.css | 10 ++--- content/src/scripts/components/Pane/Pane.jsx | 30 +++++++++------ .../src/scripts/components/Pane/styles.css | 16 ++++---- .../scripts/components/TreeItem/TreeItem.jsx | 24 ++++++------ .../scripts/components/TreeItem/styles.css | 38 +++++++++---------- .../scripts/containers/Resizer/Resizer.jsx | 2 +- .../src/scripts/containers/Resizer/styles.css | 4 +- .../containers/SearchBar/SearchBar.jsx | 2 +- .../containers/SearchBar/SearchBarResult.jsx | 8 ++-- .../scripts/containers/SearchBar/styles.css | 6 +-- .../scripts/containers/TreeList/TreeList.jsx | 12 ++++-- .../scripts/containers/TreeList/styles.css | 14 +++---- content/src/scripts/libs/file-icons.css | 14 +++++++ content/src/scripts/libs/gitlab-dark.css | 14 +++---- content/src/scripts/utils/searchBarWorker.js | 19 ++++++---- manifest.json | 2 +- 19 files changed, 128 insertions(+), 96 deletions(-) diff --git a/content/src/scripts/components/Backdrop/Backdrop.jsx b/content/src/scripts/components/Backdrop/Backdrop.jsx index 8c423ce..4d94622 100644 --- a/content/src/scripts/components/Backdrop/Backdrop.jsx +++ b/content/src/scripts/components/Backdrop/Backdrop.jsx @@ -4,7 +4,10 @@ import "./styles.css"; function Backdrop({ showSearchbar, setShowSearchbar }) { return showSearchbar ? ( -
setShowSearchbar(false)}>
+
setShowSearchbar(false)} + >
) : null; } diff --git a/content/src/scripts/components/Backdrop/styles.css b/content/src/scripts/components/Backdrop/styles.css index bcbfe42..3db2eb7 100644 --- a/content/src/scripts/components/Backdrop/styles.css +++ b/content/src/scripts/components/Backdrop/styles.css @@ -1,4 +1,4 @@ -.backdrop { +.spantree-backdrop { width: 100%; height: 100%; position: fixed; diff --git a/content/src/scripts/components/Loader/Loader.jsx b/content/src/scripts/components/Loader/Loader.jsx index fe45bf3..0685a38 100644 --- a/content/src/scripts/components/Loader/Loader.jsx +++ b/content/src/scripts/components/Loader/Loader.jsx @@ -12,7 +12,7 @@ function Loader({ size }) { width: size, height: size, }} - className="loader" + className="spantree-loader" > ); } diff --git a/content/src/scripts/components/Loader/styles.css b/content/src/scripts/components/Loader/styles.css index 6408d69..49c06d8 100644 --- a/content/src/scripts/components/Loader/styles.css +++ b/content/src/scripts/components/Loader/styles.css @@ -1,14 +1,14 @@ -.loader { +.spantree-loader { border-color: #f3f3f3; border-radius: 50%; border-style: solid; border-top-color: rgb(237, 153, 44); - -webkit-animation: spin 2s linear infinite; /* Safari */ - animation: spin 2s linear infinite; + -webkit-animation: spantree-loader-spin 2s linear infinite; /* Safari */ + animation: spantree-loader-spin 2s linear infinite; } /* Safari */ -@-webkit-keyframes spin { +@-webkit-keyframes spantree-loader-spin { 0% { -webkit-transform: rotate(0deg); } @@ -17,7 +17,7 @@ } } -@keyframes spin { +@keyframes spantree-loader-spin { 0% { transform: rotate(0deg); } diff --git a/content/src/scripts/components/Pane/Pane.jsx b/content/src/scripts/components/Pane/Pane.jsx index e8f8cb5..6c40b1c 100644 --- a/content/src/scripts/components/Pane/Pane.jsx +++ b/content/src/scripts/components/Pane/Pane.jsx @@ -42,11 +42,11 @@ function Pane({ const URLDetails = fetchURLDetails(); return ( -
-
-
-
-
+
+
+
+
+
{" "} {URLDetails.dirFormatted}
-
- +
+ - +
-
-
+
+
{" "} {URLDetails.branchName}
- +
-
+
{tabId ? ( { if (opening && scrolling) { - const treeList = document.querySelector(".tree-list"); + const treeList = document.querySelector(".spantree-tree-list"); const openingItem = document.querySelector(".opening"); document - .querySelector(".tree-list") + .querySelector(".spantree-tree-list") .scrollTo( openingItem.offsetLeft - 25, openingItem.offsetTop - treeList.clientHeight / 2 @@ -121,34 +121,36 @@ function TreeItem({ return (
  • -
    +
    {isTree ? ( isTree.isOpen ? ( - + ) : ( - + ) ) : ( " " )}
    -
    +
    -
    {name}
    +
    {name}
    {isTree && isTree.isOpen && ( -
      +
        {Object.keys(children).map((key) => ( { return (
        {searchResults.map((resultTerm, index) => { diff --git a/content/src/scripts/containers/SearchBar/SearchBarResult.jsx b/content/src/scripts/containers/SearchBar/SearchBarResult.jsx index abedf3b..9f6d48f 100644 --- a/content/src/scripts/containers/SearchBar/SearchBarResult.jsx +++ b/content/src/scripts/containers/SearchBar/SearchBarResult.jsx @@ -33,7 +33,7 @@ function renderHighlightedFileLocation(resultsLoading, query, term) { {arr.map((len, i) => { let charClass = ""; if (isFzy) { - charClass = "in-fzy"; + charClass = "spantree-in-fzy"; } isFzy = !isFzy; const currString = term.substr(0, len); @@ -44,7 +44,9 @@ function renderHighlightedFileLocation(resultsLoading, query, term) { ); })} - {term.length === 0 ? null : {term}} + {term.length === 0 ? null : ( + {term} + )} ); } @@ -76,7 +78,7 @@ function SearchBarResult({ }} >
        -
        +
        {fileName}
        diff --git a/content/src/scripts/containers/SearchBar/styles.css b/content/src/scripts/containers/SearchBar/styles.css index ff8607b..479f114 100644 --- a/content/src/scripts/containers/SearchBar/styles.css +++ b/content/src/scripts/containers/SearchBar/styles.css @@ -35,7 +35,7 @@ max-height: 35vh; } -.results-loading { +.spantree-results-loading { color: grey; } @@ -71,12 +71,12 @@ padding-left: 23px; } -.in-fzy { +.spantree-in-fzy { color: rgb(77, 61, 146); font-weight: bold; } -.search-term { +.spantree-search-term { margin-right: 10px; } diff --git a/content/src/scripts/containers/TreeList/TreeList.jsx b/content/src/scripts/containers/TreeList/TreeList.jsx index 38070a5..4a6df42 100644 --- a/content/src/scripts/containers/TreeList/TreeList.jsx +++ b/content/src/scripts/containers/TreeList/TreeList.jsx @@ -4,7 +4,11 @@ import { connect } from "react-redux"; import Loader from "../../components/Loader"; import TreeItem from "../../components/TreeItem"; import { fetchURLDetails } from "../../utils/url"; -import { getInitialTree, openDir, closeDir } from "../../../../../event/src/actions/API"; +import { + getInitialTree, + openDir, + closeDir, +} from "../../../../../event/src/actions/API"; import { setClicked } from "../../../../../event/src/actions/UI"; import "./styles.css"; @@ -24,8 +28,8 @@ const renderTreeItems = ( const URLDetails = fetchURLDetails(); return ( -
        -
          +
          +
            {Object.keys(tree).map((key) => ( +
            ); diff --git a/content/src/scripts/containers/TreeList/styles.css b/content/src/scripts/containers/TreeList/styles.css index 47defcc..e8b918a 100644 --- a/content/src/scripts/containers/TreeList/styles.css +++ b/content/src/scripts/containers/TreeList/styles.css @@ -1,4 +1,4 @@ -.loader-wrapper { +.spantree-loader-wrapper { height: 100%; display: flex; justify-content: center; @@ -6,32 +6,32 @@ align-items: center; } -.tree-list { +.spantree-tree-list { scroll-behavior: smooth; overflow-y: auto; height: calc(100vh - 40px); } -.tree-list::-webkit-scrollbar-track { +.spantree-tree-list::-webkit-scrollbar-track { background-color: #c9c9c9; } -.tree-list::-webkit-scrollbar-corner { +.spantree-tree-list::-webkit-scrollbar-corner { background-color: #c9c9c9; } -.tree-list::-webkit-scrollbar { +.spantree-tree-list::-webkit-scrollbar { width: 8px; height: 8px; } -.tree-list::-webkit-scrollbar-thumb { +.spantree-tree-list::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.5); } -.parent-list { +.spantree-parent-list { font-size: 0.875rem; padding: 0px 0px 0px 5px; list-style-type: none; diff --git a/content/src/scripts/libs/file-icons.css b/content/src/scripts/libs/file-icons.css index dec5498..f88f529 100644 --- a/content/src/scripts/libs/file-icons.css +++ b/content/src/scripts/libs/file-icons.css @@ -460,6 +460,20 @@ font-size: 15px; top: 2px; } +.tree-arrow-right-icon:before { + font-family: FontAwesome; + font-size: 10px; + content: "\f054"; + font-size: 12px; + top: 5px; +} +.tree-arrow-down-icon:before { + font-family: FontAwesome; + font-size: 10px; + content: "\f078"; + font-size: 12px; + top: 5px; +} .twig-icon:before { font-family: FontAwesome; font-size: 13px; diff --git a/content/src/scripts/libs/gitlab-dark.css b/content/src/scripts/libs/gitlab-dark.css index 1988a5b..38118b6 100644 --- a/content/src/scripts/libs/gitlab-dark.css +++ b/content/src/scripts/libs/gitlab-dark.css @@ -6680,22 +6680,22 @@ html { } /*SpanTree Styles*/ -.pane-header { +.spantree-pane-header { height: 50px !important; } -.tree-list { +.spantree-tree-list { height: calc(100vh - 50px) !important; } -.tree-list::-webkit-scrollbar-thumb { +.spantree-tree-list::-webkit-scrollbar-thumb { background-color: rgba(130, 130, 130, 0.5) !important; } -.tree-list::-webkit-scrollbar-track { +.spantree-tree-list::-webkit-scrollbar-track { background-color: var(--darken) !important; } -.tree-list::-webkit-scrollbar-corner { +.spantree-tree-list::-webkit-scrollbar-corner { background-color: var(--darken) !important; } -.backdrop { +.spantree-backdrop { background-color: rgba(0, 0, 0, 0.51); } .spantree-search { @@ -6719,7 +6719,7 @@ html { .spantree-result-active { background: var(--darker) !important; } -.in-fzy { +.spantree-in-fzy { color: rgb(146, 122, 249) !important; } diff --git a/content/src/scripts/utils/searchBarWorker.js b/content/src/scripts/utils/searchBarWorker.js index 9a6e23e..2ac4284 100644 --- a/content/src/scripts/utils/searchBarWorker.js +++ b/content/src/scripts/utils/searchBarWorker.js @@ -1,5 +1,5 @@ export default () => { - self.addEventListener('message', (e) => { + self.addEventListener("message", (e) => { if (!e) return; let searchTerms = e.data.searchTerms; let URLDetails = e.data.URLDetails; @@ -26,15 +26,15 @@ export default () => { let m = haystack.length; let match_bonus = new Array(m); - let last_ch = '/'; + let last_ch = "/"; for (let i = 0; i < m; i++) { let ch = haystack[i]; - if (last_ch === '/') { + if (last_ch === "/") { match_bonus[i] = SCORE_MATCH_SLASH; - } else if (last_ch === '-' || last_ch === '_' || last_ch === ' ') { + } else if (last_ch === "-" || last_ch === "_" || last_ch === " ") { match_bonus[i] = SCORE_MATCH_WORD; - } else if (last_ch === '.') { + } else if (last_ch === ".") { match_bonus[i] = SCORE_MATCH_DOT; } else if (fzyIsLower(last_ch) && fzyIsUpper(ch)) { match_bonus[i] = SCORE_MATCH_CAPITAL; @@ -152,8 +152,13 @@ export default () => { const reRegExpChar = /[\\^$.*+?()[\]{}|]/g, reHasRegExpChar = RegExp(reRegExpChar.source); const escapeRegExp = (string) => - reHasRegExpChar.test(string) ? string.replace(reRegExpChar, '\\$&') : string; - const regex = new RegExp(query.split('').map(escapeRegExp).join('.*'), 'i'); + reHasRegExpChar.test(string) + ? string.replace(reRegExpChar, "\\$&") + : string; + const regex = new RegExp( + query.split("").map(escapeRegExp).join(".*"), + "i" + ); let resultArray = searchTerms[URLDetails.dirFormatted][ URLDetails.branchName ].filter((ele) => ele.match(regex)); diff --git a/manifest.json b/manifest.json index 23f0568..fede578 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "SpanTree - GitLab Tree", "description": "Tree for Gitlab", - "version": "0.0.3.0", + "version": "0.0.3.1", "background": { "scripts": ["event.js"] },