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

Adjust styling of find setting switches, update button styling for new file and new folder form

Browse source
This commit is contained in:
Cassie Tarakajian 2020-04-28 17:31:27 -04:00
parent 4b4b31e117
commit d768df040b
7 changed files with 50 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/images/down-arrow.svg
View file

@ -3,8 +3,8 @@
<!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
<!-- <desc>Created with Sketch.</desc> -->
<defs></defs>
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
<g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#333333">
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1.0">
<g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#AAA">
<g id="Icons" transform="translate(16.000000, 1063.000000)">
<polygon id="arrow-shape-copy-2" transform="translate(416.000000, 109.198314) rotate(-180.000000) translate(-416.000000, -109.198314) " points="417.4 106.396628 423 111.996628 421.6 113.396628 416 107.796628 410.4 113.396628 409 111.996628 414.6 106.396628 415.996628 105"></polygon>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 979 B

After

Width:  |  Height:  |  Size: 968 B

4
client/images/up-arrow.svg
View file

@ -3,8 +3,8 @@
<!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
<!-- <desc>Created with Sketch.</desc> -->
<defs></defs>
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
<g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#333333">
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1">
<g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#AAA">
<g id="Icons" transform="translate(16.000000, 1063.000000)">
<polygon id="arrow-shape-copy" points="386.4 106.396628 392 111.996628 390.6 113.396628 385 107.796628 379.4 113.396628 378 111.996628 383.6 106.396628 384.996628 105"></polygon>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 873 B

After

Width:  |  Height:  |  Size: 860 B

7
client/modules/IDE/components/NewFileForm.jsx
View file

@ -33,7 +33,12 @@ class NewFileForm extends React.Component {
{...domOnlyProps(name)}
ref={(element) => { this.fileName = element; }}
/>
<input type="submit" value="Add File" aria-label="add file" />
<input
type="submit"
value="Add File"
aria-label="add file"
className="new-file-form__submit"
/>
</div>
{name.touched && name.error && <span className="form-error">{name.error}</span>}
</form>

7
client/modules/IDE/components/NewFolderForm.jsx
View file

@ -34,7 +34,12 @@ class NewFolderForm extends React.Component {
ref={(element) => { this.fileName = element; }}
{...domOnlyProps(name)}
/>
<input type="submit" value="Add Folder" aria-label="add folder" />
<input
type="submit"
value="Add Folder"
aria-label="add folder"
className="new-folder-form__submit"
/>
</div>
{name.touched && name.error && <span className="form-error">{name.error}</span>}
</form>

15
client/styles/abstracts/_variables.scss
View file

@ -46,6 +46,7 @@ $themes: (
modal-button-color: $dark,
background-color: $lighter,
button-background-color: $light,
button-secondary-background-color: $medium-light,
button-color: $black,
button-border-color: $middle-light,
toolbar-button-color: $p5js-pink,
@ -119,9 +120,10 @@ $themes: (
secondary-text-color: $medium-light,
inactive-text-color: $middle-light,
background-color: $darker,
button-background-color: $lightest,
button-color: $darkest,
button-border-color: $middle-gray,
button-background-color: $dark,
button-secondary-background-color: $medium-dark,
button-color: $light,
button-border-color: $middle-dark,
toolbar-button-color: $p5js-pink,
toolbar-button-background-color: $medium-dark,
button-background-hover-color: $p5js-pink,
@ -191,9 +193,10 @@ $themes: (
secondary-text-color: $lighter,
inactive-text-color: $light,
background-color: $darker,
button-background-color: $white,
button-color: $black,
button-border-color: $middle-gray,
button-background-color: $dark,
button-secondary-background-color: $medium-dark,
button-color: $light,
button-border-color: $middle-dark,
toolbar-button-color: $dark,
toolbar-button-background-color: $medium-light,
button-background-hover-color: $yellow,

26
client/styles/components/_editor.scss
View file

@ -143,22 +143,30 @@ pre.CodeMirror-line {
.CodeMirror-search-modifiers {
display: flex;
justify-content: flex-end;
align-items: center;
}
.CodeMirror-regexp-button,
.CodeMirror-case-button,
.CodeMirror-word-button {
width: 20px;
height: 20px;
@include themify() {
// @extend %button;
padding: #{2 / $base-font-size}rem #{7 / $base-font-size}rem;
border: 2px solid transparent;
&:hover {
border-color: getThemifyVariable("button-border-color");
}
margin-left: #{10 / $base-font-size}rem;
}
width: #{35 / $base-font-size}rem;
height: #{35 / $base-font-size}rem;
& + & {
margin-left: #{10 / $base-font-size}rem;
}
word-break: keep-all;
white-space: nowrap;
@include themify() {
color: getThemifyVariable('inactive-text-color');
}
}
.CodeMirror-regexp-button .label,
@ -169,7 +177,9 @@ pre.CodeMirror-line {
[aria-checked="true"] {
@include themify() {
color: getThemifyVariable('primary-text-color');
color: getThemifyVariable("heavy-text-color");
background-color: getThemifyVariable("button-secondary-background-color");
border-color: getThemifyVariable("button-border-color");
}
}

7
client/styles/components/_modal.scss
View file

@ -45,6 +45,13 @@
flex: 1;
}
input.new-file-form__submit,
input.new-folder-form__submit {
@include themify() {
background-color: getThemifyVariable("button-secondary-background-color");
}
}
.modal__divider {
text-align: center;
margin: #{20 / $base-font-size}rem 0;