UI changes to match the calliope design.

This commit is contained in:
Sam El-Husseini 2016-10-27 16:15:44 -07:00
parent e571bec213
commit 749ba6b984
32 changed files with 208 additions and 22 deletions

BIN
docs/static/blockly/media/1x1.gif vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 B

BIN
docs/static/blockly/media/click.mp3 vendored Normal file

Binary file not shown.

BIN
docs/static/blockly/media/click.ogg vendored Normal file

Binary file not shown.

BIN
docs/static/blockly/media/click.wav vendored Normal file

Binary file not shown.

BIN
docs/static/blockly/media/delete.mp3 vendored Normal file

Binary file not shown.

BIN
docs/static/blockly/media/delete.ogg vendored Normal file

Binary file not shown.

BIN
docs/static/blockly/media/delete.wav vendored Normal file

Binary file not shown.

BIN
docs/static/blockly/media/disconnect.mp3 vendored Normal file

Binary file not shown.

BIN
docs/static/blockly/media/disconnect.ogg vendored Normal file

Binary file not shown.

BIN
docs/static/blockly/media/disconnect.wav vendored Normal file

Binary file not shown.

BIN
docs/static/blockly/media/handclosed.cur vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 326 B

BIN
docs/static/blockly/media/handdelete.cur vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 766 B

BIN
docs/static/blockly/media/handopen.cur vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 B

BIN
docs/static/blockly/media/quote0.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 796 B

BIN
docs/static/blockly/media/quote1.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 738 B

BIN
docs/static/blockly/media/sprites.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

74
docs/static/blockly/media/sprites.svg vendored Normal file
View File

