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

make sidebar accessible

Browse source
This commit is contained in:
mathuramg 2016-07-12 11:22:27 -04:00
parent d72a6be009
commit 22ac7214bd
3 changed files with 19 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
client/modules/IDE/components/Sidebar.js
View file

@ -11,11 +11,14 @@ function Sidebar(props) {
'sidebar__file-item--selected': file.id === props.selectedFile.id 'sidebar__file-item--selected': file.id === props.selectedFile.id
}); });
return ( return (
<li <li>
className={itemClass} <button
key={file.id} className={itemClass}
onClick={() => props.setSelectedFile(file.id)} key={file.id}
>{file.name}</li> onClick={() => props.setSelectedFile(file.id)}
>{file.name}
</button>
</li>
); );
})} })}
</ul> </ul>

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

@ -9,6 +9,7 @@ $light-primary-text-color: #333;
$light-secondary-text-color: #6b6b6b; $light-secondary-text-color: #6b6b6b;
$light-inactive-text-color: #b5b5b5; $light-inactive-text-color: #b5b5b5;
$light-background-color: #fdfdfd; $light-background-color: #fdfdfd;
$light-sidebar-background: $white;
$light-button-background-color: #f4f4f4; $light-button-background-color: #f4f4f4;
$light-button-color: $black; $light-button-color: $black;
@ -18,7 +19,7 @@ $light-button-background-hover-color: $p5js-pink;
$light-button-background-active-color: #f10046; $light-button-background-active-color: #f10046;
$light-button-hover-color: $white; $light-button-hover-color: $white;
$light-button-active-color: $white; $light-button-active-color: $white;
$light-modal-button-background-color: #e6e6e6; $light-modal-button-background-color: #e6e6e6;
$light-icon-color: #8b8b8b; $light-icon-color: #8b8b8b;
$light-icon-hover-color: $light-primary-text-color; $light-icon-hover-color: $light-primary-text-color;

14
client/styles/components/_sidebar.scss
View file

@ -1,12 +1,16 @@
.sidebar__file-list { .sidebar__file-list {
border-top: 1px solid $ide-border-color; border-top: 1px solid $ide-border-color;
} }
.sidebar__file-item { .sidebar__file-item {
padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem; padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
color: $light-inactive-text-color; color: $light-inactive-text-color;
background-color: $light-sidebar-background;
border: none;
width: 100%;
outline: none;
cursor: pointer;
&--selected {
background-color: $ide-border-color;
}
} }
.sidebar__file-item--selected {
background-color: $ide-border-color;
}