layout improvements

pull/3/merge
Michael Aschauer 2015-05-10 02:13:32 +02:00
rodzic 93fe6c82dd
commit 623887ad5e
3 zmienionych plików z 365 dodań i 182 usunięć

Wyświetl plik

@ -20,12 +20,8 @@
<script type="text/javascript" src="cloud.js"></script>
<script type="text/javascript" src="sha512.js"></script>
<script type="text/javascript" src="stitchcode/backend/js/jquery.js"></script>
<script type="text/javascript" src="stitchcode/backend/js/jquery.fileDownload.js"></script>
<script type="text/javascript" src="stitchcode/FileSaver.js"></script>
<script type="text/javascript" src="stitchcode/byob.js"></script>
<script type="text/javascript" src="stitchcode/blocks.js"></script>
<script type="text/javascript" src="stitchcode/stitchcodeChangeSetDel.js"></script>
<script type="text/javascript" src="stitchcode/stitchcodeGUI.js"></script>
<script type="text/javascript" src="stitchcode/stitchcodeChangeSet.js"></script>

Wyświetl plik

@ -1,6 +1,19 @@
// Force flat design
IDE_Morph.prototype.setDefaultDesign = IDE_Morph.prototype.setFlatDesign;
IDE_Morph.prototype.originalInit = IDE_Morph.prototype.init;
IDE_Morph.prototype.init = function(isAutoFill) {
this.originalInit();
// Borders are actually just paddings, so we set the bg white to get them to be white
//this.backgroundColor = new Color(255,255,255);
//this.setColor(this.backgroundColor);
this.padding = 2;
//this.frameColor = new Color(220,220,220);
}
// change logo
IDE_Morph.prototype.originalCreateLogo = IDE_Morph.prototype.createLogo;
IDE_Morph.prototype.createLogo = function () {
@ -10,6 +23,8 @@ IDE_Morph.prototype.createLogo = function () {
} else {
this.logo.texture = 'stitchcode/stitchcode_logo_small_black.png';
}
this.logo.color = new Color(230, 230, 230);
this.logo.drawNew();
}
@ -19,10 +34,8 @@ IDE_Morph.prototype.buildPanes = function () {
this.createCategories();
this.createPalette();
this.createStage();
this.createSpriteBar();
this.createSpriteEditor();
this.createCorralBar();
this.createCorral();
this.createSpriteBar();
this.createStatusDisplay();
};
@ -30,7 +43,7 @@ IDE_Morph.prototype.buildPanes = function () {
IDE_Morph.prototype.createControlBar = function () {
// assumes the logo has already been created
var padding = 5,
var padding = 4,
button,
stopButton,
pauseButton,
@ -56,6 +69,7 @@ IDE_Morph.prototype.createControlBar = function () {
this.controlBar = new Morph();
this.controlBar.color = this.frameColor;
this.controlBar.color = new Color(250, 250, 250);
this.controlBar.setHeight(this.logo.height()); // height is fixed
this.controlBar.mouseClickLeft = function () {
this.world().fillPage();
@ -646,7 +660,7 @@ IDE_Morph.prototype.toggleAppMode = function (appMode) {
IDE_Morph.prototype.createStatusDisplay = function () {
var frame,
padding = 1,
padding = 2,
myself = this,
elements = [],
beetle = this.currentSprite.beetle,
@ -782,6 +796,7 @@ IDE_Morph.prototype.createStatusDisplay = function () {
});
toogleShowStitchButton.columns = 2
toogleShowStitchButton.newLines = 1;
elements.push(toogleShowStitchButton);
var toogleShowJumpsButton = new ToggleMorph(
@ -819,13 +834,15 @@ IDE_Morph.prototype.fixLayout = function (situation) {
this.controlBar.fixLayout();
// categories
this.categories.padding = this.padding;
this.categories.setLeft(this.logo.left());
this.categories.setTop(this.logo.bottom());
this.categories.setTop(this.logo.bottom()+padding);
}
// palette
this.palette.setLeft(this.logo.left());
this.palette.setTop(this.categories.bottom());
this.palette.setTop(this.categories.bottom() + padding);
this.palette.setHeight(this.bottom() - this.palette.top());
if (situation !== 'refreshPalette') {
@ -1212,175 +1229,6 @@ IDE_Morph.prototype.createSpriteBar = function () {
};
};
IDE_Morph.prototype.createCorralBar = function () {
// assumes the stage has already been created
var padding = 5,
newbutton,
paintbutton,
colors = [
this.groupColor,
this.frameColor.darker(50),
this.frameColor.darker(50)
];
if (this.corralBar) {
this.corralBar.destroy();
}
this.corralBar = new Morph();
this.corralBar.color = this.frameColor;
this.corralBar.setHeight(this.logo.height()); // height is fixed
//this.add(this.corralBar);
// new sprite button
newbutton = new PushButtonMorph(
this,
"addNewSprite",
new SymbolMorph("turtle", 14)
);
newbutton.corner = 12;
newbutton.color = colors[0];
newbutton.highlightColor = colors[1];
newbutton.pressColor = colors[2];
newbutton.labelMinExtent = new Point(36, 18);
newbutton.padding = 0;
newbutton.labelShadowOffset = new Point(-1, -1);
newbutton.labelShadowColor = colors[1];
newbutton.labelColor = this.buttonLabelColor;
newbutton.contrast = this.buttonContrast;
newbutton.drawNew();
newbutton.hint = "add a new Turtle sprite";
newbutton.fixLayout();
newbutton.setCenter(this.corralBar.center());
newbutton.setLeft(this.corralBar.left() + padding);
this.corralBar.add(newbutton);
paintbutton = new PushButtonMorph(
this,
"paintNewSprite",
new SymbolMorph("brush", 15)
);
paintbutton.corner = 12;
paintbutton.color = colors[0];
paintbutton.highlightColor = colors[1];
paintbutton.pressColor = colors[2];
paintbutton.labelMinExtent = new Point(36, 18);
paintbutton.padding = 0;
paintbutton.labelShadowOffset = new Point(-1, -1);
paintbutton.labelShadowColor = colors[1];
paintbutton.labelColor = this.buttonLabelColor;
paintbutton.contrast = this.buttonContrast;
paintbutton.drawNew();
paintbutton.hint = "paint a new sprite";
paintbutton.fixLayout();
paintbutton.setCenter(this.corralBar.center());
paintbutton.setLeft(
this.corralBar.left() + padding + newbutton.width() + padding
);
this.corralBar.add(paintbutton);
};
IDE_Morph.prototype.createCorral = function () {
// assumes the corral bar has already been created
var frame, template, padding = 5, myself = this;
if (this.corral) {
this.corral.destroy();
}
this.corral = new Morph();
this.corral.color = this.groupColor;
//this.add(this.corral);
this.corral.stageIcon = new SpriteIconMorph(this.stage);
this.corral.stageIcon.isDraggable = false;
this.corral.add(this.corral.stageIcon);
frame = new ScrollFrameMorph(null, null, this.sliderColor);
frame.acceptsDrops = false;
frame.contents.acceptsDrops = false;
frame.contents.wantsDropOf = function (morph) {
return morph instanceof SpriteIconMorph;
};
frame.contents.reactToDropOf = function (spriteIcon) {
myself.corral.reactToDropOf(spriteIcon);
};
frame.alpha = 0;
this.sprites.asArray().forEach(function (morph) {
template = new SpriteIconMorph(morph, template);
frame.contents.add(template);
});
this.corral.frame = frame;
this.corral.add(frame);
this.corral.fixLayout = function () {
this.stageIcon.setCenter(this.center());
this.stageIcon.setLeft(this.left() + padding);
this.frame.setLeft(this.stageIcon.right() + padding);
this.frame.setExtent(new Point(
this.right() - this.frame.left(),
this.height()
));
this.arrangeIcons();
this.refresh();
};
this.corral.arrangeIcons = function () {
var x = this.frame.left(),
y = this.frame.top(),
max = this.frame.right(),
start = this.frame.left();
this.frame.contents.children.forEach(function (icon) {
var w = icon.width();
if (x + w > max) {
x = start;
y += icon.height(); // they're all the same
}
icon.setPosition(new Point(x, y));
x += w;
});
this.frame.contents.adjustBounds();
};
this.corral.addSprite = function (sprite) {
this.frame.contents.add(new SpriteIconMorph(sprite));
this.fixLayout();
};
this.corral.refresh = function () {
this.stageIcon.refresh();
this.frame.contents.children.forEach(function (icon) {
icon.refresh();
});
};
this.corral.wantsDropOf = function (morph) {
return morph instanceof SpriteIconMorph;
};
this.corral.reactToDropOf = function (spriteIcon) {
var idx = 1,
pos = spriteIcon.position();
spriteIcon.destroy();
this.frame.contents.children.forEach(function (icon) {
if (pos.gt(icon.position()) || pos.y > icon.bottom()) {
idx += 1;
}
});
myself.sprites.add(spriteIcon.object, idx);
myself.createCorral();
myself.fixLayout();
};
};
// StageMorph user menu
StageMorph.prototype.userMenu = function () {
@ -1466,7 +1314,7 @@ IDE_Morph.prototype.createCategories = function () {
);
button.corner = 8;
button.padding = 0;
button.padding = 3;
button.labelShadowOffset = new Point(-1, -1);
button.labelShadowColor = colors[1];
button.labelColor = myself.buttonLabelColor;
@ -1726,5 +1574,344 @@ IDE_Morph.prototype.snapMenu = function () {
menu.popup(world, this.logo.bottomLeft());
};
IDE_Morph.prototype.originalCreatePalette = IDE_Morph.prototype.createPalette;
IDE_Morph.prototype.createPalette = function(){
this.originalCreatePalette();
this.palette.color = new Color(230, 230, 230);
}
IDE_Morph.prototype.originalCreateSpriteEditor = IDE_Morph.prototype.createSpriteEditor;
IDE_Morph.prototype.createSpriteEditor = function(){
this.originalCreateSpriteEditor();
this.spriteEditor.color = new Color(240, 240, 240);
this.currentSprite.scripts.color = new Color(240, 240, 240);
}
IDE_Morph.prototype.createSpriteBar = function () {
// assumes that the categories pane has already been created
var rotationStyleButtons = [],
thumbSize = new Point(45, 45),
nameField,
padlock,
thumbnail,
tabCorner = 15,
tabColors = this.tabColors,
tabBar = new AlignmentMorph('row', -tabCorner * 2),
tab,
symbols = ['\u2192', '\u21BB', '\u2194'],
labels = ['don\'t rotate', 'can rotate', 'only face left/right'],
myself = this;
if (this.spriteBar) {
this.spriteBar.destroy();
}
this.spriteBar = new Morph();
this.spriteBar.color = this.frameColor;
//this.add(this.spriteBar);
function addRotationStyleButton(rotationStyle) {
var colors = myself.rotationStyleColors,
button;
button = new ToggleButtonMorph(
colors,
myself, // the IDE is the target
function () {
if (myself.currentSprite instanceof SpriteMorph) {
myself.currentSprite.rotationStyle = rotationStyle;
myself.currentSprite.changed();
myself.currentSprite.drawNew();
myself.currentSprite.changed();
}
rotationStyleButtons.forEach(function (each) {
each.refresh();
});
},
symbols[rotationStyle], // label
function () { // query
return myself.currentSprite instanceof SpriteMorph
&& myself.currentSprite.rotationStyle === rotationStyle;
},
null, // environment
localize(labels[rotationStyle])
);
button.corner = 8;
button.labelMinExtent = new Point(11, 11);
button.padding = 0;
button.labelShadowOffset = new Point(-1, -1);
button.labelShadowColor = colors[1];
button.labelColor = myself.buttonLabelColor;
button.fixLayout();
button.refresh();
rotationStyleButtons.push(button);
button.setPosition(myself.spriteBar.position().add(2));
button.setTop(button.top()
+ ((rotationStyleButtons.length - 1) * (button.height() + 2))
);
myself.spriteBar.add(button);
if (myself.currentSprite instanceof StageMorph) {
button.hide();
}
return button;
}
addRotationStyleButton(1);
addRotationStyleButton(2);
addRotationStyleButton(0);
this.rotationStyleButtons = rotationStyleButtons;
thumbnail = new Morph();
thumbnail.setExtent(thumbSize);
thumbnail.image = this.currentSprite.thumbnail(thumbSize);
thumbnail.setPosition(
rotationStyleButtons[0].topRight().add(new Point(5, 3))
);
this.spriteBar.add(thumbnail);
thumbnail.fps = 3;
thumbnail.step = function () {
if (thumbnail.version !== myself.currentSprite.version) {
thumbnail.image = myself.currentSprite.thumbnail(thumbSize);
thumbnail.changed();
thumbnail.version = myself.currentSprite.version;
}
};
nameField = new InputFieldMorph(this.currentSprite.name);
nameField.setWidth(100); // fixed dimensions
nameField.contrast = 90;
nameField.setPosition(thumbnail.topRight().add(new Point(10, 3)));
this.spriteBar.add(nameField);
nameField.drawNew();
nameField.accept = function () {
var newName = nameField.getValue();
myself.currentSprite.setName(
myself.newSpriteName(newName, myself.currentSprite)
);
nameField.setContents(myself.currentSprite.name);
};
this.spriteBar.reactToEdit = nameField.accept;
// padlock
padlock = new ToggleMorph(
'checkbox',
null,
function () {
myself.currentSprite.isDraggable =
!myself.currentSprite.isDraggable;
},
localize('draggable'),
function () {
return myself.currentSprite.isDraggable;
}
);
padlock.label.isBold = false;
padlock.label.setColor(this.buttonLabelColor);
padlock.color = tabColors[2];
padlock.highlightColor = tabColors[0];
padlock.pressColor = tabColors[1];
padlock.tick.shadowOffset = MorphicPreferences.isFlat ?
new Point() : new Point(-1, -1);
padlock.tick.shadowColor = new Color(); // black
padlock.tick.color = this.buttonLabelColor;
padlock.tick.isBold = false;
padlock.tick.drawNew();
padlock.setPosition(nameField.bottomLeft().add(2));
padlock.drawNew();
this.spriteBar.add(padlock);
if (this.currentSprite instanceof StageMorph) {
padlock.hide();
}
// tab bar
tabBar.tabTo = function (tabString) {
var active;
myself.currentTab = tabString;
this.children.forEach(function (each) {
each.refresh();
if (each.state) {active = each; }
});
active.refresh(); // needed when programmatically tabbing
myself.createSpriteEditor();
myself.fixLayout('tabEditor');
};
tab = new TabMorph(
tabColors,
null, // target
function () {tabBar.tabTo('scripts'); },
localize('Scripts'), // label
function () { // query
return myself.currentTab === 'scripts';
}
);
tab.padding = 3;
tab.corner = tabCorner;
tab.edge = 1;
tab.labelShadowOffset = new Point(-1, -1);
tab.labelShadowColor = tabColors[1];
tab.labelColor = this.buttonLabelColor;
tab.drawNew();
tab.fixLayout();
tabBar.add(tab);
tab = new TabMorph(
tabColors,
null, // target
function () {tabBar.tabTo('costumes'); },
localize('Costumes'), // label
function () { // query
return myself.currentTab === 'costumes';
}
);
tab.padding = 3;
tab.corner = tabCorner;
tab.edge = 1;
tab.labelShadowOffset = new Point(-1, -1);
tab.labelShadowColor = tabColors[1];
tab.labelColor = this.buttonLabelColor;
tab.drawNew();
tab.fixLayout();
tabBar.add(tab);
tab = new TabMorph(
tabColors,
null, // target
function () {tabBar.tabTo('sounds'); },
localize('Sounds'), // label
function () { // query
return myself.currentTab === 'sounds';
}
);
tab.padding = 3;
tab.corner = tabCorner;
tab.edge = 1;
tab.labelShadowOffset = new Point(-1, -1);
tab.labelShadowColor = tabColors[1];
tab.labelColor = this.buttonLabelColor;
tab.drawNew();
tab.fixLayout();
tabBar.add(tab);
tabBar.fixLayout();
tabBar.children.forEach(function (each) {
each.refresh();
});
this.spriteBar.tabBar = tabBar;
this.spriteBar.add(this.spriteBar.tabBar);
this.spriteBar.fixLayout = function () {
this.tabBar.setLeft(this.left());
this.tabBar.setBottom(this.bottom());
};
};
IDE_Morph.prototype.createCorral = function () {
// assumes the corral bar has already been created
var frame, template, padding = 5, myself = this;
if (this.corral) {
this.corral.destroy();
}
this.corral = new Morph();
this.corral.color = this.groupColor;
//this.add(this.corral);
this.corral.stageIcon = new SpriteIconMorph(this.stage);
this.corral.stageIcon.isDraggable = false;
this.corral.add(this.corral.stageIcon);
frame = new ScrollFrameMorph(null, null, this.sliderColor);
frame.acceptsDrops = false;
frame.contents.acceptsDrops = false;
frame.contents.wantsDropOf = function (morph) {
return morph instanceof SpriteIconMorph;
};
frame.contents.reactToDropOf = function (spriteIcon) {
myself.corral.reactToDropOf(spriteIcon);
};
frame.alpha = 0;
this.sprites.asArray().forEach(function (morph) {
template = new SpriteIconMorph(morph, template);
frame.contents.add(template);
});
this.corral.frame = frame;
this.corral.add(frame);
this.corral.fixLayout = function () {
this.stageIcon.setCenter(this.center());
this.stageIcon.setLeft(this.left() + padding);
this.frame.setLeft(this.stageIcon.right() + padding);
this.frame.setExtent(new Point(
this.right() - this.frame.left(),
this.height()
));
this.arrangeIcons();
this.refresh();
};
this.corral.arrangeIcons = function () {
var x = this.frame.left(),
y = this.frame.top(),
max = this.frame.right(),
start = this.frame.left();
this.frame.contents.children.forEach(function (icon) {
var w = icon.width();
if (x + w > max) {
x = start;
y += icon.height(); // they're all the same
}
icon.setPosition(new Point(x, y));
x += w;
});
this.frame.contents.adjustBounds();
};
this.corral.addSprite = function (sprite) {
this.frame.contents.add(new SpriteIconMorph(sprite));
this.fixLayout();
};
this.corral.refresh = function () {
this.stageIcon.refresh();
this.frame.contents.children.forEach(function (icon) {
icon.refresh();
});
};
this.corral.wantsDropOf = function (morph) {
return morph instanceof SpriteIconMorph;
};
this.corral.reactToDropOf = function (spriteIcon) {
var idx = 1,
pos = spriteIcon.position();
spriteIcon.destroy();
this.frame.contents.children.forEach(function (icon) {
if (pos.gt(icon.position()) || pos.y > icon.bottom()) {
idx += 1;
}
});
myself.sprites.add(spriteIcon.object, idx);
myself.createCorral();
myself.fixLayout();
};
};

Plik binarny nie jest wyświetlany.

Przed

Szerokość:  |  Wysokość:  |  Rozmiar: 2.9 KiB

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 2.3 KiB