@ -0,0 +1,74 @@
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="96px" height="124px">
<style type="text/css">
#background {
fill: none;
}
.arrows {
fill: #000;
stroke: none;
}
.selected>.arrows {
fill: #fff;
}
.checkmark {
fill: #000;
font-family: sans-serif;
font-size: 10pt;
text-anchor: middle;
}
.trash {
fill: #BDCECF;
}
.zoom {
fill: none;
stroke: #BDCECF;
stroke-width: 2;
stroke-linecap: round;
}
.zoom>.center {
fill: #BDCECF;
stroke-width: 0;
}
</style>
<rect id="background" width="96" height="124" x="0" y="0" />
<g>
<path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
<path class="arrows" d="M 17.5,3 30.5,3 24,14.26 z" />
<path class="arrows" d="M 35,1.5 35,14.5 46.26,8 z" />
</g>
<g class="selected" transform="translate(0, 16)">
<path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
<path class="arrows" d="M 17.5,3 30.5,3 24,14.26 z" />
<path class="arrows" d="M 35,1.5 35,14.5 46.26,8 z" />
</g>
<text class="checkmark" x="55.5" y="28">&#10003;</text>
<g class="trash">
<path d="M 2,41 v 6 h 42 v -6 h -10.5 l -3,-3 h -15 l -3,3 z" />
<rect width="36" height="20" x="5" y="50" />
<rect width="36" height="42" x="5" y="50" rx="4" ry="4" />
</g>
<g class="zoom">
<circle r="11.5" cx="16" cy="108" />
<circle r="4.3" cx="16" cy="108" class="center" />
<path d="m 28,108 h3" />
<path d="m 1,108 h3" />
<path d="m 16,120 v3" />
<path d="m 16,93 v3" />
</g>
<g class="zoom">
<circle r="15" cx="48" cy="108" />
<path d="m 48,101.6 v12.8" />
<path d="m 41.6,108 h12.8" />
</g>
<g class="zoom">
<circle r="15" cx="80" cy="108" />
<path d="m 73.6,108 h12.8" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -4,7 +4,7 @@
/** /**
* Provides access to basic micro:bit functionality. * Provides access to basic micro:bit functionality.
*/ */
//% color=#0078D7 weight=100 //% color=#54C9C9 weight=100
namespace basic { namespace basic {
/** /**
* Sets the color on the build-in LED. Set to 0 to turn off. * Sets the color on the build-in LED. Set to 0 to turn off.

View File

@ -34,7 +34,7 @@ enum Colors {
/** /**
* Provides access to basic micro:bit functionality. * Provides access to basic micro:bit functionality.
*/ */
//% color=#0078D7 weight=100 //% color=#54C9C9 weight=100
namespace basic { namespace basic {
/** /**
* Converts the color name to a number * Converts the color name to a number

View File

@ -1,7 +1,7 @@
/** /**
* Runtime and event utilities. * Runtime and event utilities.
*/ */
//% weight=1 color="#333333" //% weight=1 color="#42495F"
//% advanced=true //% advanced=true
namespace control { namespace control {

View File

@ -108,7 +108,7 @@ enum class Gesture {
SixG = MICROBIT_ACCELEROMETER_EVT_6G SixG = MICROBIT_ACCELEROMETER_EVT_6G
}; };
//% color=300 weight=99 //% color=#C90072 weight=99
namespace input { namespace input {
/** /**
* Do something when a button (``A``, ``B`` or both ``A+B``) is pressed * Do something when a button (``A``, ``B`` or both ``A+B``) is pressed

View File

@ -1,7 +1,7 @@
/** /**
* Events and data from sensors * Events and data from sensors
*/ */
//% color=#B4009E weight=99 //% color=#C90072 weight=99
namespace input { namespace input {
/** /**
* Attaches code to run when the screen is facing up. * Attaches code to run when the screen is facing up.

View File

@ -8,7 +8,7 @@ enum class DisplayMode_ {
// TODO DISPLAY_MODE_BLACK_AND_WHITE_LIGHT_SENSE // TODO DISPLAY_MODE_BLACK_AND_WHITE_LIGHT_SENSE
}; };
//% color=3 weight=35 //% color=#8169E6 weight=35
namespace led { namespace led {
/** /**

View File

@ -1,7 +1,7 @@
/** /**
* Control of the LED screen. * Control of the LED screen.
*/ */
//% color=#5C2D91 weight=97 //% color=#8169E6 weight=97
namespace led { namespace led {
// what's the current high value // what's the current high value

View File

@ -3,7 +3,7 @@
/** /**
* Blocks to control the onboard motors * Blocks to control the onboard motors
*/ */
//% weight=30 //% color=#008272 weight=30
namespace motors { namespace motors {
/** /**
* Controls the power sent to a single motor * Controls the power sent to a single motor

View File

@ -125,7 +125,7 @@ enum BeatFraction {
/** /**
* Generation of music tones through pin ``P0``. * Generation of music tones through pin ``P0``.
*/ */
//% color=#D83B01 weight=98 //% color=#DF4600 weight=98
namespace music { namespace music {
let beatsPerMinute: number = 120; let beatsPerMinute: number = 120;

View File

@ -126,7 +126,7 @@ declare interface Image {
/** /**
* Provides access to basic micro:bit functionality. * Provides access to basic micro:bit functionality.
*/ */
//% color=#0078D7 weight=100 //% color=#54C9C9 weight=100
declare namespace basic { declare namespace basic {
/** /**
@ -218,7 +218,7 @@ declare namespace basic {
//% color=300 weight=99 //% color=#C90072 weight=99
declare namespace input { declare namespace input {
/** /**
@ -432,7 +432,7 @@ declare namespace control {
//% color=3 weight=35 //% color=#8169E6 weight=35
declare namespace led { declare namespace led {
/** /**
@ -513,7 +513,7 @@ declare namespace led {
/** /**
* Blocks to control the onboard motors * Blocks to control the onboard motors
*/ */
//% weight=30 //% color=#008272 weight=30
declare namespace motors { declare namespace motors {
/** /**

View File

@ -219,8 +219,6 @@
}, },
"appTheme": { "appTheme": {
"accentColor": "#249899", "accentColor": "#249899",
"downloadClass": "orange",
"invertedMenu": true,
"defaultLocale": "de", "defaultLocale": "de",
"logoUrl": "https://calliope.cc/about", "logoUrl": "https://calliope.cc/about",
"logo": "./static/Calliopeminieditor.svg", "logo": "./static/Calliopeminieditor.svg",
@ -350,6 +348,12 @@
"browser": "*", "browser": "*",
"path": "/static/mb/device/usb-windows-sendto.jpg" "path": "/static/mb/device/usb-windows-sendto.jpg"
} }
] ],
"invertedMenu": true,
"invertedToolbox": true,
"blocklyOptions": {
"media": "./static/blockly/media/",
"trashcan": true
}
} }
} }

View File

@ -1,3 +1,13 @@
/******************************* /*******************************
User Variable Overrides User Variable Overrides
*******************************/ *******************************/
@invertedBackground: #525A67;
@dropdownMenuDistance: 0px;
/*******************************
PXT Theme Overrides
*******************************/
@mainMenuHeight: 5rem;
@mainMenuMinHeight: (@itemVerticalPadding * 2) + 2em;

View File

@ -1,3 +1,15 @@
/******************************* /*******************************
Site Overrides Site Overrides
*******************************/ *******************************/
.ui.inverted.input input {
background:#424852;
border-radius: 20px;
border: 0px !important;
padding: 0.2em !important;
padding-left: 0.6em !important;
}
.rtl .ui.inverted.input input {
padding-right: 0.6em !important;
}

View File

@ -7,13 +7,20 @@
@secondaryColor: #43C9C9; @secondaryColor: #43C9C9;
@red:#E81123; @red:#E81123;
@orange:#D78C01; @orange:#DF4600;
@yellow:#EEDA47; @yellow:#F4C918;
@green:#3FC863; @green:#3FC863;
@teal:#008272; @teal:#008272;
@blue:#0078D7; @blue:#54C9C9;
@violet:#CF0071; @violet:#C90072;
@purple:#8073E5; @purple:#8169E6;
@pink:#E2008C; @pink:#E2008C;
@brown:#6B5B4C; @brown:#6B5B4C;
@grey:#515B67; @grey:#42495F;
/*******************************
PXT Overrides
*******************************/
@backgroundColor: #FDFDFA;
@blocklyToolboxColor: #F6F4E6;

View File

@ -1,2 +1,81 @@
/* Import all components */ /* Import all components */
@import 'semantic'; @import 'semantic';
@import 'themes/default/globals/site.variables';
@import 'themes/pxt/globals/site.variables';
@import 'site/globals/site.variables';
/* Reference import */
@import (reference) "semantic.less";
.openproject {
background: #4ECC60 !important;
}
.blocks-menuitem, .javascript-menuitem {
background: #738791 !important;
}
.help-dropdown-menuitem, .more-dropdown-menuitem {
background: #424955 !important;
margin-right:0px !important;
}
.play-button {
&:extend(.ui all);
&:extend(.button all);
&:extend(.blue all);
}
.download-button {
&:extend(.ui all);
&:extend(.button all);
&:extend(.yellow all);
}
/* This removes the margin between the blockly categories to form connected pills */
.blocklyTreeRow {
width: 230px;
border-radius:5px;
}
/* This removes any padding at the top of the toolbox */
.blocklyTreeRoot {
padding: 0px !important;
}
/* Blockly Text */
.blocklyTreeLabel {
font-family: "Gotham SSm A","Gotham SSm B","Montserrat","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif !important;
}
.blocklyTreeLabel {
font-size:1rem !important;
}
.blocklyFlyoutBackground {
fill: #FDFDE2;
}
.blocklyToolboxDiv {
/*left:30px !important;*/
padding:7px;
}
@media only screen and (max-width: @largestMobileScreen) {
.blocklyTreeLabel {
font-size: 0.5rem !important;
}
}
/*******************************
Menu Bar
*******************************/
#menubar {
height: 5rem;
}
#fileNameInput {
width: 350px;
}