Skip to content

Commit 5e9fbc5

Browse files
FabianKrammFabianKramm
authored
Merge pull request #799 from devspace-cloud/ui-add-github-button
ui: add github star buttons
2 parents 942491b + ae6f5dc commit 5e9fbc5

File tree

5 files changed

+340
-0
lines changed

5 files changed

+340
-0
lines changed

‎ui/src/components/basic/GitHubButton/GitHubButton.module.scss‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
@import '../../../styles/constants';
2+
3+
.github {
4+
height: inherit;
5+
position: relative;
6+
margin-right: -25px;
7+
8+
&:hover {
9+
.githubIcon {
10+
background: $blue-dark !important;
11+
12+
&::before {
13+
opacity: 0 !important;
14+
}
15+
}
16+
17+
.close {
18+
display: block;
19+
}
20+
21+
.githubDetails {
22+
display: block;
23+
}
24+
}
25+
26+
.close {
27+
display: none;
28+
position: absolute;
29+
right: -3px;
30+
top: -3px;
31+
opacity: 0.5;
32+
z-index: 1;
33+
transform: scale(0.7);
34+
35+
&:hover {
36+
opacity: 1;
37+
background: transparent;
38+
}
39+
}
40+
41+
.githubIcon {
42+
display: block;
43+
height: inherit;
44+
padding: 15px;
45+
overflow: hidden;
46+
background: rgba($blue-dark, 0.85);
47+
transform: scale(1);
48+
49+
> img {
50+
height: 100%;
51+
filter: invert(1);
52+
}
53+
54+
&.highlighted {
55+
background: transparent;
56+
57+
&::before {
58+
content: ' ';
59+
position: absolute;
60+
width: 200%;
61+
height: 200%;
62+
left: -50%;
63+
top: -50%;
64+
background: linear-gradient(
65+
124deg,
66+
#ff2400,
67+
#e81d1d,
68+
#e83b1d,
69+
#e8891d,
70+
#dd00f3,
71+
#0a68ff,
72+
#2b1de8,
73+
#dd00f3,
74+
#dd00f3,
75+
#ff2400,
76+
#e81d1d,
77+
#e83b1d
78+
);
79+
background-size: 1800% 1800%;
80+
z-index: -1;
81+
82+
-webkit-animation: rainbow 6s linear infinite;
83+
-z-animation: rainbow 6s linear infinite;
84+
-o-animation: rainbow 6s linear infinite;
85+
animation: rainbow 6s linear infinite;
86+
}
87+
88+
@-webkit-keyframes rainbow {
89+
0% {
90+
background-position: 0% 82%;
91+
}
92+
50% {
93+
background-position: 100% 19%;
94+
transform: rotate(180deg);
95+
}
96+
100% {
97+
background-position: 0% 82%;
98+
transform: rotate(360deg);
99+
}
100+
}
101+
@-moz-keyframes rainbow {
102+
0% {
103+
background-position: 0% 82%;
104+
}
105+
50% {
106+
background-position: 100% 19%;
107+
transform: rotate(180deg);
108+
}
109+
100% {
110+
background-position: 0% 82%;
111+
transform: rotate(360deg);
112+
}
113+
}
114+
@-o-keyframes rainbow {
115+
0% {
116+
background-position: 0% 82%;
117+
}
118+
50% {
119+
background-position: 100% 19%;
120+
transform: rotate(180deg);
121+
}
122+
100% {
123+
background-position: 0% 82%;
124+
transform: rotate(360deg);
125+
}
126+
}
127+
@keyframes rainbow {
128+
0% {
129+
background-position: 0% 82%;
130+
}
131+
50% {
132+
background-position: 100% 19%;
133+
transform: rotate(180deg);
134+
}
135+
100% {
136+
background-position: 0% 82%;
137+
transform: rotate(360deg);
138+
}
139+
}
140+
}
141+
}
142+
143+
.githubDetails {
144+
display: none;
145+
width: 450px;
146+
position: absolute;
147+
top: 70px;
148+
right: 0;
149+
padding: 20px;
150+
background: $blue-dark;
151+
color: #fff;
152+
font-family: Kanit, sans-serif;
153+
text-align: center;
154+
box-shadow: 0 0 10px 7px rgba($blue-dark, 0.2);
155+
156+
&:hover {
157+
display: block;
158+
}
159+
160+
h2 {
161+
font-weight: normal !important;
162+
}
163+
164+
p {
165+
margin-top: 0;
166+
margin-bottom: 10px;
167+
}
168+
169+
.githubProjects {
170+
display: flex;
171+
172+
> div {
173+
flex: 0 1 50%;
174+
margin: 10px;
175+
padding-bottom: 10px;
176+
background: $gray-1;
177+
box-shadow: inset 0 0 3px 2px rgba($blue-dark, 0.2);
178+
}
179+
180+
h3 {
181+
white-space: nowrap;
182+
color: $blue-dark;
183+
}
184+
}
185+
}
186+
}
187+
188+
@media screen and (max-width: 750px) {
189+
.github {
190+
display: none;
191+
}
192+
}

