diff options
Diffstat (limited to 'lib/sugar-web/graphics')
31 files changed, 2685 insertions, 0 deletions
diff --git a/lib/sugar-web/graphics/README.md b/lib/sugar-web/graphics/README.md new file mode 100644 index 0000000..e3b7091 --- /dev/null +++ b/lib/sugar-web/graphics/README.md @@ -0,0 +1,39 @@ +Sugar Graphics +============== + +Sugar widgets and graphics, implementing the [Sugar Interface +Guidelines](http://wiki.sugarlabs.org/go/Human_Interface_Guidelines). + +Modifying the CSS +----------------- + +We use [LESS](http://lesscss.org) and then compile the CSS. This is +to be able to use calculations and variables for colors and measures. +And to be able to output different CSS files for different screen +resolutions, which is planned. + +To compile the CSS do: + + lessc graphics/css/sugar.less graphics/css/sugar.css + +Be sure to compile it before commit. + +The grid helper +--------------- + +The grid is a visual debug tool that allows you to check if the +elements have the correct size. To activate the grid, open the +inspector console and paste the following. + +If RequireJS is not in the page head (ie. in the sugar-web-samples), +load it: + + var script = document.createElement('script'); + script.src = 'lib/require.js'; + document.head.appendChild(script); + + requirejs.config({ baseUrl: "lib" }); + +Then do: + + require(["sugar-web/graphics/grid"], function (grid) { grid.addGrid(11) }); diff --git a/lib/sugar-web/graphics/activitypalette.js b/lib/sugar-web/graphics/activitypalette.js new file mode 100644 index 0000000..aca036e --- /dev/null +++ b/lib/sugar-web/graphics/activitypalette.js @@ -0,0 +1,70 @@ +define(["sugar-web/graphics/palette"], function (palette) { + + var activitypalette = {}; + + activitypalette.ActivityPalette = function (activityButton, + datastoreObject) { + + palette.Palette.call(this, activityButton); + + var activityTitle; + var descriptionLabel; + var descriptionBox; + + this.getPalette().id = "activity-palette"; + + this.template = + '<div class="row">' + + '<input type="text" id="title" class="expand">' + + '</div>' + + '<div class="row small">' + + '<label>Description:</label>' + + '</div>' + + '<div class="row expand">' + + '<textarea rows="8" id="description" class="expand"></textarea>' + + '</div>'; + + var containerElem = document.createElement('div'); + containerElem.innerHTML = this.template; + this.setContent([containerElem]); + + this.titleElem = containerElem.querySelector('#title'); + this.descriptionElem = containerElem.querySelector('#description'); + + this.titleElem.onblur = function () { + datastoreObject.setMetadata({ + "title": this.value, + "title_set_by_user": "1" + }); + datastoreObject.save(); + }; + + this.descriptionElem.onblur = function () { + datastoreObject.setMetadata({ + "description": this.value + }); + datastoreObject.save(); + }; + }; + + // Fill the text inputs with the received metadata. + var setTitleDescription = function (metadata) { + this.titleElem.value = metadata.title; + + if (metadata.description !== undefined) { + this.descriptionElem.value = metadata.description; + } + }; + + activitypalette.ActivityPalette.prototype = + Object.create(palette.Palette.prototype, { + setTitleDescription: { + value: setTitleDescription, + enumerable: true, + configurable: true, + writable: true + } + }); + + return activitypalette; +}); diff --git a/lib/sugar-web/graphics/css/sugar.css b/lib/sugar-web/graphics/css/sugar.css new file mode 100644 index 0000000..cc1419d --- /dev/null +++ b/lib/sugar-web/graphics/css/sugar.css @@ -0,0 +1,456 @@ +* { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +html { + height: 100%; +} +body { + margin: 0; + height: 100%; + background-color: #c0c0c0; + position: relative; + font-family: sans-serif; + font-size: 10pt; +} +.unselectable { + -moz-user-select: none; + -webkit-user-select: none; +} +.pull-right { + float: right; +} +a { + color: #0076c3; + text-decoration: none; +} +/* Toolbar */ +.toolbar { + color: white; + background-color: #282828; + padding: 0 57px; + height: 55px; + -moz-user-select: none; + -webkit-user-select: none; +} +/* Toolbar separator */ +.toolbar hr { + display: inline-block; + height: 33px; + border: 1px solid #808080; + margin: 2.5px; + margin-bottom: -17px; +} +/* Toolbar toolbutton */ +.toolbar .toolbutton { + background-color: transparent; + background-position: center; + background-size: contain; + background-repeat: no-repeat; + color: white; + color: transparent; + border: 0; + border-radius: 5.5px; + margin: 4px 2px; + width: 47px; + height: 47px; + position: relative; +} +.toolbar .toolbutton:hover { + background-color: black; +} +.toolbar .toolbutton:active, +.toolbar .toolbutton.active { + background-color: #808080; +} +.toolbar .toolbutton img { + width: 100%; + height: 100%; +} +.toolbar .toolbutton:before { + content: ""; + background-color: transparent; + position: absolute; + display: block; + width: 55px; + height: 11px; + bottom: -4px; + right: -4px; +} +.toolbar .toolbutton.invoker:before { + background-image: url('../icons/emblems/arrow-down.svg'); +} +.toolbar #stop-button { + background-image: url('../icons/actions/activity-stop.svg'); +} +/* Canvas */ +#canvas { + color: black; + background-color: #c0c0c0; + position: absolute; + bottom: 0; + top: 55px; + overflow-y: auto; + width: 100%; +} +/* Button */ +button { + background-color: #808080; + color: white; + border: 2px solid transparent; + border-radius: 22px; + line-height: 22px; + padding: 2px 4px; + -moz-user-select: none; + -webkit-user-select: none; +} +button:hover { + background-color: #a2a2a2; + border-color: #a2a2a2; +} +button:active { + background-color: white; + color: black; + border-color: #808080; +} +button:focus { + border-color: white; +} +.toolbar button { + margin-top: 12.5px; +} +/* Button with icon */ +button.icon { + position: relative; + padding-left: 26px; +} +button.icon span.ok { + background-image: url(../icons/actions/dialog-ok.svg); +} +button.icon:active span.ok { + background-image: url(../icons/actions/dialog-ok-active.svg); +} +button.icon span.cancel { + background-image: url(../icons/actions/dialog-cancel.svg); +} +button.icon:active span.cancel { + background-image: url(../icons/actions/dialog-cancel-active.svg); +} +button.icon span { + display: inline-block; + width: 22px; + height: 22px; + background-color: transparent; + background-position: center; + background-size: 22px 22px; + background-repeat: no-repeat; + position: absolute; +} +button.icon span { + top: 2px; + left: 2px; +} +/* One line text input */ +input[type='text'] { + background-color: #e5e5e5; + border: 2px solid #e5e5e5; + border-radius: 22px; + padding: 4px; + width: 165px; + line-height: 22px; + outline: 0; +} +input[type='text']:focus { + background-color: white; +} +input[type='text']:disabled { + border-color: #808080; + background-color: #808080; +} +.toolbar input[type='text'], +.palette .row input[type='text'] { + margin-top: 10.5px; +} +.palette .row input[type='text']:nth-last-child(1) { + margin-top: 8.5px; +} +input[type='text'].expand { + width: calc(100% - 12px); +} +/* One line text input with buttons inside */ +.icon-input { + display: inline-block; + position: relative; +} +.icon-input input[type='text'] { + width: 135px; + padding-right: 34px; +} +.icon-input.expand { + width: 100%; +} +.icon-input.expand input[type='text'] { + width: calc(100% - 42px); +} +.icon-input button { + width: 34px; + height: 34px; + padding: 0; + position: absolute; + background-size: 22px 22px; +} +.icon-input button.right { + margin: 0 0 0 -34px; + border-radius: 0 22px 22px 0; + right: 0; +} +.icon-input button { + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + border: 0; +} +.icon-input button { + top: 2px; +} +.toolbar .icon-input button:hover { + background-color: transparent; +} +.toolbar .icon-input button { + top: 10.5px; +} +button.cancel { + background-image: url(../icons/actions/entry-cancel.svg); +} +button.cancel:active { + background-image: url(../icons/actions/entry-cancel-active.svg); +} +button.cancel:disabled { + background-image: url(../icons/actions/entry-cancel-disabled.svg); +} +/* Slider */ +/* FIXME this is not fully Sugarized yet */ +input[type='range'] { + -webkit-appearance: none !important; + background-color: #808080; + border-radius: 22px; + height: 11px; + cursor: pointer; +} +input[type='range']::-webkit-slider-thumb { + -webkit-appearance: none !important; + background-color: #c0c0c0; + border: 4px solid #808080; + border-radius: 11px; + height: 22px; + width: 22px; +} +input[type='range']::-webkit-slider-thumb:hover { + background-color: #e2e2e2; + border-color: #a2a2a2; +} +.toolbar input[type='range'] { + margin-top: 22px; +} +/* Label */ +label { + -moz-user-select: none; + -webkit-user-select: none; +} +/* Palette */ +.palette { + color: white; + background-color: transparent; + position: absolute; + pointer-events: none; +} +.palette-invoker { + width: 51px; + height: 53px; + background-color: black; + border: 2px solid #808080; + border-bottom: 0; + background-position: 2px 2px; + background-size: 47px; + background-repeat: no-repeat; +} +.palette-invoker:after { + content: ""; + background-color: transparent; + position: absolute; + display: block; + width: 55px; + height: 11px; + top: 44px; + left: 0; + background-image: url('../icons/emblems/arrow-up.svg'); +} +.palette-invoker:before { + content: ""; + background-color: black; + position: absolute; + display: block; + top: 55px; + width: 51px; + left: 2px; + height: 2px; +} +.palette .wrapper { + background-color: black; + border: 2px solid #808080; + max-width: 271px; + min-width: 161px; + min-height: 51px; + pointer-events: auto; +} +.palette .header { + height: 51px; + line-height: 51px; + -moz-user-select: none; + -webkit-user-select: none; + margin: 0 5.5px; + font-weight: bold; +} +.palette hr { + border: 1px solid #808080; +} +.palette hr.header-separator { + margin-top: 0; +} +.palette .row { + height: 55px; + margin: 0 5.5px; +} +.palette .row:nth-last-child(1) { + height: 51px; +} +.palette .row.small { + height: 22px; +} +.palette .row.expand { + height: auto; +} +/* Palette menu */ +.palette .menu { + list-style-type: none; + padding: 0; + margin-top: 11px; + margin-bottom: 11px; +} +.palette .menu button { + background-color: transparent; + border-radius: 0; + border: 0; + width: 100%; + text-align: left; + line-height: 33px; + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; +} +.palette .menu button:hover { + background-color: #808080; + color: white; +} +.palette .menu button.icon { + padding-left: 37px; +} +.palette .menu button.icon span { + top: 0; + left: 0; + width: 33px; + height: 33px; +} +/* Scrollbar */ +::-webkit-scrollbar { + background-color: #808080; + width: 11px; +} +::-webkit-scrollbar-thumb { + background-color: white; + border: 2px solid #dddddd; + border-radius: 11px; +} +/* Grid for visual debugging and layout */ +.grid { + background-color: transparent; + position: absolute; + top: 0; + left: 0; +} +/* Checkbox and radio */ +input[type='checkbox'], +input[type='radio'] { + background-position: center; + background-size: contain; + width: 22px; + height: 22px; + margin: 2px 2px 4px 2px; + vertical-align: middle; + -moz-appearance: none; + appearance: none; + -webkit-appearance: none; +} +.toolbar input[type='checkbox'], +.toolbar input[type='radio'] { + margin-top: 14.5px; + margin-bottom: 18.5px; +} +input[type='checkbox'] { + background-image: url(../icons/actions/checkbox-unchecked.svg); +} +input[type='checkbox']:active { + background-image: url(../icons/actions/checkbox-checked-selected.svg); +} +input[type='checkbox']:checked:active { + background-image: url(../icons/actions/checkbox-checked-selected.svg); +} +input[type='checkbox']:checked { + background-image: url(../icons/actions/checkbox-checked.svg); +} +input[type='radio'] { + background-image: url(../icons/actions/radio.svg); +} +input[type='radio']:active { + background-image: url(../icons/actions/radio-selected.svg); +} +input[type='radio']:checked:active { + background-image: url(../icons/actions/radio-active-selected.svg); +} +input[type='radio']:checked { + background-image: url(../icons/actions/radio-active.svg); +} +/* Textarea */ +textarea { + border: 2px solid #808080; + margin: 2px; +} +textarea.expand { + width: calc(100% - 12px); +} +/* Lists */ +ul.flat-list { + list-style-type: none; + padding: 0; + margin: 0; +} +ul.flat-list li { + border-bottom: 2px dotted #c0c0c0; + background-color: white; + height: 31px; + line-height: 31px; +} +ul.flat-list li:nth-last-child(1) { + border-bottom: none; +} +ul.flat-list.big li { + height: 42px; + line-height: 42px; +} +ul.flat-list.striped li:nth-child(odd) { + background-color: #e5e5e5; +} +/* ActivityPalette */ +#activity-palette .wrapper { + width: 271px; +} diff --git a/lib/sugar-web/graphics/css/sugar.less b/lib/sugar-web/graphics/css/sugar.less new file mode 100644 index 0000000..8fa9766 --- /dev/null +++ b/lib/sugar-web/graphics/css/sugar.less @@ -0,0 +1,589 @@ +@toolbar-grey: #282828; +@button-grey: #808080; +@panel-grey: #C0C0C0; +@text-field-grey: #E5E5E5; +@link-blue: #0076C3; + +@line-width: 2px; +@subcell-size: 11px; +@cell-size: 5 * @subcell-size; +@font-size: 10pt; + +@toolbar-height: @cell-size; +@icon-small-size: 2 * @subcell-size; + +@toolbutton-size: @toolbar-height - (4 * @line-width); +@toolbar-button-margin-top: (@toolbar-height / 2) - (2 * @line-width) - + (@icon-small-size / 2); + +@input-text-padding: (2 * @line-width); +@input-text-line-height: 2 * @subcell-size; +@input-text-width: 3 * @cell-size; +@toolbar-input-height: (@toolbar-height / 2) - (@input-text-line-height / 2) - + (@input-text-padding + @line-width); + +@button-small-size: @input-text-line-height + (2 * @input-text-padding) + + (2 * @line-width); + +* { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +html { + height: 100%; +} + +body { + margin: 0; + height: 100%; + background-color: @panel-grey; + position: relative; + font-family: sans-serif; + font-size: @font-size; +} + +.unselectable { + -moz-user-select: none; + -webkit-user-select: none; +} + +.pull-right { + float: right; +} + +a { + color: @link-blue; + text-decoration: none; +} + +/* Toolbar */ + +.toolbar { + color: white; + background-color: @toolbar-grey; + padding: 0 @toolbutton-size + (5 * @line-width); + height: @toolbar-height; + .unselectable; +} + +/* Toolbar separator */ + +.toolbar hr { + display: inline-block; + height: 3 * @subcell-size; + border: (@line-width / 2) solid @button-grey; + margin: (@subcell-size - (@line-width * 3)) / 2; + margin-bottom: -1 * (@subcell-size + (@line-width * 3)); +} + +/* Toolbar toolbutton */ + +.toolbar .toolbutton { + background-color: transparent; + background-position: center; + background-size: contain; + background-repeat: no-repeat; + color: white; + color: transparent; + border: 0; + border-radius: @subcell-size / 2; + margin: (2 * @line-width) @line-width; + width: @toolbutton-size; + height: @toolbutton-size; + position: relative; +} + +.toolbar .toolbutton:hover { + background-color: black; +} + +.toolbar .toolbutton:active, .toolbar .toolbutton.active { + background-color: @button-grey; +} + +.toolbar .toolbutton img { + width: 100%; + height: 100%; +} + +.toolbar .toolbutton:before { + content: ""; + background-color: transparent; + position: absolute; + display: block; + width: @cell-size; + height: @subcell-size; + bottom: -2 * @line-width; + right: -2 * @line-width; +} + +.toolbar .toolbutton.invoker:before { + background-image: url('../icons/emblems/arrow-down.svg'); +} + +.toolbar #stop-button { + background-image: url('../icons/actions/activity-stop.svg'); +} + +/* Canvas */ + +#canvas { + color: black; + background-color: @panel-grey; + position: absolute; + bottom: 0; + top: @toolbar-height; + overflow-y: auto; + width: 100%; +} + +/* Button */ + +button { + background-color: @button-grey; + color: white; + border: @line-width solid transparent; + border-radius: 2 * @subcell-size; + line-height: @icon-small-size; + padding: @line-width (2 * @line-width); + .unselectable; +} + +button:hover { + background-color: @button-grey + #222; + border-color: @button-grey + #222; +} + +button:active { + background-color: white; + color: black; + border-color: @button-grey; +} + +button:focus { + border-color: white; +} + +.toolbar button { + margin-top: @toolbar-button-margin-top; +} + +/* Button with icon */ + +button.icon { + position: relative; + padding-left: @icon-small-size + (2 * @line-width); +} + +button.icon span.ok { + background-image: url(../icons/actions/dialog-ok.svg); +} + +button.icon:active span.ok { + background-image: url(../icons/actions/dialog-ok-active.svg); +} + +button.icon span.cancel { + background-image: url(../icons/actions/dialog-cancel.svg); +} + +button.icon:active span.cancel { + background-image: url(../icons/actions/dialog-cancel-active.svg); +} + +button.icon span { + display: inline-block; + width: @icon-small-size; + height: @icon-small-size; + background-color: transparent; + background-position: center; + background-size: @icon-small-size @icon-small-size; + background-repeat: no-repeat; + position: absolute; +} + +button.icon span { + top: @line-width; + left: @line-width; +} + +/* One line text input */ + +input[type='text'] { + background-color: @text-field-grey; + border: @line-width solid @text-field-grey; + border-radius: 2 * @subcell-size; + padding: @input-text-padding; + width: @input-text-width; + line-height: @input-text-line-height; + outline: 0; +} + +input[type='text']:focus { + background-color: white; +} + +input[type='text']:disabled { + border-color: @button-grey; + background-color: @button-grey; +} + +.toolbar input[type='text'], .palette .row input[type='text'] { + margin-top: @toolbar-input-height; +} + +.palette .row input[type='text']:nth-last-child(1) { + margin-top: @toolbar-input-height - @line-width; +} + +input[type='text'].expand { + width: calc(~"100%" - (2 * @input-text-padding + 2 * @line-width)); +} + +/* One line text input with buttons inside */ + +.icon-input { + display: inline-block; + position: relative; +} + +.icon-input input[type='text'] { + width: @input-text-width + @input-text-padding - @button-small-size; + padding-right: @button-small-size; +} + +.icon-input.expand { + width: 100%; +} + +.icon-input.expand input[type='text'] { + width: calc(~"100%" - (@input-text-padding + 2 * @line-width + + @button-small-size)); +} + +.icon-input button { + width: @button-small-size; + height: @button-small-size; + padding: 0; + position: absolute; + background-size: @icon-small-size @icon-small-size; +} + +.icon-input button.right { + margin: 0 0 0 -@button-small-size; + border-radius: 0 (2 * @subcell-size) (2 * @subcell-size) 0; + right: 0; +} + +.icon-input button { + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + border: 0; +} + +.icon-input button { + top: @line-width; +} + +.toolbar .icon-input button:hover { + background-color: transparent; +} + +.toolbar .icon-input button { + top: @toolbar-input-height; +} + +button.cancel { + background-image: url(../icons/actions/entry-cancel.svg); +} + +button.cancel:active { + background-image: url(../icons/actions/entry-cancel-active.svg); +} + +button.cancel:disabled { + background-image: url(../icons/actions/entry-cancel-disabled.svg); +} + +/* Slider */ +/* FIXME this is not fully Sugarized yet */ + +input[type='range'] { + -webkit-appearance: none !important; + background-color: @button-grey; + border-radius: 2 * @subcell-size; + height: @subcell-size; + cursor: pointer; +} + +input[type='range']::-webkit-slider-thumb { + -webkit-appearance: none !important; + background-color: @panel-grey; + border: (2 * @line-width) solid @button-grey; + border-radius: @subcell-size; + height: @icon-small-size; + width: @icon-small-size; +} + +input[type='range']::-webkit-slider-thumb:hover { + background-color: @panel-grey + #222; + border-color: @button-grey + #222; +} + +.toolbar input[type='range'] { + margin-top: (@toolbar-height / 2) - (@subcell-size / 2); +} + +/* Label */ + +label { + .unselectable; +} + +/* Palette */ + +.palette { + color: white; + background-color: transparent; + position: absolute; + pointer-events: none; +} + +.palette-invoker { + width: @cell-size - 2 * @line-width; + height: @cell-size - @line-width; + background-color: black; + border: @line-width solid @button-grey; + border-bottom: 0; + background-position: @line-width @line-width; + background-size: @toolbutton-size; + background-repeat: no-repeat; +} + +.palette-invoker:after { + content: ""; + background-color: transparent; + position: absolute; + display: block; + width: @cell-size; + height: @subcell-size; + top: 4 * @subcell-size; + left: 0; + background-image: url('../icons/emblems/arrow-up.svg'); +} + +.palette-invoker:before { + content: ""; + background-color: black; + position: absolute; + display: block; + top: @cell-size; + width: @cell-size - 2 * @line-width; + left: @line-width; + height: @line-width; +} + +.palette .wrapper { + background-color: black; + border: @line-width solid @button-grey; + max-width: 5 * @cell-size - 2 * @line-width; + min-width: 3 * @cell-size - 2 * @line-width; + min-height: @cell-size - 2 * @line-width; + pointer-events: auto; +} + +.palette .header { + height: @cell-size - 2 * @line-width; + line-height: @cell-size - 2 * @line-width; + .unselectable; + margin: 0 (@subcell-size / 2); + font-weight: bold; +} + +.palette hr { + border: (@line-width / 2) solid @button-grey; +} + +.palette hr.header-separator { + margin-top: 0; +} + +.palette .row { + height: @cell-size; + margin: 0 (@subcell-size / 2); +} + +.palette .row:nth-last-child(1) { + height: @cell-size - 2 * @line-width; +} + +.palette .row.small { + height: 2 * @subcell-size; +} + +.palette .row.expand { + height: auto; +} + +/* Palette menu */ + +.palette .menu { + list-style-type: none; + padding: 0; + margin-top: @subcell-size; + margin-bottom: @subcell-size; +} + +.palette .menu button { + background-color: transparent; + border-radius: 0; + border: 0; + width: 100%; + text-align: left; + line-height: 3 * @subcell-size; + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; +} + +.palette .menu button:hover { + background-color: @button-grey; + color: white; +} + +.palette .menu button.icon { + padding-left: 3 * @subcell-size + 2 * @line-width; +} + +.palette .menu button.icon span { + top: 0; + left: 0; + width: 3 * @subcell-size; + height: 3 * @subcell-size; +} + +/* Scrollbar */ + +::-webkit-scrollbar { + background-color: @button-grey; + width: @subcell-size; +} + +::-webkit-scrollbar-thumb { + background-color: white; + border: @line-width solid #ddd; + border-radius: @subcell-size; +} + +/* Grid for visual debugging and layout */ + +.grid { + background-color: transparent; + position: absolute; + top: 0; + left: 0; +} + +.appearance(@value) { + -moz-appearance: @value; + appearance: @value; + -webkit-appearance: @value; +} + +/* Checkbox and radio */ + +input[type='checkbox'], +input[type='radio'] { + background-position: center; + background-size: contain; + width: @icon-small-size; + height: @icon-small-size; + margin: @line-width @line-width (2 * @line-width) @line-width; + vertical-align: middle; + .appearance(none); +} + +.toolbar input[type='checkbox'], +.toolbar input[type='radio'] { + margin-top: (@toolbar-height - @icon-small-size) / 2 - @line-width; + margin-bottom: (@toolbar-height - @icon-small-size) / 2 + @line-width; +} + +input[type='checkbox'] { + background-image: url(../icons/actions/checkbox-unchecked.svg); +} + +input[type='checkbox']:active { + background-image: url(../icons/actions/checkbox-checked-selected.svg); +} + +input[type='checkbox']:checked:active { + background-image: url(../icons/actions/checkbox-checked-selected.svg); +} + +input[type='checkbox']:checked { + background-image: url(../icons/actions/checkbox-checked.svg); +} + +input[type='radio'] { + background-image: url(../icons/actions/radio.svg); +} + +input[type='radio']:active { + background-image: url(../icons/actions/radio-selected.svg); +} + +input[type='radio']:checked:active { + background-image: url(../icons/actions/radio-active-selected.svg); +} + +input[type='radio']:checked { + background-image: url(../icons/actions/radio-active.svg); +} + +/* Textarea */ + +textarea { + border: @line-width solid @button-grey; + margin: @line-width; +} + +textarea.expand { + width: calc(~"100%" - (6 * (@line-width))); +} + +/* Lists */ + +ul.flat-list { + list-style-type: none; + padding: 0; + margin: 0; +} + +ul.flat-list li { + border-bottom: @line-width dotted @panel-grey; + background-color: white; + height: 3 * @subcell-size - @line-width; + line-height: 3 * @subcell-size - @line-width; +} + +ul.flat-list li:nth-last-child(1) { + border-bottom: none; +} + +ul.flat-list.big li { + height: 4 * @subcell-size - @line-width; + line-height: 4 * @subcell-size - @line-width; +} + +ul.flat-list.striped li:nth-child(odd) { + background-color: @text-field-grey; +} + +/* ActivityPalette */ + +#activity-palette .wrapper { + width: 5 * @cell-size - 2 * @line-width; +}
\ No newline at end of file diff --git a/lib/sugar-web/graphics/grid.js b/lib/sugar-web/graphics/grid.js new file mode 100644 index 0000000..503713a --- /dev/null +++ b/lib/sugar-web/graphics/grid.js @@ -0,0 +1,54 @@ +define(function () { + var grid = {}; + + // Add a grid overlay with lines spaced by subcellSize, for visual + // debugging. This is useful while doing the activity layout or + // while developing widgets. + grid.addGrid = function (subcellSize) { + var canvas = document.createElement('canvas'); + canvas.className = "grid"; + document.body.appendChild(canvas); + + var updateGrid = function () { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + + var ctx = canvas.getContext("2d"); + ctx.strokeStyle = "#00FFFF"; + + var subcellsVertical = window.innerHeight / subcellSize; + for (i = 0; i < subcellsVertical; i++) { + if ((i + 1) % 5 === 0) { + ctx.lineWidth = 1; + } else { + ctx.lineWidth = 0.5; + } + ctx.beginPath(); + ctx.moveTo(0, subcellSize * (i + 1)); + ctx.lineTo(canvas.width, subcellSize * (i + 1)); + ctx.stroke(); + } + + var subcellsHorizontal = window.innerWidth / subcellSize; + for (i = 0; i < subcellsHorizontal; i++) { + if ((i + 1) % 5 === 0) { + ctx.lineWidth = 1; + } else { + ctx.lineWidth = 0.5; + } + ctx.beginPath(); + ctx.moveTo(subcellSize * (i + 1), 0); + ctx.lineTo(subcellSize * (i + 1), canvas.height); + ctx.stroke(); + } + }; + + updateGrid(); + + window.onresize = function (event) { + updateGrid(); + }; + }; + + return grid; +}); diff --git a/lib/sugar-web/graphics/icon.js b/lib/sugar-web/graphics/icon.js new file mode 100644 index 0000000..f2c0791 --- /dev/null +++ b/lib/sugar-web/graphics/icon.js @@ -0,0 +1,81 @@ +define(function () { + var icon = {}; + + function changeColors(iconData, fillColor, strokeColor) { + var re; + + if (fillColor) { + re = /(<!ENTITY fill_color ")(.*)(">)/; + iconData = iconData.replace(re, "$1" + fillColor + "$3"); + } + + if (strokeColor) { + re = /(<!ENTITY stroke_color ")(.*)(">)/; + iconData = iconData.replace(re, "$1" + strokeColor + "$3"); + } + + return iconData; + } + + icon.load = function (iconInfo, callback) { + var source; + var dataHeader = "data:image/svg+xml,"; + + if ("uri" in iconInfo) { + source = iconInfo.uri; + } else if ("name" in iconInfo) { + source = "lib/graphics/icons/" + iconInfo.name + ".svg"; + } + + var fillColor = iconInfo.fillColor; + var strokeColor = iconInfo.strokeColor; + + // If source is already a data uri, read it instead of doing + // the XMLHttpRequest + if (source.substring(0, 4) == 'data') { + var iconData = unescape(source.slice(dataHeader.length)); + var newData = changeColors(iconData, fillColor, strokeColor); + callback(dataHeader + escape(newData)); + return; + } + + var client = new XMLHttpRequest(); + + client.onload = function () { + var iconData = this.responseText; + var newData = changeColors(iconData, fillColor, strokeColor); + callback(dataHeader + escape(newData)); + }; + + client.open("GET", source); + client.send(); + }; + + function getBackgroundURL(elem) { + var style = elem.currentStyle || window.getComputedStyle(elem, ''); + // Remove prefix 'url(' and suffix ')' before return + return style.backgroundImage.slice(4, -1); + } + + function setBackgroundURL(elem, url) { + elem.style.backgroundImage = "url('" + url + "')"; + } + + icon.colorize = function (elem, colors, callback) { + var iconInfo = { + "uri": getBackgroundURL(elem), + "strokeColor": colors.stroke, + "fillColor": colors.fill + }; + + icon.load(iconInfo, function (url) { + setBackgroundURL(elem, url); + if (callback) { + callback(); + } + }); + + }; + + return icon; +}); diff --git a/lib/sugar-web/graphics/icons/actions/activity-stop.svg b/lib/sugar-web/graphics/icons/actions/activity-stop.svg new file mode 100644 index 0000000..11b82e8 --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/activity-stop.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [ + <!ENTITY stroke_color "#010101"> + <!ENTITY fill_color "#FFFFFF"> +]><svg enable-background="new 0 0 55 55" height="55px" version="1.1" viewBox="0 0 55 55" width="55px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g display="block" id="activity-stop"> + <path d="M36.822,5H18.181L5.002,18.182V36.82L18.181,50h18.642l13.176-13.18V18.182L36.822,5z M35.75,35.414h-15.5v-15.5h15.5V35.414z" display="inline" fill="&fill_color;"/> +</g></svg>
\ No newline at end of file diff --git a/lib/sugar-web/graphics/icons/actions/checkbox-checked-selected.svg b/lib/sugar-web/graphics/icons/actions/checkbox-checked-selected.svg new file mode 100644 index 0000000..8ec1223 --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/checkbox-checked-selected.svg @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ + <!ENTITY fill_color "#E5E5E5"> + <!ENTITY stroke_color "#010101"> +]> +<svg + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="26" + height="26" + id="svg814"> + <g + transform="translate(0,-1026.3622)" + id="layer1"> + <rect + width="23.999523" + height="23.999525" + x="1" + y="1027.3627" + id="rect3268" + style="color:&stroke_color;;fill:&fill_color;;fill-opacity:1;stroke:#808080;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + <path + d="m 5.6810941,1039.239 4.7885489,4.7885 9.330512,-9.3305" + id="path3438" + style="fill:none;stroke:&stroke_color;;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /> + </g> +</svg> diff --git a/lib/sugar-web/graphics/icons/actions/checkbox-checked.svg b/lib/sugar-web/graphics/icons/actions/checkbox-checked.svg new file mode 100644 index 0000000..3cfce18 --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/checkbox-checked.svg @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ + <!ENTITY fill_color "#FFFFFF"> + <!ENTITY stroke_color "#010101"> +]> +<svg + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="26" + height="26" + id="svg814"> + <g + transform="translate(0,-1026.3622)" + id="layer1"> + <rect + width="23.999523" + height="23.999525" + x="1" + y="1027.3627" + id="rect3268" + style="color:&stroke_color;;fill:&fill_color;;fill-opacity:1;stroke:#808080;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + <path + d="m 5.6810941,1039.239 4.7885489,4.7885 9.330512,-9.3305" + id="path3438" + style="fill:none;stroke:&stroke_color;;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /> + </g> +</svg> diff --git a/lib/sugar-web/graphics/icons/actions/checkbox-unchecked-selected.svg b/lib/sugar-web/graphics/icons/actions/checkbox-unchecked-selected.svg new file mode 100644 index 0000000..2263279 --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/checkbox-unchecked-selected.svg @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ + <!ENTITY fill_color "#E5E5E5"> +]> +<svg + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="26" + height="26" + id="svg814"> + <g + transform="translate(0,-1026.3622)" + id="layer1"> + <rect + width="23.999523" + height="23.999525" + x="1" + y="1027.3627" + id="rect3268" + style="color:#000000;fill:&fill_color;;fill-opacity:1;stroke:#808080;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + </g> +</svg> diff --git a/lib/sugar-web/graphics/icons/actions/checkbox-unchecked.svg b/lib/sugar-web/graphics/icons/actions/checkbox-unchecked.svg new file mode 100644 index 0000000..e158782 --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/checkbox-unchecked.svg @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ + <!ENTITY fill_color "#FFFFFF"> +]> +<svg + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="26" + height="26" + id="svg814"> + <g + transform="translate(0,-1026.3622)" + id="layer1"> + <rect + width="23.999523" + height="23.999525" + x="1" + y="1027.3627" + id="rect3268" + style="color:#000000;fill:&fill_color;;stroke:#808080;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + </g> +</svg> diff --git a/lib/sugar-web/graphics/icons/actions/dialog-cancel-active.svg b/lib/sugar-web/graphics/icons/actions/dialog-cancel-active.svg new file mode 100644 index 0000000..dc0d688 --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/dialog-cancel-active.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [ + <!ENTITY stroke_color "#FFFFFF"> + <!ENTITY fill_color "#808080"> +]><svg enable-background="new 0 0 55.125 55" height="55px" version="1.1" viewBox="0 0 55.125 55" width="55.125px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g display="block" id="dialog-cancel"> + <path d="M27.557,5.053c-12.43,0-22.5,10.076-22.5,22.497c0,12.432,10.07,22.503,22.5,22.503 c12.431,0,22.5-10.071,22.5-22.503C50.057,15.129,39.987,5.053,27.557,5.053z M37.756,33.212c1.254,1.256,1.257,3.291,0,4.545 c-0.628,0.629-1.451,0.943-2.274,0.943c-0.822,0-1.644-0.314-2.27-0.94l-5.76-5.761l-5.76,5.761 c-0.627,0.626-1.449,0.94-2.271,0.94c-0.823,0-1.647-0.314-2.275-0.943c-1.254-1.254-1.254-3.289,0.004-4.545l5.758-5.758 l-5.758-5.758c-1.258-1.254-1.258-3.292-0.004-4.546c1.255-1.254,3.292-1.259,4.546,0l5.76,5.759l5.76-5.759 c1.252-1.259,3.288-1.254,4.544,0c1.257,1.254,1.254,3.292,0,4.546l-5.758,5.758L37.756,33.212z" display="inline" fill="&fill_color;"/> +</g></svg> diff --git a/lib/sugar-web/graphics/icons/actions/dialog-cancel.svg b/lib/sugar-web/graphics/icons/actions/dialog-cancel.svg new file mode 100644 index 0000000..dab4ae2 --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/dialog-cancel.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [ + <!ENTITY stroke_color "#010101"> + <!ENTITY fill_color "#FFFFFF"> +]><svg enable-background="new 0 0 55.125 55" height="55px" version="1.1" viewBox="0 0 55.125 55" width="55.125px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g display="block" id="dialog-cancel"> + <path d="M27.557,5.053c-12.43,0-22.5,10.076-22.5,22.497c0,12.432,10.07,22.503,22.5,22.503 c12.431,0,22.5-10.071,22.5-22.503C50.057,15.129,39.987,5.053,27.557,5.053z M37.756,33.212c1.254,1.256,1.257,3.291,0,4.545 c-0.628,0.629-1.451,0.943-2.274,0.943c-0.822,0-1.644-0.314-2.27-0.94l-5.76-5.761l-5.76,5.761 c-0.627,0.626-1.449,0.94-2.271,0.94c-0.823,0-1.647-0.314-2.275-0.943c-1.254-1.254-1.254-3.289,0.004-4.545l5.758-5.758 l-5.758-5.758c-1.258-1.254-1.258-3.292-0.004-4.546c1.255-1.254,3.292-1.259,4.546,0l5.76,5.759l5.76-5.759 c1.252-1.259,3.288-1.254,4.544,0c1.257,1.254,1.254,3.292,0,4.546l-5.758,5.758L37.756,33.212z" display="inline" fill="&fill_color;"/> +</g></svg>
\ No newline at end of file diff --git a/lib/sugar-web/graphics/icons/actions/dialog-ok-active.svg b/lib/sugar-web/graphics/icons/actions/dialog-ok-active.svg new file mode 100644 index 0000000..45de840 --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/dialog-ok-active.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [ + <!ENTITY stroke_color "#FFFFFF"> + <!ENTITY fill_color "#808080"> +]><svg enable-background="new 0 0 55.125 55" height="55px" version="1.1" viewBox="0 0 55.125 55" width="55.125px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g display="block" id="dialog-ok"> + <path d="M27.498,5C15.071,5,5,15.071,5,27.498C5,39.923,15.071,50,27.498,50 C39.927,50,50,39.923,50,27.498C50,15.071,39.927,5,27.498,5z M41.419,19.886L24.706,40.208L13.789,29.29 c-1.258-1.254-1.258-3.292-0.003-4.546c1.254-1.255,3.292-1.255,4.547,0l5.908,5.904L36.452,15.8 c1.127-1.368,3.153-1.568,4.525-0.438C42.347,16.489,42.546,18.515,41.419,19.886z" display="inline" fill="&fill_color;"/> +</g></svg> diff --git a/lib/sugar-web/graphics/icons/actions/dialog-ok.svg b/lib/sugar-web/graphics/icons/actions/dialog-ok.svg new file mode 100644 index 0000000..69e5a2a --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/dialog-ok.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [ + <!ENTITY stroke_color "#010101"> + <!ENTITY fill_color "#FFFFFF"> +]><svg enable-background="new 0 0 55.125 55" height="55px" version="1.1" viewBox="0 0 55.125 55" width="55.125px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g display="block" id="dialog-ok"> + <path d="M27.498,5C15.071,5,5,15.071,5,27.498C5,39.923,15.071,50,27.498,50 C39.927,50,50,39.923,50,27.498C50,15.071,39.927,5,27.498,5z M41.419,19.886L24.706,40.208L13.789,29.29 c-1.258-1.254-1.258-3.292-0.003-4.546c1.254-1.255,3.292-1.255,4.547,0l5.908,5.904L36.452,15.8 c1.127-1.368,3.153-1.568,4.525-0.438C42.347,16.489,42.546,18.515,41.419,19.886z" display="inline" fill="&fill_color;"/> +</g></svg>
\ No newline at end of file diff --git a/lib/sugar-web/graphics/icons/actions/entry-cancel-active.svg b/lib/sugar-web/graphics/icons/actions/entry-cancel-active.svg new file mode 100644 index 0000000..467509e --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/entry-cancel-active.svg @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ + <!ENTITY fill_color "#010101"> + <!ENTITY stroke_color "#FFFFFF"> +]> +<svg + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="22" + height="22" + viewBox="0 0 22 22" + id="svg5047" + xml:space="preserve"><g + transform="matrix(0.48888889,0,0,0.48888889,-2.4723111,-2.4703556)" + id="dialog-cancel"><path + d="m 37.756,33.212 c 1.254,1.256 1.257,3.291 0,4.545 -0.628,0.629 -1.451,0.943 -2.274,0.943 -0.822,0 -1.644,-0.314 -2.27,-0.94 l -5.76,-5.761 -5.76,5.761 c -0.627,0.626 -1.449,0.94 -2.271,0.94 -0.823,0 -1.647,-0.314 -2.275,-0.943 -1.254,-1.254 -1.254,-3.289 0.004,-4.545 l 5.758,-5.758 -5.758,-5.758 c -1.258,-1.254 -1.258,-3.292 -0.004,-4.546 1.255,-1.254 3.292,-1.259 4.546,0 l 5.76,5.759 5.76,-5.759 c 1.252,-1.259 3.288,-1.254 4.544,0 1.257,1.254 1.254,3.292 0,4.546 l -5.758,5.758 z" + id="path5050" /></g><g + transform="matrix(0.48888889,0,0,0.48888889,-2.4723111,-2.4703556)" + id="g3084" + style="fill:#ffffff;stroke-width:4.090909;stroke-miterlimit:4;stroke-dasharray:none"><path + d="m 27.557,5.053 c -12.43,0 -22.5,10.076 -22.5,22.497 0,12.432 10.07,22.503 22.5,22.503 12.431,0 22.5,-10.071 22.5,-22.503 0,-12.421 -10.07,-22.497 -22.5,-22.497 z m 10.199,28.159 c 1.254,1.256 1.257,3.291 0,4.545 -0.628,0.629 -1.451,0.943 -2.274,0.943 -0.822,0 -1.644,-0.314 -2.27,-0.94 l -5.76,-5.761 -5.76,5.761 c -0.627,0.626 -1.449,0.94 -2.271,0.94 -0.823,0 -1.647,-0.314 -2.275,-0.943 -1.254,-1.254 -1.254,-3.289 0.004,-4.545 l 5.758,-5.758 -5.758,-5.758 c -1.258,-1.254 -1.258,-3.292 -0.004,-4.546 1.255,-1.254 3.292,-1.259 4.546,0 l 5.76,5.759 5.76,-5.759 c 1.252,-1.259 3.288,-1.254 4.544,0 1.257,1.254 1.254,3.292 0,4.546 l -5.758,5.758 5.758,5.758 z" + id="path3086" + style="fill:#ffffff;stroke-width:4.090909;stroke-miterlimit:4;stroke-dasharray:none" /></g></svg> diff --git a/lib/sugar-web/graphics/icons/actions/entry-cancel-disabled.svg b/lib/sugar-web/graphics/icons/actions/entry-cancel-disabled.svg new file mode 100644 index 0000000..55b4cdb --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/entry-cancel-disabled.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ + <!ENTITY fill_color "#C0C0C0"> + <!ENTITY stroke_color "#FFFFFF"> +]> +<svg + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="22" + height="22" + viewBox="0 0 22 22" + id="svg5047" + xml:space="preserve"><g + transform="matrix(0.48888889,0,0,0.48888889,-2.4723111,-2.4703556)" + id="dialog-cancel" + style="fill:&fill_color;;display:block"> + <path + d="m 27.557,5.053 c -12.43,0 -22.5,10.076 -22.5,22.497 0,12.432 10.07,22.503 22.5,22.503 12.431,0 22.5,-10.071 22.5,-22.503 0,-12.421 -10.07,-22.497 -22.5,-22.497 z m 10.199,28.159 c 1.254,1.256 1.257,3.291 0,4.545 -0.628,0.629 -1.451,0.943 -2.274,0.943 -0.822,0 -1.644,-0.314 -2.27,-0.94 l -5.76,-5.761 -5.76,5.761 c -0.627,0.626 -1.449,0.94 -2.271,0.94 -0.823,0 -1.647,-0.314 -2.275,-0.943 -1.254,-1.254 -1.254,-3.289 0.004,-4.545 l 5.758,-5.758 -5.758,-5.758 c -1.258,-1.254 -1.258,-3.292 -0.004,-4.546 1.255,-1.254 3.292,-1.259 4.546,0 l 5.76,5.759 5.76,-5.759 c 1.252,-1.259 3.288,-1.254 4.544,0 1.257,1.254 1.254,3.292 0,4.546 l -5.758,5.758 5.758,5.758 z" + id="path5050" + style="fill:&fill_color;;display:inline" /> +</g></svg> diff --git a/lib/sugar-web/graphics/icons/actions/entry-cancel.svg b/lib/sugar-web/graphics/icons/actions/entry-cancel.svg new file mode 100644 index 0000000..5339a7e --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/entry-cancel.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ + <!ENTITY fill_color "#010101"> + <!ENTITY stroke_color "#FFFFFF"> +]> +<svg + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="22" + height="22" + viewBox="0 0 22 22" + id="svg5047" + xml:space="preserve"><g + transform="matrix(0.48888889,0,0,0.48888889,-2.4723111,-2.4703556)" + id="dialog-cancel" + style="fill:&fill_color;;display:block"> + <path + d="m 27.557,5.053 c -12.43,0 -22.5,10.076 -22.5,22.497 0,12.432 10.07,22.503 22.5,22.503 12.431,0 22.5,-10.071 22.5,-22.503 0,-12.421 -10.07,-22.497 -22.5,-22.497 z m 10.199,28.159 c 1.254,1.256 1.257,3.291 0,4.545 -0.628,0.629 -1.451,0.943 -2.274,0.943 -0.822,0 -1.644,-0.314 -2.27,-0.94 l -5.76,-5.761 -5.76,5.761 c -0.627,0.626 -1.449,0.94 -2.271,0.94 -0.823,0 -1.647,-0.314 -2.275,-0.943 -1.254,-1.254 -1.254,-3.289 0.004,-4.545 l 5.758,-5.758 -5.758,-5.758 c -1.258,-1.254 -1.258,-3.292 -0.004,-4.546 1.255,-1.254 3.292,-1.259 4.546,0 l 5.76,5.759 5.76,-5.759 c 1.252,-1.259 3.288,-1.254 4.544,0 1.257,1.254 1.254,3.292 0,4.546 l -5.758,5.758 5.758,5.758 z" + id="path5050" + style="fill:&fill_color;;display:inline" /> +</g></svg> diff --git a/lib/sugar-web/graphics/icons/actions/radio-active-selected.svg b/lib/sugar-web/graphics/icons/actions/radio-active-selected.svg new file mode 100644 index 0000000..c1d1085 --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/radio-active-selected.svg @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ + <!ENTITY fill_color "#E5E5E5"> + <!ENTITY stroke_color "#808080"> +]> +<svg + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="26" + height="26" + id="svg27352"> + <g + transform="translate(0,10)" + id="layer1"> + <path + d="M 13,0 C 5.8202983,0 0,5.8202983 0,13 0,20.179702 5.8202983,26 13,26 20.179702,26 26,20.179702 26,13 26,5.8202983 20.179702,0 13,0 z m 0,1 C 19.627417,1 25,6.372583 25,13 25,19.627417 19.627417,25 13,25 6.372583,25 1,19.627417 1,13 1,6.372583 6.372583,1 13,1 z" + transform="translate(0,-10)" + id="path3002" + style="color:#000000;fill:&stroke_color;;fill-opacity:1;stroke:none;stroke-width:0.82332432;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + <path + d="m 11.276603,5.8201666 a 5.3516083,5.3516083 0 1 1 -10.70321633,0 5.3516083,5.3516083 0 1 1 10.70321633,0 z" + transform="matrix(2.2423166,0,0,2.2423166,-0.28571452,-10.050656)" + id="path4079" + style="color:#000000;fill:&fill_color;;fill-opacity:1;stroke:none;stroke-width:0.82325572;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + <path + d="m 14.100023,7.3515821 a 5.9129128,5.9129128 0 1 1 -11.8258259,0 5.9129128,5.9129128 0 1 1 11.8258259,0 z" + transform="matrix(0.84560692,0,0,0.84560692,6.0769232,-3.2165487)" + id="path4754" + style="color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.84599996;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + </g> +</svg> diff --git a/lib/sugar-web/graphics/icons/actions/radio-active.svg b/lib/sugar-web/graphics/icons/actions/radio-active.svg new file mode 100644 index 0000000..a5fe591 --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/radio-active.svg @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ + <!ENTITY fill_color "#FFFFFF"> + <!ENTITY stroke_color "#808080"> +]> +<svg + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="26" + height="26" + id="svg27352"> + <g + transform="translate(0,10)" + id="layer1"> + <path + d="M 13,0 C 5.8202983,0 0,5.8202983 0,13 0,20.179702 5.8202983,26 13,26 20.179702,26 26,20.179702 26,13 26,5.8202983 20.179702,0 13,0 z m 0,1 C 19.627417,1 25,6.372583 25,13 25,19.627417 19.627417,25 13,25 6.372583,25 1,19.627417 1,13 1,6.372583 6.372583,1 13,1 z" + transform="translate(0,-10)" + id="path3002" + style="color:#000000;fill:&stroke_color;;fill-opacity:1;stroke:none;stroke-width:0.82332432;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + <path + d="m 11.276603,5.8201666 a 5.3516083,5.3516083 0 1 1 -10.70321633,0 5.3516083,5.3516083 0 1 1 10.70321633,0 z" + transform="matrix(2.2423166,0,0,2.2423166,-0.28571452,-10.050656)" + id="path4079" + style="color:#000000;fill:&fill_color;;fill-opacity:1;stroke:none;stroke-width:0.82325572;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + <path + d="m 14.100023,7.3515821 a 5.9129128,5.9129128 0 1 1 -11.8258259,0 5.9129128,5.9129128 0 1 1 11.8258259,0 z" + transform="matrix(0.84560692,0,0,0.84560692,6.0769232,-3.2165487)" + id="path4754" + style="color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.84599996;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + </g> +</svg> diff --git a/lib/sugar-web/graphics/icons/actions/radio-selected.svg b/lib/sugar-web/graphics/icons/actions/radio-selected.svg new file mode 100644 index 0000000..a24b97e --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/radio-selected.svg @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ + <!ENTITY fill_color "#E5E5E5"> + <!ENTITY stroke_color "#808080"> +]> +<svg + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="26" + height="26" + id="svg27352"> + <g + transform="translate(0,10)" + id="layer1"> + <path + d="M 13,0 C 5.8202983,0 0,5.8202983 0,13 0,20.179702 5.8202983,26 13,26 20.179702,26 26,20.179702 26,13 26,5.8202983 20.179702,0 13,0 z m 0,1 C 19.627417,1 25,6.372583 25,13 25,19.627417 19.627417,25 13,25 6.372583,25 1,19.627417 1,13 1,6.372583 6.372583,1 13,1 z" + transform="translate(0,-10)" + id="path3002" + style="color:#000000;fill:&stroke_color;;fill-opacity:1;stroke:none;stroke-width:0.82332432;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + <path + d="m 11.276603,5.8201666 a 5.3516083,5.3516083 0 1 1 -10.70321633,0 5.3516083,5.3516083 0 1 1 10.70321633,0 z" + transform="matrix(2.2423166,0,0,2.2423166,-0.28571452,-10.050656)" + id="path4079" + style="color:#000000;fill:&fill_color;;fill-opacity:1;stroke:none;stroke-width:0.82325572;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + </g> +</svg> diff --git a/lib/sugar-web/graphics/icons/actions/radio.svg b/lib/sugar-web/graphics/icons/actions/radio.svg new file mode 100644 index 0000000..d250286 --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/radio.svg @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ + <!ENTITY fill_color "#FFFFFF"> + <!ENTITY stroke_color "#808080"> +]> +<svg + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="26" + height="26" + id="svg27352"> + <g + transform="translate(0,10)" + id="layer1"> + <path + d="M 13,0 C 5.8202983,0 0,5.8202983 0,13 0,20.179702 5.8202983,26 13,26 20.179702,26 26,20.179702 26,13 26,5.8202983 20.179702,0 13,0 z m 0,1 C 19.627417,1 25,6.372583 25,13 25,19.627417 19.627417,25 13,25 6.372583,25 1,19.627417 1,13 1,6.372583 6.372583,1 13,1 z" + transform="translate(0,-10)" + id="path3002" + style="color:#000000;fill:&stroke_color;;fill-opacity:1;stroke:none;stroke-width:0.82332432;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + <path + d="m 11.276603,5.8201666 a 5.3516083,5.3516083 0 1 1 -10.70321633,0 5.3516083,5.3516083 0 1 1 10.70321633,0 z" + transform="matrix(2.2423166,0,0,2.2423166,-0.28571452,-10.050656)" + id="path4079" + style="color:#000000;fill:&fill_color;;fill-opacity:1;stroke:none;stroke-width:0.82325572;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + </g> +</svg> diff --git a/lib/sugar-web/graphics/icons/actions/zoom-groups.svg b/lib/sugar-web/graphics/icons/actions/zoom-groups.svg new file mode 100644 index 0000000..b88462f --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/zoom-groups.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [ + <!ENTITY stroke_color "#010101"> + <!ENTITY fill_color "#FFFFFF"> +]><svg enable-background="new 0 0 55 55" height="55px" version="1.1" viewBox="0 0 55 55" width="55px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g display="block" id="zoom-groups"> + <path d="M27.5,5C15.074,5,5,15.074,5,27.5S15.074,50,27.5,50 S50,39.926,50,27.5S39.926,5,27.5,5z M18.759,37.955c-2.618,0-4.745-2.127-4.745-4.746c0-2.621,2.125-4.745,4.745-4.745 s4.748,2.124,4.748,4.745C23.506,35.828,21.379,37.955,18.759,37.955z M27.5,22.625c-2.621,0-4.746-2.125-4.746-4.747 c0-2.618,2.125-4.742,4.746-4.742c2.623,0,4.748,2.123,4.748,4.742C32.246,20.501,30.121,22.625,27.5,22.625z M36.238,37.953 c-2.619,0-4.744-2.125-4.744-4.744c0-2.621,2.125-4.746,4.744-4.746c2.623,0,4.748,2.125,4.748,4.746 C40.986,35.828,38.861,37.953,36.238,37.953z" display="inline" fill="&fill_color;" id="zoom-groups_2_"/> +</g></svg>
\ No newline at end of file diff --git a/lib/sugar-web/graphics/icons/actions/zoom-home.svg b/lib/sugar-web/graphics/icons/actions/zoom-home.svg new file mode 100644 index 0000000..5578fec --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/zoom-home.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [ + <!ENTITY stroke_color "#010101"> + <!ENTITY fill_color "#FFFFFF"> +]><svg enable-background="new 0 0 55 55" height="55px" version="1.1" viewBox="0 0 55 55" width="55px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g display="block" id="zoom-home"> + <path d="M27.5,5C15.074,5,5,15.073,5,27.5C5,39.926,15.074,50,27.5,50 C39.928,50,50,39.926,50,27.5C50,15.073,39.926,5,27.5,5z M27.497,32.251c-2.621,0-4.749-2.131-4.749-4.75 c0-2.624,2.128-4.75,4.749-4.75c2.628,0,4.757,2.126,4.757,4.75C32.254,30.12,30.125,32.251,27.497,32.251z" display="inline" fill="&fill_color;" id="zoom-home_1_"/> +</g></svg>
\ No newline at end of file diff --git a/lib/sugar-web/graphics/icons/actions/zoom-neighborhood.svg b/lib/sugar-web/graphics/icons/actions/zoom-neighborhood.svg new file mode 100644 index 0000000..8d3f8d1 --- /dev/null +++ b/lib/sugar-web/graphics/icons/actions/zoom-neighborhood.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [ + <!ENTITY stroke_color "#010101"> + <!ENTITY fill_color "#FFFFFF"> +]><svg enable-background="new 0 0 55 55" height="55px" version="1.1" viewBox="0 0 55 55" width="55px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g display="block" id="zoom-neighborhood"> + <path d="M27.5,5C15.074,5,5,15.074,5,27.5C5,39.927,15.074,50,27.5,50 C39.927,50,50,39.927,50,27.5C50,15.074,39.927,5,27.5,5z M37.604,13.904c2.096,0,3.795,1.699,3.795,3.794 c0,2.096-1.699,3.794-3.795,3.794s-3.794-1.699-3.794-3.794S35.51,13.904,37.604,13.904z M9.626,27.501 c0-2.099,1.7-3.799,3.793-3.799c2.097,0,3.796,1.7,3.796,3.799c0,2.095-1.7,3.793-3.796,3.793 C11.324,31.294,9.626,29.596,9.626,27.501z M17.391,41.096c-2.093,0-3.793-1.695-3.793-3.792c0-2.099,1.701-3.796,3.793-3.796 c2.099,0,3.799,1.696,3.799,3.796C21.189,39.399,19.489,41.096,17.391,41.096z M17.698,21.195c-2.094,0-3.795-1.7-3.795-3.799 c0-2.096,1.7-3.795,3.795-3.795c2.099,0,3.796,1.701,3.796,3.795C21.495,19.495,19.798,21.195,17.698,21.195z M27.499,45.374 c-2.1,0-3.797-1.7-3.797-3.794c0-2.098,1.696-3.797,3.797-3.797c2.095,0,3.794,1.699,3.794,3.797 C31.293,43.676,29.594,45.374,27.499,45.374z M27.501,17.217c-2.096,0-3.795-1.699-3.795-3.795s1.699-3.795,3.795-3.795 c2.097,0,3.795,1.699,3.795,3.795S29.598,17.217,27.501,17.217z M37.301,41.401c-2.096,0-3.795-1.699-3.795-3.795 s1.699-3.794,3.795-3.794s3.794,1.698,3.794,3.794S39.396,41.401,37.301,41.401z M41.581,31.298c-2.096,0-3.795-1.698-3.795-3.795 c0-2.096,1.699-3.793,3.799-3.793c2.094,0,3.791,1.697,3.791,3.793C45.376,29.6,43.679,31.298,41.581,31.298z" fill="&fill_color;" id="zoom-neighborhood_3_"/> +</g></svg>
\ No newline at end of file diff --git a/lib/sugar-web/graphics/icons/emblems/arrow-down.svg b/lib/sugar-web/graphics/icons/emblems/arrow-down.svg new file mode 100644 index 0000000..2de1a9e --- /dev/null +++ b/lib/sugar-web/graphics/icons/emblems/arrow-down.svg @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ + <!ENTITY fill_color "#FFFFFF"> + <!ENTITY stroke_color "#010101"> +]> +<svg + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="55" + height="11" + id="svg2"> + <g + transform="translate(0,-1041.3622)" + id="layer1"> + <path + d="m 29.756935,1046.8861 -2.256934,2.257 -2.256936,-2.257" + id="rect2998" + style="color:#000000;fill:none;stroke:&fill_color;;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + </g> +</svg> diff --git a/lib/sugar-web/graphics/icons/emblems/arrow-up.svg b/lib/sugar-web/graphics/icons/emblems/arrow-up.svg new file mode 100644 index 0000000..a977f4a --- /dev/null +++ b/lib/sugar-web/graphics/icons/emblems/arrow-up.svg @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ + <!ENTITY fill_color "#FFFFFF"> + <!ENTITY stroke_color "#010101"> +]> +<svg + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="55" + height="11" + id="svg2"> + <g + transform="translate(0,-1041.3622)" + id="layer1"> + <path + d="m 29.756935,1049.1431 -2.256934,-2.257 -2.256936,2.257" + id="rect2998" + style="color:#000000;fill:none;stroke:&fill_color;;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + </g> +</svg> diff --git a/lib/sugar-web/graphics/menupalette.js b/lib/sugar-web/graphics/menupalette.js new file mode 100644 index 0000000..df61cb2 --- /dev/null +++ b/lib/sugar-web/graphics/menupalette.js @@ -0,0 +1,64 @@ +define(["sugar-web/graphics/palette", "mustache"], function (palette, mustache) { + + var menupalette = {}; + + menupalette.MenuPalette = function (invoker, primaryText, menuData) { + palette.Palette.call(this, invoker, primaryText); + + this.selectItemEvent = new CustomEvent( + "selectItem", { + detail: { + item: undefined + }, + bubbles: true, + cancelable: true + }); + + this.template = + '{{#.}}' + + '<li><button' + + ' {{ #icon }}class="icon"{{ /icon }}' + + ' {{ #id }}id="{{ id }}"{{ /id }}' + + '>' + + '{{ #icon }}<span></span>{{ /icon }}' + + '{{ label }}</button></li>' + + '{{/.}}'; + + var menuElem = document.createElement('ul'); + menuElem.className = "menu"; + menuElem.innerHTML = mustache.render(this.template, menuData); + this.setContent([menuElem]); + + // Pop-down the palette when a item in the menu is clicked. + + this.buttons = menuElem.querySelectorAll('button'); + + var that = this; + + function popDownOnButtonClick(event) { + that.selectItemEvent.detail.target = event.target; + that.getPalette().dispatchEvent(that.selectItemEvent); + that.popDown(); + } + + for (var i = 0; i < this.buttons.length; i++) { + this.buttons[i].addEventListener('click', popDownOnButtonClick); + } + }; + + var addEventListener = function (type, listener, useCapture) { + return this.getPalette().addEventListener(type, listener, useCapture); + }; + + menupalette.MenuPalette.prototype = + Object.create(palette.Palette.prototype, { + addEventListener: { + value: addEventListener, + enumerable: true, + configurable: true, + writable: true + } + }); + + return menupalette; +}); diff --git a/lib/sugar-web/graphics/palette.js b/lib/sugar-web/graphics/palette.js new file mode 100644 index 0000000..9a194a1 --- /dev/null +++ b/lib/sugar-web/graphics/palette.js @@ -0,0 +1,179 @@ +define(function () { + var palettesGroup = []; + + function getOffset(elem) { + // Ugly hack to consider the palette margin. + var style = elem.currentStyle || window.getComputedStyle(elem, ''); + + // Remove 'px' from the strings. + var x = -2 * style.marginLeft.slice(0, -2); + var y = -1 * style.marginTop.slice(0, -2); + + var rect = elem.getBoundingClientRect(); + x += rect.left; + y += rect.top; + return { + top: y, + left: x, + width: rect.width, + height: rect.height + }; + } + + var palette = {}; + + palette.Palette = function (invoker, primaryText) { + this.invoker = invoker; + if (this.invoker.classList.contains("toolbutton")) { + this.invoker.classList.add("invoker"); + } + this.primaryText = primaryText; + var paletteElem; + var wrapperElem; + var headerElem; + var headerSeparatorElem; + var containerElem; + var that = this; + palettesGroup.push(this); + + invoker.addEventListener('click', function (event) { + if (!that.invoker.classList.contains("toolbutton")) { + updatePosition(event.x, event.y); + } + that.toggle(); + }); + + function updatePosition(clickX, clickY) { + var paletteX; + var paletteY; + + if (typeof (clickX) !== 'undefined' && + typeof (clickY) !== 'undefined') { + paletteX = clickX; + paletteY = clickY; + } else { + var invokerOffset = getOffset(that.invoker); + paletteX = invokerOffset.left; + paletteY = invokerOffset.top; + } + + paletteElem.style.left = paletteX + "px"; + paletteElem.style.top = paletteY + "px"; + } + + // A palette element can have a header, content, one or both. + + function createPaletteElement() { + if (paletteElem !== undefined) { + return; + } + paletteElem = document.createElement('div'); + paletteElem.className = "palette"; + paletteElem.style.visibility = "hidden"; + document.body.appendChild(paletteElem); + + if (that.invoker.classList.contains("toolbutton")) { + invokerElem = document.createElement('div'); + invokerElem.className = "palette-invoker"; + var style = that.invoker.currentStyle || + window.getComputedStyle(that.invoker, ''); + invokerElem.style.backgroundImage = style.backgroundImage; + + invokerElem.addEventListener('click', function (e) { + that.toggle(); + }); + + paletteElem.appendChild(invokerElem); + + } + + wrapperElem = document.createElement('div'); + wrapperElem.className = "wrapper"; + paletteElem.appendChild(wrapperElem); + + if (that.primaryText !== undefined) { + headerElem = document.createElement('div'); + headerElem.className = "header"; + headerElem.innerText = that.primaryText; + wrapperElem.appendChild(headerElem); + } + + headerSeparatorElem = document.createElement('hr'); + headerSeparatorElem.className = "header-separator"; + headerSeparatorElem.style.display = "none"; + wrapperElem.appendChild(headerSeparatorElem); + + containerElem = document.createElement('div'); + containerElem.className = "container"; + wrapperElem.appendChild(containerElem); + + updatePosition(); + } + + this.getPalette = function () { + if (paletteElem === undefined) { + createPaletteElement(); + } + return paletteElem; + }; + + this.setContent = function (elementsList) { + if (paletteElem === undefined) { + createPaletteElement(); + } + + (function removePreviousContent() { + for (var i = 0; i < containerElem.children.length; i++) { + var child = containerElem.children[i]; + containerElem.removeChild(child); + } + }()); + + (function addNewContent() { + for (var i = 0; i < elementsList.length; i++) { + var child = elementsList[i]; + containerElem.appendChild(child); + } + }()); + + // The header separator will be visible only if there are + // both, header and content. + if (elementsList.length > 0 && this.primaryText !== undefined) { + headerSeparatorElem.style.display = "block"; + } else { + headerSeparatorElem.style.display = "none"; + } + }; + + this.isDown = function () { + return paletteElem === undefined || + paletteElem.style.visibility == "hidden"; + }; + + }; + + palette.Palette.prototype.popUp = function () { + for (var i = 0; i < palettesGroup.length; i++) { + otherPalette = palettesGroup[i]; + if (otherPalette != this) { + otherPalette.popDown(); + } + } + this.getPalette().style.visibility = "visible"; + }; + + palette.Palette.prototype.popDown = function () { + this.getPalette().style.visibility = "hidden"; + }; + + palette.Palette.prototype.toggle = function () { + if (this.isDown()) { + this.popUp(); + } else { + this.popDown(); + } + }; + + return palette; + +}); diff --git a/lib/sugar-web/graphics/radiobuttonsgroup.js b/lib/sugar-web/graphics/radiobuttonsgroup.js new file mode 100644 index 0000000..712681b --- /dev/null +++ b/lib/sugar-web/graphics/radiobuttonsgroup.js @@ -0,0 +1,59 @@ +define(function () { + var radioButtonsGroup = {}; + + // ## RadioButtonsGroup + // + // A group of elements where only one can be active at the same + // time. + // + // When an element is clicked, it becomes the active one. The + // active element gains the 'active' CSS class. + // + // Parameters: + // + // * **elems** Array of elements of the group. + radioButtonsGroup.RadioButtonsGroup = function (elems) { + this.elems = elems; + var active; + + for (i = 0; i < elems.length; i++) { + var elem = elems[i]; + elem.addEventListener("click", clickHandler); + + // The first element that has 'active' CSS class is made + // the active of the group on startup. + if (active === undefined && elem.classList.contains('active')) { + active = elem; + } + } + + // If no element has 'active' CSS class, the first element of + // the array is made the active. + if (active === undefined) { + active = elems[0]; + updateClasses(); + } + + function clickHandler(evt) { + active = evt.target; + updateClasses(); + } + + function updateClasses() { + for (i = 0; i < elems.length; i++) { + var elem = elems[i]; + elem.classList.remove('active'); + } + active.classList.add('active'); + } + + // Get the active element. + this.getActive = function () { + return active; + }; + + }; + + return radioButtonsGroup; + +}); diff --git a/lib/sugar-web/graphics/xocolor.js b/lib/sugar-web/graphics/xocolor.js new file mode 100644 index 0000000..1184ffa --- /dev/null +++ b/lib/sugar-web/graphics/xocolor.js @@ -0,0 +1,729 @@ +define(function () { + + var xocolor = {}; + + xocolor.colors = [ + { + stroke: '#B20008', + fill: '#FF2B34' + }, + { + stroke: '#FF2B34', + fill: '#B20008' + }, + { + stroke: '#E6000A', + fill: '#FF2B34' + }, + { + stroke: '#FF2B34', + fill: '#E6000A' + }, + { + stroke: '#FFADCE', + fill: '#FF2B34' + }, + { + stroke: '#9A5200', + fill: '#FF2B34' + }, + { + stroke: '#FF2B34', + fill: '#9A5200' + }, + { + stroke: '#FF8F00', + fill: '#FF2B34' + }, + { + stroke: '#FF2B34', + fill: '#FF8F00' + }, + { + stroke: '#FFC169', + fill: '#FF2B34' + }, + { + stroke: '#807500', + fill: '#FF2B34' + }, + { + stroke: '#FF2B34', + fill: '#807500' + }, + { + stroke: '#BE9E00', + fill: '#FF2B34' + }, + { + stroke: '#FF2B34', + fill: '#BE9E00' + }, + { + stroke: '#F8E800', + fill: '#FF2B34' + }, + { + stroke: '#008009', + fill: '#FF2B34' + }, + { + stroke: '#FF2B34', + fill: '#008009' + }, + { + stroke: '#00B20D', + fill: '#FF2B34' + }, + { + stroke: '#FF2B34', + fill: '#00B20D' + }, + { + stroke: '#8BFF7A', + fill: '#FF2B34' + }, + { + stroke: '#00588C', + fill: '#FF2B34' + }, + { + stroke: '#FF2B34', + fill: '#00588C' + }, + { + stroke: '#005FE4', + fill: '#FF2B34' + }, + { + stroke: '#FF2B34', + fill: '#005FE4' + }, + { + stroke: '#BCCDFF', + fill: '#FF2B34' + }, + { + stroke: '#5E008C', + fill: '#FF2B34' + }, + { + stroke: '#FF2B34', + fill: '#5E008C' + }, + { + stroke: '#7F00BF', + fill: '#FF2B34' + }, + { + stroke: '#FF2B34', + fill: '#7F00BF' + }, + { + stroke: '#D1A3FF', + fill: '#FF2B34' + }, + { + stroke: '#9A5200', + fill: '#FF8F00' + }, + { + stroke: '#FF8F00', + fill: '#9A5200' + }, + { + stroke: '#C97E00', + fill: '#FF8F00' + }, + { + stroke: '#FF8F00', + fill: '#C97E00' + }, + { + stroke: '#FFC169', + fill: '#FF8F00' + }, + { + stroke: '#807500', + fill: '#FF8F00' + }, + { + stroke: '#FF8F00', + fill: '#807500' + }, + { + stroke: '#BE9E00', + fill: '#FF8F00' + }, + { + stroke: '#FF8F00', + fill: '#BE9E00' + }, + { + stroke: '#F8E800', + fill: '#FF8F00' + }, + { + stroke: '#008009', + fill: '#FF8F00' + }, + { + stroke: '#FF8F00', + fill: '#008009' + }, + { + stroke: '#00B20D', + fill: '#FF8F00' + }, + { + stroke: '#FF8F00', + fill: '#00B20D' + }, + { + stroke: '#8BFF7A', + fill: '#FF8F00' + }, + { + stroke: '#00588C', + fill: '#FF8F00' + }, + { + stroke: '#FF8F00', + fill: '#00588C' + }, + { + stroke: '#005FE4', + fill: '#FF8F00' + }, + { + stroke: '#FF8F00', + fill: '#005FE4' + }, + { + stroke: '#BCCDFF', + fill: '#FF8F00' + }, + { + stroke: '#5E008C', + fill: '#FF8F00' + }, + { + stroke: '#FF8F00', + fill: '#5E008C' + }, + { + stroke: '#A700FF', + fill: '#FF8F00' + }, + { + stroke: '#FF8F00', + fill: '#A700FF' + }, + { + stroke: '#D1A3FF', + fill: '#FF8F00' + }, + { + stroke: '#B20008', + fill: '#FF8F00' + }, + { + stroke: '#FF8F00', + fill: '#B20008' + }, + { + stroke: '#FF2B34', + fill: '#FF8F00' + }, + { + stroke: '#FF8F00', + fill: '#FF2B34' + }, + { + stroke: '#FFADCE', + fill: '#FF8F00' + }, + { + stroke: '#807500', + fill: '#F8E800' + }, + { + stroke: '#F8E800', + fill: '#807500' + }, + { + stroke: '#BE9E00', + fill: '#F8E800' + }, + { + stroke: '#F8E800', + fill: '#BE9E00' + }, + { + stroke: '#FFFA00', + fill: '#EDDE00' + }, + { + stroke: '#008009', + fill: '#F8E800' + }, + { + stroke: '#F8E800', + fill: '#008009' + }, + { + stroke: '#00EA11', + fill: '#F8E800' + }, + { + stroke: '#F8E800', + fill: '#00EA11' + }, + { + stroke: '#8BFF7A', + fill: '#F8E800' + }, + { + stroke: '#00588C', + fill: '#F8E800' + }, + { + stroke: '#F8E800', + fill: '#00588C' + }, + { + stroke: '#00A0FF', + fill: '#F8E800' + }, + { + stroke: '#F8E800', + fill: '#00A0FF' + }, + { + stroke: '#BCCEFF', + fill: '#F8E800' + }, + { + stroke: '#5E008C', + fill: '#F8E800' + }, + { + stroke: '#F8E800', + fill: '#5E008C' + }, + { + stroke: '#AC32FF', + fill: '#F8E800' + }, + { + stroke: '#F8E800', + fill: '#AC32FF' + }, + { + stroke: '#D1A3FF', + fill: '#F8E800' + }, + { + stroke: '#B20008', + fill: '#F8E800' + }, + { + stroke: '#F8E800', + fill: '#B20008' + }, + { + stroke: '#FF2B34', + fill: '#F8E800' + }, + { + stroke: '#F8E800', + fill: '#FF2B34' + }, + { + stroke: '#FFADCE', + fill: '#F8E800' + }, + { + stroke: '#9A5200', + fill: '#F8E800' + }, + { + stroke: '#F8E800', + fill: '#9A5200' + }, + { + stroke: '#FF8F00', + fill: '#F8E800' + }, + { + stroke: '#F8E800', + fill: '#FF8F00' + }, + { + stroke: '#FFC169', + fill: '#F8E800' + }, + { + stroke: '#008009', + fill: '#00EA11' + }, + { + stroke: '#00EA11', + fill: '#008009' + }, + { + stroke: '#00B20D', + fill: '#00EA11' + }, + { + stroke: '#00EA11', + fill: '#00B20D' + }, + { + stroke: '#8BFF7A', + fill: '#00EA11' + }, + { + stroke: '#00588C', + fill: '#00EA11' + }, + { + stroke: '#00EA11', + fill: '#00588C' + }, + { + stroke: '#005FE4', + fill: '#00EA11' + }, + { + stroke: '#00EA11', + fill: '#005FE4' + }, + { + stroke: '#BCCDFF', + fill: '#00EA11' + }, + { + stroke: '#5E008C', + fill: '#00EA11' + }, + { + stroke: '#00EA11', + fill: '#5E008C' + }, + { + stroke: '#7F00BF', + fill: '#00EA11' + }, + { + stroke: '#00EA11', + fill: '#7F00BF' + }, + { + stroke: '#D1A3FF', + fill: '#00EA11' + }, + { + stroke: '#B20008', + fill: '#00EA11' + }, + { + stroke: '#00EA11', + fill: '#B20008' + }, + { + stroke: '#FF2B34', + fill: '#00EA11' + }, + { + stroke: '#00EA11', + fill: '#FF2B34' + }, + { + stroke: '#FFADCE', + fill: '#00EA11' + }, + { + stroke: '#9A5200', + fill: '#00EA11' + }, + { + stroke: '#00EA11', + fill: '#9A5200' + }, + { + stroke: '#FF8F00', + fill: '#00EA11' + }, + { + stroke: '#00EA11', + fill: '#FF8F00' + }, + { + stroke: '#FFC169', + fill: '#00EA11' + }, + { + stroke: '#807500', + fill: '#00EA11' + }, + { + stroke: '#00EA11', + fill: '#807500' + }, + { + stroke: '#BE9E00', + fill: '#00EA11' + }, + { + stroke: '#00EA11', + fill: '#BE9E00' + }, + { + stroke: '#F8E800', + fill: '#00EA11' + }, + { + stroke: '#00588C', + fill: '#00A0FF' + }, + { + stroke: '#00A0FF', + fill: '#00588C' + }, + { + stroke: '#005FE4', + fill: '#00A0FF' + }, + { + stroke: '#00A0FF', + fill: '#005FE4' + }, + { + stroke: '#BCCDFF', + fill: '#00A0FF' + }, + { + stroke: '#5E008C', + fill: '#00A0FF' + }, + { + stroke: '#00A0FF', + fill: '#5E008C' + }, + { + stroke: '#9900E6', + fill: '#00A0FF' + }, + { + stroke: '#00A0FF', + fill: '#9900E6' + }, + { + stroke: '#D1A3FF', + fill: '#00A0FF' + }, + { + stroke: '#B20008', + fill: '#00A0FF' + }, + { + stroke: '#00A0FF', + fill: '#B20008' + }, + { + stroke: '#FF2B34', + fill: '#00A0FF' + }, + { + stroke: '#00A0FF', + fill: '#FF2B34' + }, + { + stroke: '#FFADCE', + fill: '#00A0FF' + }, + { + stroke: '#9A5200', + fill: '#00A0FF' + }, + { + stroke: '#00A0FF', + fill: '#9A5200' + }, + { + stroke: '#FF8F00', + fill: '#00A0FF' + }, + { + stroke: '#00A0FF', + fill: '#FF8F00' + }, + { + stroke: '#FFC169', + fill: '#00A0FF' + }, + { + stroke: '#807500', + fill: '#00A0FF' + }, + { + stroke: '#00A0FF', + fill: '#807500' + }, + { + stroke: '#BE9E00', + fill: '#00A0FF' + }, + { + stroke: '#00A0FF', + fill: '#BE9E00' + }, + { + stroke: '#F8E800', + fill: '#00A0FF' + }, + { + stroke: '#008009', + fill: '#00A0FF' + }, + { + stroke: '#00A0FF', + fill: '#008009' + }, + { + stroke: '#00B20D', + fill: '#00A0FF' + }, + { + stroke: '#00A0FF', + fill: '#00B20D' + }, + { + stroke: '#8BFF7A', + fill: '#00A0FF' + }, + { + stroke: '#5E008C', + fill: '#AC32FF' + }, + { + stroke: '#AC32FF', + fill: '#5E008C' + }, + { + stroke: '#7F00BF', + fill: '#AC32FF' + }, + { + stroke: '#AC32FF', + fill: '#7F00BF' + }, + { + stroke: '#D1A3FF', + fill: '#AC32FF' + }, + { + stroke: '#B20008', + fill: '#AC32FF' + }, + { + stroke: '#AC32FF', + fill: '#B20008' + }, + { + stroke: '#FF2B34', + fill: '#AC32FF' + }, + { + stroke: '#AC32FF', + fill: '#FF2B34' + }, + { + stroke: '#FFADCE', + fill: '#AC32FF' + }, + { + stroke: '#9A5200', + fill: '#AC32FF' + }, + { + stroke: '#AC32FF', + fill: '#9A5200' + }, + { + stroke: '#FF8F00', + fill: '#AC32FF' + }, + { + stroke: '#AC32FF', + fill: '#FF8F00' + }, + { + stroke: '#FFC169', + fill: '#AC32FF' + }, + { + stroke: '#807500', + fill: '#AC32FF' + }, + { + stroke: '#AC32FF', + fill: '#807500' + }, + { + stroke: '#BE9E00', + fill: '#AC32FF' + }, + { + stroke: '#AC32FF', + fill: '#BE9E00' + }, + { + stroke: '#F8E800', + fill: '#AC32FF' + }, + { + stroke: '#008009', + fill: '#AC32FF' + }, + { + stroke: '#AC32FF', + fill: '#008009' + }, + { + stroke: '#00B20D', + fill: '#AC32FF' + }, + { + stroke: '#AC32FF', + fill: '#00B20D' + }, + { + stroke: '#8BFF7A', + fill: '#AC32FF' + }, + { + stroke: '#00588C', + fill: '#AC32FF' + }, + { + stroke: '#AC32FF', + fill: '#00588C' + }, + { + stroke: '#005FE4', + fill: '#AC32FF' + }, + { + stroke: '#AC32FF', + fill: '#005FE4' + }, + { + stroke: '#BCCDFF', + fill: '#AC32FF' + } + ]; + + return xocolor; +}); |
