Skip to content

Commit 84cf443

Browse files
AinuraAliievaAinuraAliieva
authored
Merge pull request #66 from xsnippet/snippet-design
Update Snippet page styles according to new designs
2 parents 9045078 + 65a9ff5 commit 84cf443

File tree

6 files changed

+139
-67
lines changed

6 files changed

+139
-67
lines changed

‎src/components/Snippet.jsx‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import 'brace/theme/textmate';
88
import Title from './common/Title';
99
import Spinner from './common/Spinner';
1010
import * as actions from '../actions';
11-
import { downloadSnippet } from '../helpers';
11+
import { downloadSnippet, copyToClipboard, parseDate } from '../helpers';
1212

1313
import '../styles/Snippet.styl';
1414

@@ -18,6 +18,9 @@ class Snippet extends React.Component {
1818
this.state = { isShowEmbed: false };
1919
this.toggleEmbed = this.toggleEmbed.bind(this);
2020
this.download = this.download.bind(this);
21+
this.copyClipboard = (e) => {
22+
copyToClipboard(e, 'embedded');
23+
};
2124
}
2225

2326
componentDidMount() {
@@ -51,31 +54,41 @@ class Snippet extends React.Component {
5154
<div className="snippet" key="Snippet">
5255
<div className="snippet-header">
5356
<div className="snippet-data">
57+
<span className="snippet-data-title">{snippetTitle}</span>
58+
<div className="snippet-data-tags">
59+
{snippet.get('tags').map(item => <span className="snippet-data-tag" key={item}>{item}</span>)}
60+
</div>
61+
<span className="snippet-data-meta">{parseDate(snippet.get('created_at'))}, by Guest</span>
62+
</div>
63+
<div className="snippet-data-actions">
64+
<span className="snippet-data-lang">{syntax}</span>
5465
<div>
55-
<span className="snippet-data-title">{snippetTitle}</span>
56-
<span className="snippet-data-lang">[ {syntax} ]</span>
66+
<button className="snippet-button">Raw</button>
67+
<button className="snippet-button" onClick={this.download}>Download</button>
68+
<button
69+
className={`snippet-button ${this.state.isShowEmbed}`}
70+
key="snippet-details"
71+
onClick={this.toggleEmbed}
72+
onKeyPress={this.toggleEmbed}
73+
>
74+
Embed
75+
</button>
5776
</div>
58-
<span className="snippet-data-author">By Guest</span>
5977
</div>
60-
<button
61-
className="snippet-button"
62-
key="snippet-details"
63-
onClick={this.toggleEmbed}
64-
onKeyPress={this.toggleEmbed}
65-
>
66-
Embed
67-
</button>
6878
</div>
6979
<div className={`snippet-embed ${this.state.isShowEmbed}`}>
80+
<span className="snippet-embed-close" onClick={this.toggleEmbed} role="presentation" />
7081
<p className="snippet-embed-text">
7182
In order to embed this content into your website or blog,
7283
simply copy and paste code provided below:
7384
</p>
7485
<input
86+
id="embedded"
7587
className="input"
7688
type="text"
7789
defaultValue={`<script src='http://xsnippet.org/${snippet.get('id')}/embed/'></script>`}
7890
/>
91+
<button className="snippet-button embed" onClick={this.copyClipboard}>Copy</button>
7992
</div>
8093
<div className="snippet-code">
8194
<AceEditor
@@ -94,10 +107,6 @@ class Snippet extends React.Component {
94107
}}
95108
value={`${snippet.get('content')}`}
96109
/>
97-
<div className="snippet-code-bottom-bar">
98-
<button className="snippet-button light">Raw</button>
99-
<button className="snippet-button light" onClick={this.download}>Download</button>
100-
</div>
101110
</div>
102111
</div>,
103112
]

‎src/helpers/index.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,19 @@ function downloadSnippet(snippet) {
3636
download(content, name, 'text/plain');
3737
}
3838

