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>
<TabList>
<div className="preference__subheadings">
<Tab><h4 className="preference__subheading1">General Settings</h4></Tab>
<h4 className="preference__subheading2">Sketch Settings</h4>
<Tab><h4 className="preference__subheading2">Accessibility</h4></Tab>
<Tab><h4 className="preference__subheading">General Settings</h4></Tab>
<Tab><h4 className="preference__subheading">Sketch Settings</h4></Tab>
<Tab><h4 className="preference__subheading">Accessibility</h4></Tab>
</div>
</TabList>
<TabPanel>
@ -235,6 +235,15 @@ class Preferences extends React.Component {
</div>
</div>
</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>
<div className="preference">
<h4 className="preference__title">Accessible text-based canvas</h4>

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

@ -45,7 +45,6 @@
display: flex;
flex-direction: row;
justify-content: space-between;
marhin-left: #{19 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable('heading-text-color');
}
@ -69,7 +68,6 @@
}
}
.preference {
display: flex;
flex-wrap: wrap;
@ -129,7 +127,7 @@
width: #{44 / $base-font-size}rem;
}
.preference__subheading1 {
.preference__subheading {
@include themify() {
color: getThemifyVariable('inactive-text-color');
&:hover {
@ -139,47 +137,12 @@
}
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: #{5 / $base-font-size}rem;
margin-bottom: #{0.1 / $base-font-size}rem;
margin-right: #{60 / $base-font-size}rem;
font-family: Montserrat;
width: #{100 / $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;
width: #{98 / $base-font-size}rem;
}
.preference__vertical-list {
@ -189,6 +152,22 @@
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 {
@extend %hidden-element;
}
@ -228,3 +207,37 @@
.preference__option.preference__canvas:not(:last-child) {
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;
}*//*/*/