‎ui/src/components/basic/GitHubButton/GitHubButton.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React from 'react';
2+
import styles from './GitHubButton.module.scss';
3+
import CloseButton from 'components/basic/IconButton/CloseButton/CloseButton';
4+
import IconGitHub from 'images/icon-github.svg';
5+
import GitHubStarButton from 'react-github-btn';
6+
7+
interface Props {}
8+
9+
const LOCAL_STORAGE_KEY_HIDE_GITHUB_BUTTON = 'devspace-hide-gh-button';
10+
const LOCAL_STORAGE_KEY_FLATTEN_GITHUB_BUTTON = 'devspace-flatten-gh-button';
11+
12+
class GitHubButton extends React.PureComponent<Props> {
13+
render() {
14+
const hideGithubButtonUntil = localStorage.getItem(LOCAL_STORAGE_KEY_HIDE_GITHUB_BUTTON);
15+
const flattenGithubButtonUntil = localStorage.getItem(LOCAL_STORAGE_KEY_FLATTEN_GITHUB_BUTTON);
16+
17+
if (!hideGithubButtonUntil || parseInt(hideGithubButtonUntil) < Date.now()){
18+
let githubButtonClasses = styles.githubIcon;
19+
20+
if (!flattenGithubButtonUntil || parseInt(flattenGithubButtonUntil) < Date.now()) {
21+
githubButtonClasses += ' ' + styles.highlighted;
22+
}
23+
24+
return (
25+
<div
26+
className={styles.github}
27+
onMouseEnter={() => {
28+
localStorage.setItem(
29+
LOCAL_STORAGE_KEY_FLATTEN_GITHUB_BUTTON,
30+
(Date.now() + 30 * 24 * 60 * 60 * 1000).toString()
31+
);
32+
this.forceUpdate();
33+
}}
34+
>
35+
<CloseButton
36+
className={styles['close']}
37+
filter={false}
38+
white={true}
39+
onClick={() => {
40+
localStorage.setItem(LOCAL_STORAGE_KEY_HIDE_GITHUB_BUTTON, (Date.now() + 30 * 24 * 60 * 60 * 1000).toString());
41+
this.forceUpdate();
42+
}}
43+
/>
44+
<div className={githubButtonClasses}>
45+
<img src={IconGitHub} />
46+
</div>
47+
<div className={styles.githubDetails}>
48+
<h2>Support DevSpace on GitHub!</h2>
49+
<p>Nothing motivates us more to build great features.</p>
50+
<div className={styles.githubProjects}>
51+
<div>
52+
<h3>DevSpace</h3>
53+
<div className="star-button">
54+
<GitHubStarButton
55+
href="https://github.com/devspace-cloud/devspace"
56+
data-size="large"
57+
data-show-count={true}
58+
aria-label="Star devspace-cloud/devspace on GitHub"
59+
>
60+
Star
61+
</GitHubStarButton>
62+
</div>
63+
</div>
64+
<div>
65+
<h3>DevSpace Cloud</h3>
66+
<div className="star-button">
67+
<GitHubStarButton
68+
href="https://github.com/devspace-cloud/devspace-cloud"
69+
data-size="large"
70+
data-show-count={true}
71+
aria-label="Star devspace-cloud/devspace-cloud on GitHub"
72+
>
73+
Star
74+
</GitHubStarButton>
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
);
81+
}
82+
return ""
83+
}
84+
}
85+
86+
export default GitHubButton;

‎ui/src/components/basic/PageLayout/Header/Header.module.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
z-index: 2;
1313
padding-left: 40px;
1414
padding-right: 25px;
15+
z-index: 12;
1516
}
1617

1718
@media screen and (max-width: 570px) {

‎ui/src/components/basic/PageLayout/Header/UserMenu/UserMenu.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import withPopup, { PopupContext } from 'contexts/withPopup/withPopup';
44
import { withRouter, RouteComponentProps } from 'react-router-dom';
55
import ErrorBoundary from 'components/basic/ErrorBoundary/ErrorBoundary';
66
import Tooltip from 'components/basic/Tooltip/Tooltip';
7+
import GitHubButton from 'components/basic/GitHubButton/GitHubButton';
78

89
interface Props extends PopupContext {}
910
interface State {
@@ -23,6 +24,7 @@ class UserMenu extends React.PureComponent<Props & RouteComponentProps, State> {
2324
<a href="https://devspace.cloud/docs" target="_blank" className={styles.link + ' ' + styles.docs} />
2425
</Tooltip>
2526
</div>
27+
<GitHubButton/>
2628
</ErrorBoundary>
2729
);
2830
}

‎ui/src/images/icon-github.svg‎

Lines changed: 59 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)