r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Adjusted tabs and added serve over https checkbox

Browse source
This commit is contained in:
saumya1906 2017-09-22 19:06:25 +05:30 committed by Cassie Tarakajian
parent 9ae27faf55
commit 9c655122b2
2 changed files with 68 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
client/modules/IDE/components/Preferences.jsx
View file

@ -228,7 +228,21 @@ class Preferences extends React.Component {
<h4 className="preference__title">Add a p5.js or an external library</h4> <h4 className="preference__title">Add a p5.js or an external library</h4>
<h4 className="preference__add__resource">Add a script library resource field</h4> <h4 className="preference__add__resource">Add a script library resource field</h4>
<h4 className="preference__title">Security Protocol</h4> <h4 className="preference__title">Security Protocol</h4>
<h4>Serve over HTTPS</h4> {
this.props.currentUser == null ?
null :
<div className="toolbar__serve-secure">
<input
id="serve-secure"
type="checkbox"
checked={this.props.project.serveSecure || false}
onChange={(event) => {
this.props.setServeSecure(event.target.checked);
}}
/>
</div>
}
<h4 className="serve__over__https">Serve over HTTPS</h4>
</div> </div>
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>
@ -327,7 +341,19 @@ Preferences.propTypes = {
setLintWarning: PropTypes.func.isRequired, setLintWarning: PropTypes.func.isRequired,
// openTab: PropTypes.func.isRequired, // openTab: PropTypes.func.isRequired,
theme: PropTypes.string.isRequired, theme: PropTypes.string.isRequired,
setServeSecure: PropTypes.func.isRequired,
currentUser: PropTypes.string,
project: PropTypes.shape({
name: PropTypes.string.isRequired,
isEditingName: PropTypes.bool,
id: PropTypes.string,
serveSecure: PropTypes.bool,
}).isRequired,
setTheme: PropTypes.func.isRequired setTheme: PropTypes.func.isRequired
}; };
Preferences.defaultProps = {
currentUser: undefined
};
export default Preferences; export default Preferences;

44
client/styles/components/_preferences.scss
View file

@ -42,6 +42,16 @@
} }
} }
.serve__over__https {
text-align: center;
margin-left: #{9 / $base-font-size}rem;
font-width: #{108 / $base-font-size}rem;
font-height: #{15 / $base-font-size}rem;
font-family: Montserrat;
font-size: #{12 / $base-font-size}rem;
margin-top: #{2 / $base-font-size}rem;
}
.preferences__heading { .preferences__heading {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -122,18 +132,43 @@
&:hover { &:hover {
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable('primary-text-color');
} }
} }
margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem; margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;
font-size: #{9 / $base-font-size}rem; font-size: #{9 / $base-font-size}rem;
width: #{44 / $base-font-size}rem; width: #{44 / $base-font-size}rem;
} }
.react-tabs__tab--selected {
@include themify() {
/*color: getThemifyVariable('primary-text-color');*/
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
color: pink;
}
}
.react-tabs__tab--selected .preference__subheading {
@include themify() {
color: black !important;
}
}
.react-tabs__tab {
width: #{110 / $base-font-size}rem;
text-align: center;
color: black;
}
.preference__subheading { .preference__subheading {
@include themify() { @include themify() {
color: getThemifyVariable('inactive-text-color'); color: getThemifyVariable('inactive-text-color');
&:hover { &:hover, &:focus{
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable('primary-text-color');
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color'); cursor: pointer;
}
&:focus {
color: getThemifyVariable('primary-text-color');
cursor: pointer;
} }
} }
font-size: #{12 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
@ -142,8 +177,9 @@
margin-left: #{5 / $base-font-size}rem; margin-left: #{5 / $base-font-size}rem;
margin-bottom: #{0.1 / $base-font-size}rem; margin-bottom: #{0.1 / $base-font-size}rem;
margin-right: #{60 / $base-font-size}rem; margin-right: #{60 / $base-font-size}rem;
padding-right: #{10 / $base-font-size}rem;
font-family: Montserrat; font-family: Montserrat;
width: #{98 / $base-font-size}rem; width: #{110 / $base-font-size}rem;
} }
.preference__vertical-list { .preference__vertical-list {
@ -220,3 +256,5 @@
padding-right: #{14 / $base-font-size}rem; padding-right: #{14 / $base-font-size}rem;
} }