39-
export { regExpEscape, downloadSnippet };
39+
function copyToClipboard(e, id) {
40+
document.getElementById(id).select();
41+
document.execCommand('copy');
42+
e.target.focus();
43+
}
44+
45+
// This function is here just because I don't want to pull the whole moment.js
46+
// only for one tiny date
47+
function parseDate(d) {
48+
const date = new Date(d);
49+
const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
50+
const month = date.getMonth() < 10 ? `0${date.getMonth()}` : date.getMonth();
51+
return `${day}.${month}.${date.getFullYear()}`;
52+
}
53+
54+
export { regExpEscape, downloadSnippet, copyToClipboard, parseDate };

‎src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Raleway:600" rel="stylesheet">
6+
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Raleway:600|Roboto:400,300,500,700" rel="stylesheet">
77
<title>XSnippet</title>
88
</head>
99
<body>

‎src/styles/Snippet.styl‎

Lines changed: 83 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -10,77 +10,113 @@
1010
display: flex
1111
flex-flow: row nowrap
1212
justify-content: space-between
13-
align-items: center
14-
min-height: offset
15-
color: text-light
16-
background: snippet-header-light
17-
border-left: 40px solid snippet-header-normal
13+
min-height: 110px
1814
padding: 15px 20px
15+
color: text-light
16+
background: snippet-header-green-normal
17+
border-left: 40px solid snippet-header-border
18+
font-family: font-roboto
1919

2020
&-data
21-
& > div
22-
display: flex
21+
display: flex
22+
flex-flow: column nowrap
23+
justify-content: space-between
2324
&-title
2425
font-size: 20px
25-
margin-right: 20px
26+
letter-spacing: .2px
2627
&-author
2728
display: block
2829
margin-top: 7px
2930
font-size: 14px
31+
&-actions
32+
display: flex
33+
flex-flow: column nowrap
34+
justify-content: space-between
35+
align-items: flex-end
36+
&-lang
37+
font-size: 14px
38+
&-meta
39+
opacity: .8
40+
font-size: 12px
41+
font-weight: 300
42+
&-tag
43+
margin-right: 5px
44+
padding: 3px 8px
45+
font-size: 12px
46+
font-weight: 300
47+
color: text-light
48+
border-radius: 9.5px
49+
background-color: rgba(text-light, .2)
50+
letter-spacing: .4px
51+
&:last-shild
52+
margin-right: 0
3053

3154
&-button
32-
padding: 9px 12px
55+
margin-right: 10px
56+
padding: 11px 21px
3357
color: text-light
34-
font-size: 17px
35-
font-family: font-quicksand
58+
font-size: 14px
59+
font-weight: 400
3660
border-radius: 0
3761
border: 1px solid text-light
38-
background-color: button-normal
62+
background-color: button-active
63+
text-transform: uppercase
3964
cursor: pointer
65+
&:last-child
66+
margin-right: 0
67+
&.true
4068
&:hover
41-
background-color: button-light-normal
69+
background-color: text-light
70+
color: button-active
71+
&.embed
72+
margin-left: 10px
73+
padding: 8px 18px
74+
font-size: 12px
75+
text-transform: none
76+
border: none
77+
&:hover
78+
color: text-light
79+
background-color: button-embed-hover
4280

