ScCN/scratch-gui
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update design for editor tabs with icons, changing blocks to code.

Browse Source 
Resolves https://github.com/LLK/scratch-gui/issues/1713
This commit is contained in:
Paul Kaplan committed 2018-04-04 09:20:30 -04:00
1 parent ebcd2ab222
commit 0753d0794d
7 files changed
+116 -14
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/gui/gui.css
+46 -7
View File
@@ -57,10 +57,13 @@
.tab {
flex-grow: 1;
height: 80%;
margin-left: 1px;
margin-left: -0.5rem;
border-radius: $space $space 0 0;
border: none;
border-radius: 1rem 1rem 0 0;
border: $ui-pane-border 1px solid;
padding: 0.125rem 1rem 0;
font-size: 0.7rem;
background-color: #F6F8FA;
color: #9AA1B5;
@@ -72,13 +75,49 @@
user-select: none;
}
.tab.is-selected {
/* Use z-indices to force left-on-top for tabs */
.tab:nth-of-type(1) {
margin-left: 0;
z-index: 3;
}
.tab:nth-of-type(2) {
z-index: 2;
}
.tab:nth-of-type(3) {
z-index: 1;
color: #40B9F5;
background-color: #FFFFFF;
border-bottom: $ui-background-blue 1px solid;
}
.tab.is-selected {
color: $motion-primary;
background-color: #FFFFFF;
z-index: 4; /* Make sure selected is always above */
}
.tab img {
margin-right: 0.125rem;
filter: grayscale(100%);
}
.tab.is-selected img {
filter: none;
}
/* Tab style overrides from react-tabs */
.tab.is-selected:after {
display: none;
}
.tab.is-selected:focus {
outline: none;
box-shadow: none;
border-color: $ui-pane-border;
}
.tab.is-selected:focus:after {
display: none;
}
/* Body of the tabs */
.tabs {
position: relative;
flex-grow: 1;
src/components/gui/gui.jsx
+37 -4
View File
@@ -1,7 +1,7 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import {defineMessages, injectIntl, intlShape} from 'react-intl';
import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
import MediaQuery from 'react-responsive';
import tabStyles from 'react-tabs/style/react-tabs.css';
@@ -25,6 +25,9 @@ import WebGlModal from '../../containers/webgl-modal.jsx';
import layout from '../../lib/layout-constants.js';
import styles from './gui.css';
import addExtensionIcon from './icon--extensions.svg';
import codeIcon from './icon--code.svg';
import costumesIcon from './icon--costumes.svg';
import soundsIcon from './icon--sounds.svg';
const messages = defineMessages({
addExtension: {
@@ -110,9 +113,39 @@ const GUIComponent = props => {
onSelect={onActivateTab}
>
<TabList className={tabClassNames.tabList}>
<Tab className={tabClassNames.tab}>Blocks</Tab>
<Tab className={tabClassNames.tab}>Costumes</Tab>
<Tab className={tabClassNames.tab}>Sounds</Tab>
<Tab className={tabClassNames.tab}>
<img
draggable={false}
src={codeIcon}
/>
<FormattedMessage
defaultMessage="Code"
description="Button to get to the code panel"
id="gui.gui.codeTab"
/>
</Tab>
<Tab className={tabClassNames.tab}>
<img
draggable={false}
src={costumesIcon}
/>
<FormattedMessage
defaultMessage="Costumes"
description="Button to get to the costumes panel"
id="gui.gui.costumesTab"
/>
</Tab>
<Tab className={tabClassNames.tab}>
<img
draggable={false}
src={soundsIcon}
/>
<FormattedMessage
defaultMessage="Sounds"
description="Button to get to the sounds panel"
id="gui.gui.soundsTab"
/>
</Tab>
</TabList>
<TabPanel className={tabClassNames.tabPanel}>
<Box className={styles.blocksWrapper}>
src/components/gui/icon--code.svg
+10
View File
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
<title>Code V2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Code-V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M15,14.51 C15,14.786 14.776,15.01 14.5,15.01 L9.197,15.01 C9.064,15.01 8.937,15.062 8.844,15.156 L8.146,15.854 C8.053,15.947 7.926,16 7.793,16 L6.207,16 C6.074,16 5.947,15.947 5.854,15.854 L5.156,15.156 C5.062,15.062 4.936,15.01 4.803,15.01 L3.5,15.01 C3.224,15.01 3,14.786 3,14.51 L3,11.5 C3,11.224 3.224,11 3.5,11 L4.793,11 C4.926,11 5.053,11.053 5.146,11.146 L5.854,11.854 C5.947,11.947 6.074,12 6.207,12 L7.793,12 C7.926,12 8.053,11.947 8.146,11.854 L8.854,11.146 C8.947,11.053 9.074,11 9.207,11 L14.5,11 C14.776,11 15,11.224 15,11.5 L15,14.51 Z M17,9.51 C17,9.786 16.776,10.01 16.5,10.01 L9.197,10.01 C9.064,10.01 8.937,10.062 8.844,10.156 L8.146,10.854 C8.053,10.947 7.926,11 7.793,11 L6.207,11 C6.074,11 5.947,10.947 5.854,10.854 L5.156,10.156 C5.062,10.062 4.936,10.01 4.803,10.01 L3.5,10.01 C3.224,10.01 3,9.786 3,9.51 L3,6.5 C3,6.224 3.224,6 3.5,6 L4.793,6 C4.926,6 5.053,6.053 5.146,6.146 L5.854,6.854 C5.947,6.947 6.074,7 6.207,7 L7.793,7 C7.926,7 8.053,6.947 8.146,6.854 L8.854,6.146 C8.947,6.053 9.074,6 9.207,6 L16.5,6 C16.776,6 17,6.224 17,6.5 L17,9.51 Z" id="Code" fill="#4C97FF"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

src/components/gui/icon--costumes.svg
+10
View File
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
<title>Paint Editor V1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Paint-Editor-V1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M16.1998226,6.58685277 C15.5417294,7.94213763 14.5662678,9.50539101 13.6457617,10.6638734 C12.8750097,11.639511 12.2567593,12.2117734 11.6659868,12.4909258 C11.5972923,12.5341944 11.5299717,12.5481521 11.4461644,12.5481521 C11.3912089,12.5481521 11.3362533,12.5341944 11.2675588,12.5048834 C11.1439087,12.4644063 11.0339976,12.366703 10.979042,12.2410844 C10.8141752,11.8628329 10.580614,11.5432035 10.2659932,11.2905705 C9.94862474,11.053291 9.59141344,10.871842 9.18062043,10.7741386 C9.05559648,10.7462234 8.93194641,10.6638734 8.86325193,10.5368591 C8.79455745,10.4251981 8.76845354,10.2856219 8.79455745,10.1474415 C8.9594242,9.50539101 9.38532999,8.75167956 10.1272304,7.81651905 C11.5849273,5.94480227 14.4975733,3.16863175 15.9113058,3.01370218 C16.2959949,2.9578717 16.5158172,3.08349028 16.6532062,3.19515123 C17.0117914,3.50221886 17.3690027,4.17358036 16.1998226,6.58685277 Z M10.2654437,13.9990466 C10.3478771,14.6969276 10.1692714,15.3808509 9.74199174,15.9251981 C9.37241543,16.412319 8.85033737,16.7486977 8.25956482,16.8882738 C8.23208703,16.9022315 8.19087034,16.9161891 8.16339255,16.9161891 L8.0246297,16.9301467 C7.76496455,16.9720196 7.51766442,16.9999348 7.2689904,16.9999348 C5.29196321,16.9999348 3.90296079,15.6586076 3.35477883,14.7806733 C3.14732149,14.4317328 2.83270076,13.7896823 3.10747869,13.3849114 C3.17617317,13.287208 3.36714383,13.0778437 3.77931072,13.1615894 C5.08450588,13.4407418 5.55162835,12.8545218 5.63543562,12.7428609 C6.51472499,11.5843784 8.14965365,11.3750141 9.27486926,12.2403866 C9.82579901,12.6730728 10.1816364,13.3011656 10.2654437,13.9990466 Z" id="Fill-4" fill="#4C97FF"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

src/components/gui/icon--sounds.svg
+10
View File
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
<title>Sounds V1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Sounds-V1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M12.6307801,13.637142 C12.480284,13.637142 12.3255684,13.5975477 12.1849178,13.5141169 C11.7671856,13.2652385 11.6279416,12.7236452 11.8754866,12.303663 C12.346666,11.5004646 12.346666,10.5049512 11.8754866,9.70316691 C11.6279416,9.28177059 11.7671856,8.74017733 12.1849178,8.49129896 C12.6068695,8.24524876 13.1441547,8.38382876 13.3888867,8.80239692 C14.1863754,10.1599153 14.1863754,11.8455006 13.3888867,13.2030189 C13.225732,13.4830071 12.9317723,13.637142 12.6307801,13.637142 Z M15.2566363,15.0553244 C15.1061402,15.0553244 14.950018,15.0157301 14.810774,14.9322993 C14.3930418,14.683421 14.2537977,14.1418277 14.5013427,13.7218455 C15.4873032,12.0447447 15.4873032,9.96038836 14.5013427,8.28470164 C14.2537977,7.8647194 14.3930418,7.32171206 14.810774,7.07283369 C15.2299126,6.82819757 15.7671978,6.96536349 16.0147428,7.38393165 C17.3284191,9.61535244 17.3284191,12.3897806 16.0147428,14.6212014 C15.8501816,14.9011895 15.5576285,15.0553244 15.2566363,15.0553244 Z M10.3785286,6.67858774 L10.3785286,15.3200405 C10.3785286,16.3438356 9.17174676,16.8797725 8.41926624,16.1897007 L6.79475223,14.6978446 C6.21949142,14.1703921 5.46982391,13.8776773 4.69061978,13.8776773 L4.40650564,13.8776773 C3.63011453,13.8776773 3,13.2455828 3,12.4635956 L3,9.5505875 C3,8.77001445 3.63011453,8.13650589 4.40650564,8.13650589 L4.67514822,8.13650589 C5.45435235,8.13650589 6.20401986,7.84379099 6.77928066,7.31633855 L8.41926624,5.81034163 C9.17174676,5.1202698 10.3785286,5.65620673 10.3785286,6.67858774 Z" id="Combined-Shape" fill="#4C97FF"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

test/integration/blocks.test.js
+2 -2
View File
@@ -29,7 +29,7 @@ describe('Working with the blocks', () => {
test('Blocks report when clicked in the toolbox', async () => {
await loadUri(uri);
await clickXpath('//button[@title="tryit"]');
await clickText('Blocks');
await clickText('Code');
await clickText('Operators', scope.blocksTab);
await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
await clickText('join', scope.blocksTab); // Click "join <hello> <world>" block
@@ -58,7 +58,7 @@ describe('Working with the blocks', () => {
test('Creating variables', async () => {
await loadUri(uri);
await clickXpath('//button[@title="tryit"]');
await clickText('Blocks');
await clickText('Code');
await clickText('Variables', scope.blocksTab);
await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
test/integration/localization.test.js
+1 -1
View File
@@ -29,7 +29,7 @@ describe('Localization', () => {
test.skip('Localization', async () => {
await loadUri(uri);
await clickXpath('//button[@title="tryit"]');
await clickText('Blocks');
await clickText('Code');
await clickXpath('//button[@title="Add Extension"]');
await clickText('Pen', scope.modal); // Modal closes
await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation