Skip to content

Commit 96f2dec

Browse files
dabbottgdowens
dabbott
authored and
gdowens
committed
Create publishing sidebar with login and landing pages (#114)
1 parent ff20584 commit 96f2dec

File tree

17 files changed

+625
-44
lines changed

17 files changed

+625
-44
lines changed

‎web/assets/images/github-logo.png‎

1.67 KB
Loading

‎web/assets/images/github-logo@2x.png‎

2.56 KB
Loading

‎web/public/images/github-logo.png‎

1.67 KB
Loading

‎web/public/images/github-logo@2x.png‎

2.56 KB
Loading

‎web/src/scripts/components/buttons/InspectorButton.jsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
/**
2+
* Copyright (C) 2015 Deco Software Inc.
3+
*
4+
* This program is free software: you can redistribute it and/or modify
5+
* it under the terms of the GNU Affero General Public License, version 3,
6+
* as published by the Free Software Foundation.
7+
*
8+
* This program is distributed in the hope that it will be useful,
9+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
10+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+
* GNU Affero General Public License for more details.
12+
*
13+
* You should have received a copy of the GNU Affero General Public License
14+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
15+
*
16+
*/
17+
18+
import React, { Component, } from 'react'
19+
20+
import SimpleButton from './SimpleButton'
21+
22+
const styles = {
23+
base: {
24+
background: 'linear-gradient(rgb(255,255,255),rgb(250,250,250))',
25+
boxShadow: '0 0 0 1px rgb(229,229,229) inset, 0 1px 2px rgba(0,0,0,0.1)',
26+
height: 35,
27+
fontSize: '12px',
28+
fontWeight: 500,
29+
color: 'rgb(103,103,103)',
30+
cursor: 'default',
31+
borderRadius: 3,
32+
display: 'flex',
33+
paddingLeft: 10,
34+
paddingRight: 10,
35+
},
36+
hover: {
37+
background: 'linear-gradient(rgb(230,230,230),rgb(225,225,225))',
38+
boxShadow: '0 0 0 1px rgb(200,200,200) inset, 0 1px 1px rgba(0,0,0,0.1)',
39+
},
40+
active: {
41+
background: 'linear-gradient(rgb(242,242,242),rgb(237,237,237))',
42+
boxShadow: '0 0 0 1px rgb(212,212,212) inset, 0 1px 1px rgba(0,0,0,0.1)',
43+
},
44+
mainBase: {
45+
background: 'linear-gradient(#89DC6C,#62B246)',
46+
boxShadow: '0 0 0 1px #5CA941 inset, 0 1px 1px rgba(0,0,0,0.1)',
47+
color: 'white',
48+
},
49+
mainHover: {
50+
background: 'linear-gradient(#7BC461,#5DAA42)',
51+
boxShadow: '0 0 0 1px #5CA941 inset, 0 1px 1px rgba(0,0,0,0.1)',
52+
},
53+
mainActive: {
54+
background: 'linear-gradient(#80D064, #63B846)',
55+
boxShadow: '0 0 0 1px #5CA941 inset, 0 1px 1px rgba(0,0,0,0.1)',
56+
},
57+
inner: {
58+
flex: 1,
59+
display: 'flex',
60+
justifyContent: 'center',
61+
alignItems: 'center',
62+
}
63+
}
64+
65+
const ALIGN = {
66+
left: 'flex-start',
67+
center: 'center',
68+
right: 'flex-end',
69+
}
70+
71+
export default class extends Component {
72+
73+
static propTypes = {}
74+
75+
static defaultProps = {
76+
align: 'center',
77+
type: 'normal',
78+
}
79+
80+
constructor(props) {
81+
super(props)
82+
83+
this.state = {}
84+
}
85+
86+
render() {
87+
const {children, align, type} = this.props
88+
const inner = {
89+
justifyContent: ALIGN[align]
90+
}
91+
92+
let {base, hover, active} = styles
93+
94+
if (type === 'main') {
95+
base = {...styles.base, ...styles.mainBase}
96+
hover = styles.mainHover
97+
active = styles.mainActive
98+
}
99+
100+
return (
101+
<SimpleButton
102+
defaultStyle={base}
103+
activeStyle={{...base, ...active}}
104+
hoverStyle={{...base, ...hover}}
105+
innerStyle={{...styles.inner, ...inner}}
106+
>
107+
{children}
108+
</SimpleButton>
109+
)
110+
}
111+
}

‎web/src/scripts/components/buttons/LoginButton.jsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* Copyright (C) 2015 Deco Software Inc.
3+
*
4+
* This program is free software: you can redistribute it and/or modify
5+
* it under the terms of the GNU Affero General Public License, version 3,
6+
* as published by the Free Software Foundation.
7+
*
8+
* This program is distributed in the hope that it will be useful,
9+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
10+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+
* GNU Affero General Public License for more details.
12+
*
13+
* You should have received a copy of the GNU Affero General Public License
14+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
15+
*
16+
*/
17+
18+
import React, { Component, } from 'react'
19+
20+
import InspectorButton from './InspectorButton'
21+
import GithubIcon from '../display/GithubIcon'
22+
23+
export default class extends Component {
24+
25+
static propTypes = {}
26+
27+
static defaultProps = {}
28+
29+
constructor(props) {
30+
super(props)
31+
32+
this.state = {}
33+
}
34+
35+
render() {
36+
const {children} = this.props
37+
38+
return (
39+
<InspectorButton>
40+
<GithubIcon />
41+
<div style={{marginRight: 6}} />
42+
{'Sign in with GitHub'}
43+
</InspectorButton>
44+
)
45+
}
46+
}

‎web/src/scripts/components/buttons/SimpleButton.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@ class SimpleButton extends Component {
3333
isMouseDown: false,
3434
styleSelector: 'defaultStyle',
3535
})
36-
this._bindMouseEvent('_onMouseOver', 'onMouseOver', {
36+
this._bindMouseEvent('_onMouseEnter', 'onMouseEnter', {
3737
isMouseOver: true,
3838
styleSelector: 'hoverStyle',
3939
})
40-
this._bindMouseEvent('_onMouseOut', 'onMouseOut', {
40+
this._bindMouseEvent('_onMouseLeave', 'onMouseLeave', {
4141
isMouseOver: false,
4242
styleSelector: 'defaultStyle',
4343
})
@@ -59,8 +59,8 @@ class SimpleButton extends Component {
5959
style={buttonStyle}
6060
onMouseDown={this._onMouseDown}
6161
onMouseUp={this._onMouseUp}
62-
onMouseOver={this._onMouseOver}
63-
onMouseOut={this._onMouseOut}>
62+
onMouseEnter={this._onMouseEnter}
63+
onMouseLeave={this._onMouseLeave}>
6464
<div style={this.props.innerStyle}>
6565
{this.props.children}
6666
</div>

‎web/src/scripts/components/buttons/ToolbarButton.jsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -219,19 +219,25 @@ class ToolbarButton extends Component {
219219
display: 'inline-block',
220220
}, false)
221221

222-
if (this.props.theme === THEME.DARK &&
223-
this.props.buttonState === BUTTON_STATE.ACTIVE) {
224-
iconStyle = _.extend({}, iconStyle, {
225-
background: 'white',
226-
})
227-
}
228-
229222
if (this.state.pressed) {
230223
iconStyle = _.extend({}, iconStyle, {
231224
backgroundColor: 'rgb(60,60,60)',
232225
})
233226
}
234227

228+
if (this.props.theme === THEME.DARK &&
229+
this.props.buttonState === BUTTON_STATE.ACTIVE) {
230+
if (this.state.pressed) {
231+
iconStyle = _.extend({}, iconStyle, {
232+
backgroundColor: 'rgb(180,180,180)',
233+
})
234+
} else {
235+
iconStyle = _.extend({}, iconStyle, {
236+
backgroundColor: 'white',
237+
})
238+
}
239+
}
240+
235241
return iconStyle
236242
}
237243

‎web/src/scripts/components/display/Callout.jsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/**
2+
* Copyright (C) 2015 Deco Software Inc.
3+
*
4+
* This program is free software: you can redistribute it and/or modify
5+
* it under the terms of the GNU Affero General Public License, version 3,
6+
* as published by the Free Software Foundation.
7+
*
8+
* This program is distributed in the hope that it will be useful,
9+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
10+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+
* GNU Affero General Public License for more details.
12+
*
13+
* You should have received a copy of the GNU Affero General Public License
14+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
15+
*
16+
*/
17+
18+
import React, { Component, } from 'react'
19+
20+
const styles = {
21+
base: {
22+
borderStyle: 'solid',
23+
borderWidth: 0,
24+
padding: 10,
25+
lineHeight: '18px',
26+
cursor: 'default',
27+
},
28+
info: {
29+
background: 'rgb(245,245,245)',
30+
borderColor: 'rgb(228,228,228)',
31+
color: '#636363',
32+
},
33+
success: {
34+
background: '#BBE9AB',
35+
borderColor: '#A2CD93',
36+
color: '#357B1C',
37+
}
38+
}
39+
40+
export default class extends Component {
41+
42+
static propTypes = {}
43+
44+
static defaultProps = {
45+
type: 'info',
46+
isTop: false,
47+
isBottom: false,
48+
}
49+
50+
constructor(props) {
51+
super(props)
52+
53+
this.state = {}
54+
}
55+
56+
render() {
57+
const {children, type, isTop, isBottom} = this.props
58+
59+
const style = {
60+
...styles.base,
61+
...styles[type],
62+
...({
63+
borderTopWidth: isTop ? 0 : 1,
64+
borderBottomWidth: isBottom ? 0 : 1,
65+
})
66+
}
67+
68+
return (
69+
<div style={style}>
70+
{children}
71+
</div>
72+
)
73+
}
74+
}

‎web/src/scripts/components/display/GithubIcon.jsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* Copyright (C) 2015 Deco Software Inc.
3+
*
4+
* This program is free software: you can redistribute it and/or modify
5+
* it under the terms of the GNU Affero General Public License, version 3,
6+
* as published by the Free Software Foundation.
7+
*
8+
* This program is distributed in the hope that it will be useful,
9+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
10+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+
* GNU Affero General Public License for more details.
12+
*
13+
* You should have received a copy of the GNU Affero General Public License
14+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
15+
*
16+
*/
17+
18+
import React, { Component, } from 'react'
19+
20+
const styles = {
21+
github: {
22+
width: 20,
23+
height: 20,
24+
backgroundSize: '20px 20px',
25+
backgroundPosition: 'center',
26+
backgroundRepeat: 'no-repeat',
27+
backgroundImage: `-webkit-image-set(url('./images/github-logo.png') 1x, url('./images/github-logo@2x.png') 2x)`,
28+
}
29+
}
30+
31+
export default () => <div style={styles.github} />

0 commit comments

Comments
 (0)