Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PBL-21894 Add color support for window layout editor #222

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
+958 −75
Open

PBL-21894 Add color support for window layout editor #222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
fcbd4cd
Support for colours in IB.
Sep 30, 2015
1ae78b3
Added a fully working colour picker for IB colours.
Oct 2, 2015
3532190
IB support for switching between Colour/BW preview.
Oct 2, 2015
70214c4
Cleanup, whatsnew.py, and changes for code review
Oct 2, 2015
5c80955
Swapped right-bar buttons
Oct 2, 2015
39e739b
SDK-dependant options and display
Jan 12, 2016
758a606
Renamed ColourEnabled to colorEnabled
Jan 12, 2016
8a384c2
Include PBI in per-platform resource previews
Jan 12, 2016
8bfe38a
Optimized colour description object.
Jan 20, 2016
7671639
Added Gray for SDK 3 B&W watches
Jan 20, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 107 additions & 8 deletions ide/static/ide/css/ib.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,78 @@
-webkit-filter: invert(100%); /* For Chrome/Safari/Opera - we actually prefer vendor-specific here. */
}

/* Colour picker from Slate */
.item-color {
display: none;
}

.item-styled-color {
position: relative;
}

.item-styled-color .value {
border-radius: 5px;
border-color: #A8A8A8;
border-width: 1px;
border-style: solid;
display: block;
height: 40px;
}

.item-styled-color .color-box-wrap {
display: none;
box-sizing: border-box;
position: absolute;
padding: 0 0 100% 0;
margin: 0.6em 0 0em;
}

.item-styled-color .color-box-wrap.show {
display: block;
}

