Skip to content

Commit c172097

Browse files
tavyandy97vedanshgarg
tavyandy97
and
vedanshgarg
authored
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 <[email protected]>
1 parent 5af5034 commit c172097

File tree

19 files changed

+128
-96
lines changed

19 files changed

+128
-96
lines changed

‎content/src/scripts/components/Backdrop/Backdrop.jsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import "./styles.css";
44

55
function Backdrop({ showSearchbar, setShowSearchbar }) {
66
return showSearchbar ? (
7-
<div className="backdrop" onClick={() => setShowSearchbar(false)}></div>
7+
<div
8+
className="spantree-backdrop"
9+
onClick={() => setShowSearchbar(false)}
10+
></div>
811
) : null;
912
}
1013

‎content/src/scripts/components/Backdrop/styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.backdrop {
1+
.spantree-backdrop {
22
width: 100%;
33
height: 100%;
44
position: fixed;

‎content/src/scripts/components/Loader/Loader.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function Loader({ size }) {
1212
width: size,
1313
height: size,
1414
}}
15-
className="loader"
15+
className="spantree-loader"
1616
></div>
1717
);
1818
}

‎content/src/scripts/components/Loader/styles.css

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
.loader {
1+
.spantree-loader {
22
border-color: #f3f3f3;
33
border-radius: 50%;
44
border-style: solid;
55
border-top-color: rgb(237, 153, 44);
6-
-webkit-animation: spin 2s linear infinite; /* Safari */
7-
animation: spin 2s linear infinite;
6+
-webkit-animation: spantree-loader-spin 2s linear infinite; /* Safari */
7+
animation: spantree-loader-spin 2s linear infinite;
88
}
99

1010
/* Safari */
11-
@-webkit-keyframes spin {
11+
@-webkit-keyframes spantree-loader-spin {
1212
0% {
1313
-webkit-transform: rotate(0deg);
1414
}
@@ -17,7 +17,7 @@
1717
}
1818
}
1919

20-
@keyframes spin {
20+
@keyframes spantree-loader-spin {
2121
0% {
2222
transform: rotate(0deg);
2323
}

‎content/src/scripts/components/Pane/Pane.jsx

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -42,42 +42,48 @@ function Pane({
4242
const URLDetails = fetchURLDetails();
4343

4444
return (
45-
<div className="tree-pane" style={{ width: width + "px" }}>
46-
<div className="pane-main">
47-
<div className="pane-header">
48-
<div className="spread">
49-
<div className="pane-details">
45+
<div className="spantree-tree-pane" style={{ width: width + "px" }}>
46+
<div className="spantree-pane-main">
47+
<div className="spantree-pane-header">
48+
<div className="spantree-spread">
49+
<div className="spantree-pane-details">
5050
<SVG
5151
icon="repo"
5252
height="12"
5353
style={{ verticalAlign: "middle" }}
5454
/>{" "}
5555
{URLDetails.dirFormatted}
5656
</div>
57-
<div className="pane-icons">
58-
<span onClick={switchTheme} className="close-button">
57+
<div className="spantree-pane-icons">
58+
<span onClick={switchTheme} className="spantree-close-button">
5959
<SVG icon="half" height="9" />
6060
</span>
61-
<span onClick={toggleOpened} className="close-button">
61+
<span onClick={toggleOpened} className="spantree-close-button">
6262
<SVG icon="close" height="12" />
6363
</span>
6464
</div>
6565
</div>
66-
<div className="spread">
67-
<div className="pane-details" style={{ width: width - 12 + "px" }}>
66+
<div className="spantree-spread">
67+
<div
68+
className="spantree-pane-details"
69+
style={{ width: width - 12 + "px" }}
70+
>
6871
<SVG
6972
icon="branch"
7073
height="12"
7174
style={{ verticalAlign: "middle" }}
7275
/>{" "}
7376
{URLDetails.branchName}
7477
</div>
75-
<span onClick={setShowSearchbarTrue} className="close-button">
78+
<span
79+
onClick={setShowSearchbarTrue}
80+
className="spantree-close-button"
81+
>
7682
<SVG icon="search" height="9" />
7783
</span>
7884
</div>
7985
</div>
80-
<div className="tree-body">
86+
<div className="spantree-tree-body">
8187
{tabId ? (
8288
<TreeList
8389
firstPageLoad={firstPageLoad}

‎content/src/scripts/components/Pane/styles.css

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.tree-pane {
1+
.spantree-tree-pane {
22
position: fixed;
33
display: flex;
44
box-sizing: border-box;
@@ -14,13 +14,13 @@
1414
box-shadow: 2px 0px 8px #00000070;
1515
}
1616

17-
.pane-main {
17+
.spantree-pane-main {
1818
height: 100%;
1919
width: 100%;
2020
position: absolute;
2121
}
2222

23-
.pane-header {
23+
.spantree-pane-header {
2424
height: 40px;
2525
background-color: rgb(77, 61, 146);
2626
color: white;
@@ -30,29 +30,29 @@
3030
justify-content: space-around;
3131
}
3232

33-
.close-button {
33+
.spantree-close-button {
3434
cursor: pointer;
3535
margin: 0 4px;
3636
}
3737

38-
.spread {
38+
.spantree-spread {
3939
display: flex;
4040
justify-content: space-between;
4141
}
4242

43-
.tree-body {
43+
.spantree-tree-body {
4444
height: 100%;
4545
width: 100%;
4646
}
4747

48-
.pane-details {
48+
.spantree-pane-details {
4949
display: inline-block;
5050
overflow: hidden;
5151
white-space: nowrap;
5252
text-overflow: ellipsis;
5353
font-weight: bold;
5454
}
5555

56-
.pane-icons {
56+
.spantree-pane-icons {
5757
min-width: 35px;
5858
}

‎content/src/scripts/components/TreeItem/TreeItem.jsx

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,10 @@ function TreeItem({
103103

104104
useEffect(() => {
105105
if (opening && scrolling) {
106-
const treeList = document.querySelector(".tree-list");
106+
const treeList = document.querySelector(".spantree-tree-list");
107107
const openingItem = document.querySelector(".opening");
108108
document
109-
.querySelector(".tree-list")
109+
.querySelector(".spantree-tree-list")
110110
.scrollTo(
111111
openingItem.offsetLeft - 25,
112112
openingItem.offsetTop - treeList.clientHeight / 2
@@ -121,34 +121,36 @@ function TreeItem({
121121
return (
122122
<li>
123123
<div
124-
className={opening ? "tree-element opening" : "tree-element"}
124+
className={
125+
opening ? "spantree-tree-element opening" : "spantree-tree-element"
126+
}
125127
onClick={handleClick}
126128
>
127129
<div
128130
className={
129131
treeItemActive.isItemActive
130-
? "full-width-row active-row"
131-
: "full-width-row"
132+
? "spantree-full-width-row spantree-active-row"
133+
: "spantree-full-width-row"
132134
}
133135
></div>
134-
<div className="tree-icon">
136+
<div className="spantree-tree-icon">
135137
{isTree ? (
136138
isTree.isOpen ? (
137-
<i className="fa fa-chevron-right arrow arrow-down"></i>
139+
<i className="tree-arrow-down-icon spantree-arrow"></i>
138140
) : (
139-
<i className="fa fa-chevron-right arrow"></i>
141+
<i className="tree-arrow-right-icon spantree-arrow"></i>
140142
)
141143
) : (
142144
" "
143145
)}
144146
</div>
145-
<div className="file-icon">
147+
<div className="spantree-file-icon">
146148
<i className={fileIcons.getClassWithColor(name, isTree)}></i>
147149
</div>
148-
<div className="item-name">{name}</div>
150+
<div className="spantree-item-name">{name}</div>
149151
</div>
150152
{isTree && isTree.isOpen && (
151-
<ul className="child-list">
153+
<ul className="spantree-child-list">
152154
{Object.keys(children).map((key) => (
153155
<TreeItem
154156
key={key}

‎content/src/scripts/components/TreeItem/styles.css

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,41 @@
1-
.tree-element {
1+
.spantree-tree-element {
22
padding: 2px 15px 2px 0px;
33
display: flex;
44
height: 24px;
55
align-items: center;
66
width: max-content;
77
}
88

9-
.child-list {
9+
.spantree-child-list {
1010
list-style-type: none;
1111
padding: 0px 0px 0px 20px;
1212
}
1313

14-
.tree-icon {
14+
.spantree-tree-icon {
1515
width: 16px;
1616
text-align: center;
17-
margin-right: 5px;
17+
margin-right: 2px;
1818
padding-bottom: 2px;
1919
}
2020

21-
.file-icon {
21+
.spantree-file-icon {
2222
width: 22px;
2323
text-align: left;
2424
}
2525

26-
.file-icon i {
26+
.spantree-file-icon i {
2727
font-style: normal;
2828
}
2929

30-
.item-name {
30+
.spantree-item-name {
3131
width: max-content;
3232
}
3333

34-
.arrow {
35-
transition: all 0.2s;
36-
}
37-
38-
.arrow-down {
39-
transform: rotate(90deg);
34+
.spantree-arrow {
35+
font-style: normal;
4036
}
4137

42-
.full-width-row {
38+
.spantree-full-width-row {
4339
position: absolute;
4440
height: 24px;
4541
width: 100%;
@@ -51,16 +47,16 @@
5147
box-sizing: border-box;
5248
}
5349

54-
.active-row {
55-
border: 3px solid black;
56-
background: darkslategrey;
57-
}
58-
59-
.full-width-row:hover {
50+
.spantree-full-width-row:hover {
6051
background: #6464ff;
6152
cursor: pointer;
6253
}
6354

64-
.full-width-row:active {
55+
.spantree-full-width-row:active {
6556
background: blue;
6657
}
58+
59+
.spantree-active-row {
60+
border: 3px solid black;
61+
background: darkslategrey;
62+
}

‎content/src/scripts/containers/Resizer/Resizer.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const Resizer = ({ width, setWidth }) => {
3232

3333
return (
3434
<div
35-
className="resizer"
35+
className="spantree-resizer"
3636
unselectable="on"
3737
style={{ left: width + "px" }}
3838
onMouseDown={mouseDownListener}

‎content/src/scripts/containers/Resizer/styles.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
.resizer {
1+
.spantree-resizer {
22
/*background: red;*/
33
width: 8px;
44
position: relative;
55
opacity: 100%;
66
}
77

8-
.resizer:hover {
8+
.spantree-resizer:hover {
99
cursor: col-resize;
1010
}

‎content/src/scripts/containers/SearchBar/SearchBar.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ function SearchBar({
164164
className={
165165
resultsLoading <= 0
166166
? "spantree-search-results"
167-
: "spantree-search-results results-loading"
167+
: "spantree-search-results spantree-results-loading"
168168
}
169169
>
170170
{searchResults.map((resultTerm, index) => {

‎content/src/scripts/containers/SearchBar/SearchBarResult.jsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function renderHighlightedFileLocation(resultsLoading, query, term) {
3333
{arr.map((len, i) => {
3434
let charClass = "";
3535
if (isFzy) {
36-
charClass = "in-fzy";
36+
charClass = "spantree-in-fzy";
3737
}
3838
isFzy = !isFzy;
3939
const currString = term.substr(0, len);
@@ -44,7 +44,9 @@ function renderHighlightedFileLocation(resultsLoading, query, term) {
4444
</span>
4545
);
4646
})}
47-
{term.length === 0 ? null : <span className="search-term">{term}</span>}
47+
{term.length === 0 ? null : (
48+
<span className="spantree-search-term">{term}</span>
49+
)}
4850
</Fragment>
4951
);
5052
}
@@ -76,7 +78,7 @@ function SearchBarResult({
7678
}}
7779
>
7880
<div className="spantree-search-file">
79-
<div className="file-icon">
81+
<div className="spantree-file-icon">
8082
<i className={fileIcons.getClassWithColor(fileName, false)}></i>
8183
</div>
8284
<div className="spantree-search-filename">{fileName}</div>

‎content/src/scripts/containers/SearchBar/styles.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
max-height: 35vh;
3636
}
3737

38-
.results-loading {
38+
.spantree-results-loading {
3939
color: grey;
4040
}
4141

@@ -71,12 +71,12 @@
7171
padding-left: 23px;
7272
}
7373

74-
.in-fzy {
74+
.spantree-in-fzy {
7575
color: rgb(77, 61, 146);
7676
font-weight: bold;
7777
}
7878

79-
.search-term {
79+
.spantree-search-term {
8080
margin-right: 10px;
8181
}
8282

0 commit comments

Comments
 (0)