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

Issue 266: Sketch Settings design

This commit is contained in:
saumya1906 2017-08-16 23:53:13 +05:30 committed by Cassie Tarakajian
parent 6b6ff7ca22
commit 67dd614651
2 changed files with 65 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/modules/IDE/components/Preferences.jsx
View File

@ -75,9 +75,9 @@ class Preferences extends React.Component {
<Tabs> <Tabs>
<TabList> <TabList>
<div className="preference__subheadings"> <div className="preference__subheadings">
<Tab><h4 className="preference__subheading1">General Settings</h4></Tab> <Tab><h4 className="preference__subheading">General Settings</h4></Tab>
<h4 className="preference__subheading2">Sketch Settings</h4> <Tab><h4 className="preference__subheading">Sketch Settings</h4></Tab>
<Tab><h4 className="preference__subheading2">Accessibility</h4></Tab> <Tab><h4 className="preference__subheading">Accessibility</h4></Tab>
</div> </div>
</TabList> </TabList>
<TabPanel> <TabPanel>
@ -235,6 +235,15 @@ class Preferences extends React.Component {
</div> </div>
</div> </div>
</TabPanel> </TabPanel>
<TabPanel>
<br></br>
<div className="preference">
<h4 className="preference__title">Add a p5.js or an external library</h4>
<h4 className="preference__sketch1">Add a script library resource field</h4>
<h4 className="preference__title">Security Protocol</h4>
<h4>Serve over HTTPS</h4>
</div>
</TabPanel>
<TabPanel> <TabPanel>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Accessible text-based canvas</h4> <h4 className="preference__title">Accessible text-based canvas</h4>

93
client/styles/components/_preferences.scss
View File

@ -45,7 +45,6 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
marhin-left: #{19 / $base-font-size}rem;
@include themify() { @include themify() {
color: getThemifyVariable('heading-text-color'); color: getThemifyVariable('heading-text-color');
} }
@ -69,7 +68,6 @@
} }
} }
.preference { .preference {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -129,7 +127,7 @@
width: #{44 / $base-font-size}rem; width: #{44 / $base-font-size}rem;
} }
.preference__subheading1 { .preference__subheading {
@include themify() { @include themify() {
color: getThemifyVariable('inactive-text-color'); color: getThemifyVariable('inactive-text-color');
&:hover { &:hover {
@ -139,47 +137,12 @@
} }
font-size: #{12 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
height: #{25 / $base-font-size}rem; height: #{25 / $base-font-size}rem;
text-align: left;
margin-top: #{30 / $base-font-size}rem; margin-top: #{30 / $base-font-size}rem;
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;
font-family: Montserrat; font-family: Montserrat;
width: #{100 / $base-font-size}rem; width: #{98 / $base-font-size}rem;
}
.preference__subheading2 {
@include themify() {
color: getThemifyVariable('inactive-text-color');
&:hover {
color: getThemifyVariable('primary-text-color');
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
}
}
font-size: #{12 / $base-font-size}rem;
height: #{25 / $base-font-size}rem;
text-align: left;
margin-top: #{30 / $base-font-size}rem;
margin-left: #{46 / $base-font-size}rem;
margin-bottom: #{0.1 / $base-font-size}rem;
font-family: Montserrat;
}
.preference__subheading3 {
@include themify() {
color: getThemifyVariable('inactive-text-color');
&:hover {
color: getThemifyVariable('primary-text-color');
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
}
}
font-size: #{12 / $base-font-size}rem;
height: #{25 / $base-font-size}rem;
text-align: left;
margin-top: #{30 / $base-font-size}rem;
margin-left: #{48 / $base-font-size}rem;
margin-bottom: #{0.1 / $base-font-size}rem;
width: #{78 / $base-font-size}rem;
font-family: Montserrat;
} }
.preference__vertical-list { .preference__vertical-list {
@ -189,6 +152,22 @@
padding-left: #{25 / $base-font-size}rem; padding-left: #{25 / $base-font-size}rem;
} }
.preference__sketch1{
width: #{601 / $base-font-size}rem;
height: #{100 / $base-font-size}rem;
font-family: Montserrat;
font-size: #{14 / $base-font-size}rem;
line-height: 1.43;
text-align: left;
margin-left: #{5 / $base-font-size}rem;
margin-top: #{40 / $base-font-size}rem;
margin-bottom: #{10 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable('inactive-text-color');
border-bottom: 1px dashed getThemifyVariable('button-border-color');
}
}
.preference__radio-button { .preference__radio-button {
@extend %hidden-element; @extend %hidden-element;
} }
@ -228,3 +207,37 @@
.preference__option.preference__canvas:not(:last-child) { .preference__option.preference__canvas:not(:last-child) {
padding-right: #{14 / $base-font-size}rem; padding-right: #{14 / $base-font-size}rem;
} }
/*.tooltip {
display: inline-block;
}
/* Tooltip text */
/*.tooltip .tooltiptext {
margin-top: #{0 / $base-font-size}rem;
margin-bottom: #{50 / $base-font-size}rem;
margin-left: #{130 / $base-font-size}rem;
visibility: hidden;
width: 120px;
height: 120px;
border-color: $p5js-pink transparent transparent $p5js-pink;
padding: 5px 0;
border-radius: 5px;
webkit-border-radius: 20px;
moz-border-radius: 20px;
text-align: center;
color: $white;
background-color: $p5js-pink;
vertical-align: top;
/* Position the tooltip text - see examples below! */
/* content: ' ';
position: absolute;
left: #{15 / $base-font-size}rem;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}
/* Show the tooltip text when you mouse over the tooltip container */
/*.tooltip:hover .tooltiptext {
visibility: visible;
}*//*/*/