.item-styled-color .color-box-wrap .color-box-container {
position: absolute;
background: repeating-linear-gradient(45deg, #aaa, #aaa 4px, #fff 5px, #fff 10px);
height: 99.97%;
width: 300px;
height: 300px;
left: 0;
top: 0;
z-index: 10;
}

.item-styled-color .color-box-wrap .color-box-container .color-box {
float: left;
cursor: pointer;
}

.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tl {
border-top-left-radius: 5px;
}

.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tr {
border-top-right-radius: 5px;
}

.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-bl {
border-bottom-left-radius: 5px;
}

.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-br {
border-bottom-right-radius: 5px;
}

/* Colour Pickers */

.ib-colours select {
width: 170px;
}

.ib-colour-label {
margin-top: 29px;
}

/* Resizer */

.ib-resizer {
Expand Down Expand Up @@ -88,33 +160,54 @@

/* ActionBarLayer */

.ib-actionbarlayer {
.ib-canvas-sdk2 .ib-actionbarlayer {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}

.ib-actionbarlayer-icon {
position: absolute;
left: 1px;
width: 18px;
height: 18px;
text-align: center;
background-repeat: no-repeat;
pointer-events: none;
}

.ib-icon-up {
.ib-canvas-sdk2 .ib-actionbarlayer-icon {
left: 1px;
width: 18px;
height: 18px;
}

.ib-canvas-sdk3 .ib-actionbarlayer-icon {
left: 5px;
width: 22px;
height: 22px;
}

.ib-canvas-sdk2 .ib-icon-up {
top: calc(16% - 9px);
}

.ib-icon-select {
.ib-canvas-sdk2 .ib-icon-select {
top: calc(50% - 9px);
}

.ib-icon-down {
.ib-canvas-sdk2 .ib-icon-down {
top: calc(83% - 9px);
}

.ib-canvas-sdk3 .ib-icon-up {
top: calc(19% - 11px);
}

.ib-canvas-sdk3 .ib-icon-select {
top: calc(50% - 11px);
}

.ib-canvas-sdk3 .ib-icon-down {
top: calc(80% - 11px);
}

/* MenuLayer */

.ib-menulayer {
Expand Down Expand Up @@ -179,4 +272,10 @@
.ib-layerlistview li.selected {
color: #333333;
background-color: #969696;
}
}

/* Global canvas settings form */

.ib-settings select, .ib-settings input {
width: 140px;
}
2 changes: 1 addition & 1 deletion ide/static/ide/css/ide.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -770,7 +770,7 @@ table.build-results tr.pending .build-state {
float: left;
}

#ui-layer-list {
#ui-settings {
padding-top: 20px;
}

Expand Down
142 changes: 142 additions & 0 deletions ide/static/ide/js/colour_picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
/* Modified Slate colour picker, from https://github.com/pebble/slate/blob/master/lib/js/main.js */

(function ($) {
'use strict';

var ENUMS = {
COLOR: {
EMPTY: 'transparent'
}
};

$.extend($.fn, {
pebbleColourPicker: function (options) {

var options = $.extend({}, {
sunny: false,
value_mapping: null
}, options || {});

var layout = [
[false, false, '#55FF00', '#AAFF55', false, '#FFFF55', '#FFFFAA', false, false],
[false, '#AAFFAA', '#55FF55', '#00FF00', '#AAFF00', '#FFFF00', '#FFAA55', '#FFAAAA', false],
['#55FFAA', '#00FF55', '#00AA00', '#55AA00', '#AAAA55', '#AAAA00', '#FFAA00', '#FF5500', '#FF5555'],
['#AAFFFF', '#00FFAA', '#00AA55', '#55AA55', '#005500', '#555500', '#AA5500', '#FF0000', '#FF0055'],
[false, '#55AAAA', '#00AAAA', '#005555', '#FFFFFF', '#000000', '#AA5555', '#AA0000', false],
['#55FFFF', '#00FFFF', '#00AAFF', '#0055AA', '#AAAAAA', '#555555', '#550000', '#AA0055', '#FF55AA'],
['#55AAFF', '#0055FF', '#0000FF', '#0000AA', '#000055', '#550055', '#AA00AA', '#FF00AA', '#FFAAFF'],
[false, '#5555AA', '#5555FF', '#5500FF', '#5500AA', '#AA00FF', '#FF00FF', '#FF55FF', false],
[false, false, false, '#AAAAFF', '#AA55FF', '#AA55AA', false, false, false],
];

var mappingSunny = {
'000000': '000000', '000055': '001e41', '0000aa': '004387',
'0000ff': '0068ca', '005500': '2b4a2c', '005555': '27514f',
'0055aa': '16638d', '0055ff': '007dce', '00aa00': '5e9860',
'00aa55': '5c9b72', '00aaaa': '57a5a2', '00aaff': '4cb4db',
'00ff00': '8ee391', '00ff55': '8ee69e', '00ffaa': '8aebc0',
'00ffff': '84f5f1', '550000': '4a161b', '550055': '482748',
'5500aa': '40488a', '5500ff': '2f6bcc', '555500': '564e36',
'555555': '545454', '5555aa': '4f6790', '5555ff': '4180d0',
'55aa00': '759a64', '55aa55': '759d76', '55aaaa': '71a6a4',
'55aaff': '69b5dd', '55ff00': '9ee594', '55ff55': '9de7a0',
'55ffaa': '9becc2', '55ffff': '95f6f2', 'aa0000': '99353f',
'aa0055': '983e5a', 'aa00aa': '955694', 'aa00ff': '8f74d2',
'aa5500': '9d5b4d', 'aa5555': '9d6064', 'aa55aa': '9a7099',
'aa55ff': '9587d5', 'aaaa00': 'afa072', 'aaaa55': 'aea382',
'aaaaaa': 'ababab', 'ffffff': 'ffffff', 'aaaaff': 'a7bae2',
'aaff00': 'c9e89d', 'aaff55': 'c9eaa7', 'aaffaa': 'c7f0c8',
'aaffff': 'c3f9f7', 'ff0000': 'e35462', 'ff0055': 'e25874',
'ff00aa': 'e16aa3', 'ff00ff': 'de83dc', 'ff5500': 'e66e6b',
'ff5555': 'e6727c', 'ff55aa': 'e37fa7', 'ff55ff': 'e194df',
'ffaa00': 'f1aa86', 'ffaa55': 'f1ad93', 'ffaaaa': 'efb5b8',
'ffaaff': 'ecc3eb', 'ffff00': 'ffeeab', 'ffff55': 'fff1b5',
'ffffaa': 'fff6d3'
};

this.each(function () {

var $color = $(this);
var $item = $color.parent();
var grid = '';
var itemWidth = 100 / layout[0].length;
var itemHeight = 100 / layout.length;
var boxHeight = itemWidth * layout.length;

for (var i = 0; i < layout.length; i++) {
for (var j = 0; j < layout[i].length; j++) {

var color = layout[i][j] || ENUMS.COLOR.EMPTY;
var selectable = 'selectable';

var roundedTL = (i === 0 && j === 0)
|| i === 0 && !layout[i][j - 1]
|| !layout[i][j - 1] && !layout[i - 1][j]
? ' rounded-tl' : '';

var roundedTR = i === 0 && !layout[i][j + 1]
|| !layout[i][j + 1] && !layout[i - 1][j]
? ' rounded-tr ' : '';

var roundedBL = (i === layout.length - 1 && j === 0)
|| i === layout.length - 1 && !layout[i][j - 1]
|| !layout[i][j - 1] && !layout[i + 1][j]
? ' rounded-bl' : '';

var roundedBR = i === layout.length - 1 && !layout[i][j + 1]
|| !layout[i][j + 1] && !layout[i + 1][j]
? ' rounded-br' : '';

if (options.sunny && color !== ENUMS.COLOR.EMPTY) {
color = '#' + mappingSunny[color.replace('#', '').toLowerCase()];
}

grid += '<i ' +
'class="color-box ' + selectable + roundedTL +
roundedTR + roundedBL + roundedBR + '" ' +
'data-value="' + color.replace(/^#/, '0x') + '" ' +
'style="' +
'width:' + itemWidth + '%; ' +
'height:' + itemHeight + '%; ' +
'background:' + color + ';">' +
'</i>';
}
}

var $injectedColor = $('<div class="item-styled-color">' +
'<span class="value" style="background:' + $color.val().replace(/^0x/, '#') + '"></span>' +
'<div ' +
'style="padding-bottom:' + boxHeight + '%"' +
'class="color-box-wrap">' +
'<div class="color-box-container">' +
grid +
'</div>' +
'</div>' +
'</div>');
$item.append($injectedColor);

var $valueDisplay = $injectedColor.find('.value');

$injectedColor.on('click', function (ev) {
$item.find('.color-box-wrap').toggleClass('show');
});

$item.find('.color-box.selectable').on('click', function (ev) {
ev.preventDefault();
var value = $(this).data('value');
var input_value = value;
if (_.isFunction(options.value_mapping)) {
input_value = options.value_mapping(value.replace('0x', '#'));
}
$color.val(input_value);
$valueDisplay.css('background-color', value.replace(/^0x/, '#'));
$color.trigger('change');
$item.find('.color-box-wrap').removeClass('show');
ev.stopPropagation();
})
});

return this;
}
});
}(jQuery));
8 changes: 5 additions & 3 deletions ide/static/ide/js/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -582,7 +582,7 @@ CloudPebble.Editor = (function() {
};

var ib_pane = $('#ui-editor-pane-template').clone().removeClass('hide').appendTo(pane).hide();
var ib_editor = new IB(ib_pane.find('.ui-canvas'), ib_pane.find('#ui-properties'), ib_pane.find('#ui-toolkit'), ib_pane.find('#ui-layer-list > div'));
var ib_editor = new IB(ib_pane.find('.ui-canvas'), ib_pane.find('#ui-properties'), ib_pane.find('#ui-toolkit'), ib_pane.find('#ui-layer-list > div'), ib_pane.find('#ui-settings'));
var ib_showing = false;

CloudPebble.GlobalShortcuts.SetShortcutHandlers({
Expand Down Expand Up @@ -728,12 +728,14 @@ CloudPebble.Editor = (function() {
button_holder.append(error_area);
button_holder.append(run_btn);
button_holder.append(save_btn);
button_holder.append(discard_btn);
button_holder.append(rename_btn);

if(source.indexOf('// BEGIN AUTO-GENERATED UI CODE; DO NOT MODIFY') != -1) {
button_holder.append(ib_btn);
}

button_holder.append(rename_btn);
button_holder.append(discard_btn);

// You must have an app.js in pebblejs projects.
if(CloudPebble.ProjectInfo.type != 'pebblejs' || file.name != 'app.js') {
button_holder.append(delete_btn);
Expand Down
Loading