Skip to content

Commit be8d50a

Browse files
raclimraclim
committed
update toolbar arrangement and styling
1 parent 6cd666a commit be8d50a

4 files changed

Lines changed: 73 additions & 59 deletions

File tree

‎client/modules/IDE/components/Header/MobileNav.jsx‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ import { setLanguage } from '../../actions/preferences';
3535
import Overlay from '../../../App/components/Overlay';
3636
import ProjectName from './ProjectName';
3737
import CollectionCreate from '../../../User/components/CollectionCreate';
38-
import { changeVisibility } from '../../actions/project';
3938

4039
const Nav = styled(Menubar)`
4140
background: ${prop('MobilePanel.default.background')};
@@ -220,7 +219,6 @@ const MobileMenuItem = ({ children, ...props }) => (
220219
const MobileNav = () => {
221220
const project = useSelector((state) => state.project);
222221
const user = useSelector((state) => state.user);
223-
const dispatch = useDispatch();
224222

225223
const { t } = useTranslation();
226224

@@ -251,20 +249,6 @@ const MobileNav = () => {
251249

252250
const showOwner = project?.owner && title === project.name && !userIsOwner;
253251

254-
const toggleVisibility = (e) => {
255-
try {
256-
const isChecked = e.target.checked;
257-
dispatch(
258-
changeVisibility(
259-
project.id,
260-
project.name,
261-
isChecked ? 'Private' : 'Public'
262-
)
263-
);
264-
} catch (error) {
265-
console.log(error);
266-
}
267-
};
268252
return (
269253
<Nav>
270254
<LogoContainer>

‎client/modules/IDE/components/Header/Toolbar.jsx‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect, useCallback } from 'react';
1+
import React, { useCallback } from 'react';
22
import classNames from 'classnames';
33
import PropTypes from 'prop-types';
44
import { useTranslation } from 'react-i18next';
@@ -92,6 +92,7 @@ const Toolbar = (props) => {
9292
>
9393
<StopIcon focusable="false" aria-hidden="true" />
9494
</button>
95+
9596
<div className="toolbar__autorefresh">
9697
<input
9798
id="autorefresh"
@@ -112,29 +113,31 @@ const Toolbar = (props) => {
112113

113114
<div className="toolbar__project-name-container">
114115
<ProjectName />
116+
</div>
115117

116-
{showVisibilityDropdown && (
117-
<div className="toolbar__visibility">
118-
<VisibilityDropdown
119-
sketch={project}
120-
onVisibilityChange={handleVisibilityChange}
121-
/>
122-
</div>
123-
)}
118+
<div style={{ flex: 1 }} />
124119

125-
{project?.owner && !userIsOwner && (
126-
<p className="toolbar__project-owner">
127-
{t('Toolbar.By')}{' '}
128-
<Link to={`/${project.owner.username}/sketches`}>
129-
{project.owner.username}
130-
</Link>
131-
</p>
132-
)}
120+
{showVisibilityDropdown && (
121+
<div className="toolbar__visibility">
122+
<VisibilityDropdown
123+
sketch={project}
124+
onVisibilityChange={handleVisibilityChange}
125+
location="toolbar"
126+
/>
127+
</div>
128+
)}
133129

134-
<VersionIndicator />
135-
</div>
130+
{/* Still show owner if not you */}
131+
{project?.owner && !userIsOwner && (
132+
<p className="toolbar__project-owner">
133+
{t('Toolbar.By')}{' '}
134+
<Link to={`/${project.owner.username}/sketches`}>
135+
{project.owner.username}
136+
</Link>
137+
</p>
138+
)}
136139

137-
<div style={{ flex: 1 }} />
140+
<VersionIndicator />
138141

139142
<button
140143
className={preferencesButtonClass}

‎client/modules/User/components/VisibilityDropdown.jsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@ import React, { useState, useRef, useEffect } from 'react';
22
import PropTypes from 'prop-types';
33
import LockIcon from '../../../images/lock.svg';
44
import EarthIcon from '../../../images/earth.svg';
5-
import DownArrowIcon from '../../../images/down-filled-triangle.svg';
65
import CheckmarkIcon from '../../../images/checkmark.svg';
76

8-
const VisibilityDropdown = ({ sketch, onVisibilityChange }) => {
7+
const VisibilityDropdown = ({ sketch, onVisibilityChange, location }) => {
98
const [isOpen, setIsOpen] = useState(false);
109
const dropdownRef = useRef(null);
1110

@@ -56,15 +55,16 @@ const VisibilityDropdown = ({ sketch, onVisibilityChange }) => {
5655
return (
5756
<div className="visibility-dropdown" ref={dropdownRef}>
5857
<button
59-
className="visibility-dropdown__trigger"
58+
className={`visibility-dropdown__trigger ${
59+
location === 'toolbar' ? 'visibility-dropdown__trigger-toolbar' : ''
60+
}`}
6061
onClick={() => setIsOpen(!isOpen)}
6162
aria-haspopup="true"
6263
aria-expanded={isOpen}
6364
aria-label={`Change visibility. Currently ${currentVisibility.label}`}
6465
>
6566
{currentVisibility.icon}
6667
<span className="visibility-label">{currentVisibility.label}</span>
67-
<DownArrowIcon focusable="false" aria-hidden="true" />
6868
</button>
6969

7070
{isOpen && (
@@ -87,7 +87,11 @@ const VisibilityDropdown = ({ sketch, onVisibilityChange }) => {
8787
<CheckmarkIcon focusable="false" aria-hidden="true" />
8888
)}
8989
</div>
90-
<div className="visibility-option__description">
90+
<div
91+
className={`visibility-option__description ${
92+
option.value === sketch.visibility ? 'selected' : ''
93+
}`}
94+
>
9195
{option.description}
9296
</div>
9397
</div>
@@ -98,13 +102,18 @@ const VisibilityDropdown = ({ sketch, onVisibilityChange }) => {
98102
);
99103
};
100104

105+
VisibilityDropdown.defaultProps = {
106+
location: 'sketchlist'
107+
};
108+
101109
VisibilityDropdown.propTypes = {
102110
sketch: PropTypes.shape({
103111
id: PropTypes.string.isRequired,
104112
name: PropTypes.string.isRequired,
105113
visibility: PropTypes.string.isRequired
106114
}).isRequired,
107-
onVisibilityChange: PropTypes.func.isRequired
115+
onVisibilityChange: PropTypes.func.isRequired,
116+
location: PropTypes.string
108117
};
109118

110119
export default VisibilityDropdown;

‎client/styles/components/_visibility-dropdown.scss‎

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,53 @@
88
.visibility-dropdown__trigger {
99
display: flex;
1010
align-items: center;
11-
gap: #{math.div(8, $base-font-size)}rem;
12-
padding: #{math.div(8, $base-font-size)}rem #{math.div(12, $base-font-size)}rem;
11+
gap: #{math.div(3, $base-font-size)}rem;
12+
margin-right: 0.5rem;
13+
padding: 0.5rem 0.7rem;
14+
border-radius: #{math.div(15, $base-font-size)}rem;
1315
cursor: pointer;
1416
font-size: #{math.div(14, $base-font-size)}rem;
1517
transition: all 0.2s ease;
16-
min-width: #{math.div(120, $base-font-size)}rem;
18+
}
1719

20+
.visibility-dropdown__trigger-toolbar {
1821
@include themify() {
19-
color: getThemifyVariable("primary-text-color");
22+
color: getThemifyVariable("toolbar-button-color");
23+
background-color: getThemifyVariable("toolbar-button-background-color");
24+
25+
& g,
26+
& path {
27+
fill: getThemifyVariable('toolbar-button-color');
28+
}
29+
}
30+
31+
&:hover {
32+
@include themify() {
33+
background-color: getThemifyVariable("button-background-hover-color") !important;
34+
color: getThemifyVariable("button-hover-color") !important;
35+
36+
& g,
37+
& path {
38+
fill: getThemifyVariable('button-hover-color') !important;
39+
}
40+
}
2041
}
2142
}
2243

2344
.visibility-dropdown__menu {
2445
position: absolute;
2546
top: 100%;
26-
left: 0;
2747
right: 0;
2848
z-index: 10000000;
2949
margin-top: #{math.div(4, $base-font-size)}rem;
3050
min-width: #{math.div(233, $base-font-size)}rem;
3151
overflow: hidden;
52+
border-radius: #{math.div(6, $base-font-size)}rem;
3253

3354
@include themify() {
3455
border: 1px solid getThemifyVariable("modal-border-color");
35-
box-shadow: 0 #{math.div(4, $base-font-size)}rem #{math.div(12, $base-font-size)}rem rgba(0, 0, 0, 0.15);
56+
color: getThemifyVariable("primary-text-color");
57+
background-color: getThemifyVariable("modal-background-color");
3658
}
3759
}
3860

@@ -54,20 +76,19 @@
5476

5577
&:hover {
5678
@include themify() {
57-
background-color: getThemifyVariable("file-selected-color") !important;
79+
background-color: getThemifyVariable("button-background-hover-color") !important;
80+
color: getThemifyVariable("button-hover-color") !important;
81+
82+
& g {
83+
fill: getThemifyVariable('button-hover-color') !important;
84+
}
5885
}
5986
}
6087

6188
&.selected {
6289
@include themify() {
6390
background-color: getThemifyVariable("table-row-stripe-color");
6491
}
65-
66-
// &:hover {
67-
// @include themify() {
68-
// background-color: getThemifyVariable("table-row-stripe-color") !important;
69-
// }
70-
// }
7192
}
7293
}
7394

@@ -87,16 +108,13 @@
87108
.visibility-option__description {
88109
font-size: #{math.div(12, $base-font-size)}rem;
89110
margin-left: #{math.div(20, $base-font-size)}rem;
90-
91-
@include themify() {
92-
color: getThemifyVariable("inactive-text-color");
93-
}
94111
}
95112

96113
.visibility-icon {
97114
width: #{math.div(16, $base-font-size)}rem;
98115
height: #{math.div(16, $base-font-size)}rem;
99116
flex-shrink: 0;
117+
padding-bottom: 1px;
100118
}
101119

102120
.dropdown-arrow {

0 commit comments

Comments
 (0)