Skip to content
This repository was archived by the owner on Jan 14, 2022. It is now read-only.

Commit c3e02ab

Browse files
ZeroX-DGZeroX-DG
committed
improved UI
1 parent aeead64 commit c3e02ab

File tree

4 files changed

+73
-70
lines changed

4 files changed

+73
-70
lines changed

‎browser/render/layouts/list-and-detail/snippet-detail-multi-file/index.jsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,9 @@ export default class SnippetDetailMultiFile extends React.Component {
104104
const isMarkdown =
105105
langName === 'Markdown' || langName === 'GitHub Flavored Markdown'
106106
return (
107-
<div className="top-bar">
108-
<div className="left-tool">
107+
<div className={`top-bar ${isEditing ? 'editing' : ''}`}>
108+
<div className="left-tool">{this.renderSnippetName()}</div>
109+
<div className="right-tool">
109110
{isEditing ? (
110111
<div
111112
className="save-btn"
@@ -163,8 +164,6 @@ export default class SnippetDetailMultiFile extends React.Component {
163164
<FAIcon icon="eye-slash" />
164165
</div>
165166
)}
166-
</div>
167-
<div className="right-tool">
168167
{!isEditing && (
169168
<div
170169
className="delete-btn"
@@ -385,10 +384,7 @@ export default class SnippetDetailMultiFile extends React.Component {
385384
return (
386385
<Fragment>
387386
{this.renderTopBar()}
388-
<div className="header">
389-
{this.renderSnippetName()}
390-
{this.renderOtherInfo()}
391-
</div>
387+
<div className="header">{this.renderOtherInfo()}</div>
392388
{this.renderTagList()}
393389
{this.renderDescription()}
394390
{this.renderFileList()}

‎browser/render/layouts/list-and-detail/snippet-detail-multi-file/snippet-detail-multi-file.sass‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,27 @@
77
overflow: overlay
88
.__react_component_tooltip
99
font-family: 'Lato'
10+
.snippet-name
11+
width: 100%
12+
font-size: 30px
13+
font-family: 'Lato'
14+
overflow: hidden
15+
margin: 0
16+
text-overflow: ellipsis
17+
white-space: nowrap
18+
input[type='text']
19+
height: 35px
20+
border: none
21+
outline: none
22+
font-size: 15px
23+
border-radius: 5px
24+
padding: 2px 5px
25+
display: inline-block
26+
.snippet-name-input
27+
width: calc(100% - 10px)
1028
.header
1129
width: 100%
1230
padding: 0 20px
13-
.snippet-name
14-
font-size: 30px
15-
font-family: 'Lato'
16-
display: -webkit-box
17-
-webkit-line-clamp: 3
18-
-webkit-box-orient: vertical
19-
overflow: hidden
20-
margin-top: 0px
21-
input[type='text']
22-
height: 35px
23-
border: none
24-
outline: none
25-
font-size: 15px
26-
border-radius: 5px
27-
padding: 2px 5px
28-
display: inline-block
29-
.snippet-name-input
30-
width: calc(100% - 10px)
3131
.info
3232
margin-right: 15px
3333
.description
@@ -79,6 +79,11 @@
7979
div[class*='-btn']
8080
margin-left: 25px
8181
cursor: pointer
82+
&.editing
83+
.left-tool
84+
width: 90%
85+
.right-tool
86+
width: 10%
8287
.file-list
8388
width: 100%
8489
ul

‎browser/render/layouts/list-and-detail/snippet-detail/index.jsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,9 @@ export default class SnippetDetail extends React.Component {
9595
const isMarkdown =
9696
snippet.lang === 'Markdown' || snippet.lang === 'GitHub Flavored Markdown'
9797
return (
98-
<div className="top-bar">
99-
<div className="left-tool">
98+
<div className={`top-bar ${isEditing ? 'editing' : ''}`}>
99+
<div className="left-tool">{this.renderSnippetName()}</div>
100+
<div className="right-tool">
100101
{!isEditing && (
101102
<div
102103
className="copy-btn"
@@ -163,8 +164,6 @@ export default class SnippetDetail extends React.Component {
163164
<FAIcon icon="eye-slash" />
164165
</div>
165166
)}
166-
</div>
167-
<div className="right-tool">
168167
{!isEditing && (
169168
<div
170169
className="delete-btn"
@@ -259,10 +258,7 @@ export default class SnippetDetail extends React.Component {
259258
return (
260259
<Fragment>
261260
{this.renderTopBar()}
262-
<div className="header">
263-
{this.renderSnippetName()}
264-
{this.renderOtherInfo()}
265-
</div>
261+
<div className="header">{this.renderOtherInfo()}</div>
266262
{this.renderTagList()}
267263
{this.renderDescription()}
268264
{isMarkdown && isPreview ? (

‎browser/render/layouts/list-and-detail/snippet-detail/snippet-detail.sass‎

Lines changed: 42 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,44 +7,45 @@
77
overflow: overlay
88
.__react_component_tooltip
99
font-family: 'Lato'
10+
.snippet-name
11+
width: 100%
12+
font-size: 30px
13+
font-family: 'Lato'
14+
overflow: hidden
15+
margin: 0;
16+
white-space: nowrap;
17+
text-overflow: ellipsis;
18+
.icon
19+
margin-right: 15px
20+
margin-right: 5px
21+
vertical-align: middle
22+
.lang-icon
23+
display: inline-block
24+
width: 30px
25+
height: 30px
26+
input[type='text']
27+
height: 35px
28+
width: calc(100% - 180px)
29+
border: none
30+
outline: none
31+
font-size: 15px
32+
border-radius: 5px
33+
padding: 2px 5px
34+
display: inline-block
35+
.snippet-name-input
36+
width: calc(100% - 180px)
37+
margin-right: 20px
38+
select
39+
width: 150px
40+
height: 35px
41+
border: none
42+
border-radius: 5px
43+
outline: none
44+
display: inline-block
45+
padding-left: 5px
1046
.header
1147
width: 100%
1248
padding: 0 20px
13-
.snippet-name
14-
font-size: 30px
15-
font-family: 'Lato'
16-
display: -webkit-box
17-
-webkit-line-clamp: 3
18-
-webkit-box-orient: vertical
19-
overflow: hidden
20-
margin-top: 0px
21-
.icon
22-
margin-right: 15px
23-
margin-right: 5px
24-
vertical-align: middle
25-
.lang-icon
26-
display: inline-block
27-
width: 30px
28-
height: 30px
29-
input[type='text']
30-
height: 35px
31-
border: none
32-
outline: none
33-
font-size: 15px
34-
border-radius: 5px
35-
padding: 2px 5px
36-
display: inline-block
37-
.snippet-name-input
38-
width: calc(100% - 180px)
39-
margin-right: 20px
40-
select
41-
width: 150px
42-
height: 35px
43-
border: none
44-
border-radius: 5px
45-
outline: none
46-
display: inline-block
47-
padding-left: 5px
4849
.info
4950
margin-right: 15px
5051
.description
@@ -95,4 +96,9 @@
9596
justify-content: flex-end
9697
div[class*='-btn']
9798
margin-left: 25px
98-
cursor: pointer
99+
cursor: pointer
100+
&.editing
101+
.left-tool
102+
width: 90%
103+
.right-tool
104+
width: 10%

0 commit comments

Comments
 (0)