4381
&-embed
44-
min-height: 80px
45-
background-color: snippet-header-normal
46-
border-left: 40px solid snippet-header-dark
47-
padding: 13px 20px 15px
82+
position: relative
83+
min-height: 84px
84+
padding: 15px 20px
85+
background-color: snippet-header-embed
86+
border-left: 40px solid snippet-header-embed-dark
4887
&.false
4988
display: none
5089
&-text
51-
color: text-light
52-
font-family: font-quicksand
53-
font-size: 14px
5490
padding-bottom: 10px
91+
color: text-dark
92+
font-family: font-roboto
93+
font-weight: 300
94+
font-size: 12px
5595
& input
5696
basic-input()
57-
color: text-dark
58-
background-color: snippet-content-light
5997
padding: 4px 9px
60-
font-size: 15px
61-
62-
&-code
63-
flex: 1
64-
position: relative
65-
&-bottom-bar
66-
bottom: 0
67-
left: 0
68-
right: 0
69-
text-align: right
70-
padding: 10px 20px
71-
border-top: 1px solid border-light
98+
width: auto
99+
min-width: 450px
100+
min-height: 30px
101+
color: text-dark
72102
background-color: snippet-content-light
73-
&-button
74-
color: text-light
75-
border: none
76-
margin-right: 3px
77-
font-size: 17px
78-
font-family: font-quicksand
79-
padding: 10px 14px
103+
font-size: 13px
104+
&-close
105+
position: absolute
106+
width: 12px
107+
height: 12px
108+
top: 15px
109+
right: 15px
80110
cursor: pointer
81-
outline: none
82-
text-decoration: none
83-
&.light
84-
background-color: button-light-normal
85-
&:hover
86-
background-color: button-light-active
111+
&::before
112+
&::after
113+
content: ''
114+
position: absolute
115+
width: 1px
116+
height: 14px
117+
left: 6px
118+
background-color: snippet-embed-close
119+
&::before
120+
transform: rotate(45deg)
121+
&::after
122+
transform: rotate(-45deg)

‎src/styles/common/colors.styl‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ color-gainboro-white-s0 = #e8e8e8
77
color-white-smoke-white-s0 = #f3f3f3
88
color-white-white-s0 = #fdfdfd
99
color-gainsboro-white-s0 = #e4e4e4
10+
color-gainsboro-white-s1 = #e1e1e1
11+
color-shady-lady-gray-s0 = #979797
1012

1113
color-regent-st-blue-blue-s28 = #9cd9cd
1214
color-downy-green-s42 = #7ad6c3
@@ -15,6 +17,7 @@ color-medium-aquamarine-blue-s50 = #62c4b0
1517
color-puerto-rico-green-s47 = #64beac
1618
color-niagara-green-s75 = #2aa88e
1719
color-shamrock-green-s73 = #33c0a3
20+
color-mountain-meadow-green-s89 = #11a88d
1821
color-elf-green-green-s82 = #178770
1922

2023
color-shady-lady-grey-s0 = #979797

‎src/styles/common/variables.styl‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,15 @@ sidebar-active-icon = color-puerto-rico-green-s47
2020
sidebar-normal-icon = color-dim-gray-gray-s0
2121

2222
snippet-header-normal = color-niagara-green-s75
23-
snippet-header-dark = color-elf-green-green-s82
2423
snippet-header-light = color-medium-aquamarine-blue-s47
25-
snippet-content-light = color-white-white-s100
24+
snippet-header-border = color-mountain-meadow-green-s89
25+
26+
snippet-header-green-normal = color-shamrock-green-s73
27+
snippet-content-light = color-white-white-s100
28+
29+
snippet-header-embed-dark = color-gainsboro-white-s1
30+
snippet-header-embed = color-white-smoke-white-s0
31+
snippet-embed-close = color-shady-lady-gray-s0
2632

2733
language-bar-bg-normal = color-white-smoke-white-s0
2834
language-bar-bg-active = color-white-white-s0
@@ -34,8 +40,11 @@ button-normal = color-medium-aquamarine-blue-s47
3440
button-active = color-shamrock-green-s73
3541
button-light-normal = color-regent-st-blue-blue-s28
3642
button-light-active = color-downy-green-s42
43+
button-inverse-header = color-mountain-meadow-green-s89
44+
button-embed-hover = color-mountain-meadow-green-s89
3745

3846
offset = 70px
3947

4048
font-raleway = 'Raleway', sans-serif
4149
font-quicksand = 'Quicksand', sans-serif
50+
font-roboto = 'Roboto', sans-serif

0 commit comments

Comments
 (0)