Skip to content

Commit

Permalink
Merge pull request #90 from paulvarache/move-tray
Browse files Browse the repository at this point in the history 
Move tray
  • Loading branch information
@rcocetta
rcocetta committed Apr 15, 2016
2 parents 61ba967 + 1bb4361 commit 6cb8e81
Show file tree
Hide file tree
Showing 7 changed files with 328 additions and 186 deletions.
80 changes: 48 additions & 32 deletions app/elements/kano-app-editor/kano-app-editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,22 @@
display: block;
@apply(--layout-vertical);
}
:host section {
@apply(--layout-horizontal);
@apply(--layout-align-stretch);
}
:host section {
@apply(--layout-horizontal);
@apply(--layout-flex);
}
:host section .ui-edition {
position: relative;
@apply(--layout-flex);
@apply(--layout-vertical);
@apply(--layout-flex);
min-width: 20%;
}
:host section .blocks-edition {
@apply(--layout-flex);
@apply(--layout-vertical);
background-color: var(--color-grey-lightest, grey);
max-width: 50%;
max-width: 80%;
min-width: 20%;
width: 60%;
}
:host .ui-edition kano-workspace {
@apply(--layout-flex);
Expand All @@ -43,9 +41,6 @@
:host kano-part-editor {
@apply(--layout-flex);
}
:host #ui-drawer {
z-index: 10;
}
:host kano-sidebar {
display: flex !important;
position: fixed;
Expand All @@ -70,6 +65,25 @@
width: 8px;
cursor: ew-resize;
};
:host .editor {
@apply(--layout-flex);
@apply(--layout-vertical);
}
:host .controls {
margin: 20px 0px 20px;
@apply(--layout-horizontal);
@apply(--layout-around-justified);
width: 100%;
}
:host .controls button {
@apply(--kano-button-big);
}
:host .add-part-button {
background: var(--green-gradient, green);
}
:host .make-button {
background: var(--orange-gradient, orange);
}
</style>
<template>
<section id="section" on-mousemove="mouseMoved" on-mouseup="completedResizing">
Expand All @@ -80,34 +94,36 @@
id="left-panel">
<!--TODO rename ui-elements to parts-->
<kano-background-editor id="background-editor" background="{{background}}" name="background" on-previous="previous"></kano-background-editor>
<kano-part-editor
id="part-editor"
on-previous="previous"
parts="{{addedParts}}"
codes="{{codes}}"
selected="{{selected}}"
default-categories="{{defaultCategories}}"
name="code"></kano-part-editor>
<div name="code" class="editor">
<kano-part-editor
id="part-editor"
on-previous="previous"
parts="{{addedParts}}"
codes="{{codes}}"
selected="{{selected}}"
default-categories="{{defaultCategories}}"></kano-part-editor>
<kano-workspace-controls
id="workspace-controls"
parts="{{addedParts}}"
opened="[[partsOpened]]"
running="{{running}}"
selected="{{selected}}"
codes="{{codes}}"
on-share-tap="share"
on-remove-part="removePart"></kano-workspace-controls>
</div>
</iron-pages>
<div class="ui-edition" id="right-panel">
<div class="ui-edition" id="right-panel" style$="[[computeBackground(background.userStyle.*)]]">
<div id="resize" on-mousedown="resizeWorkspace"></div>
<kano-workspace id="workspace"
on-ui-ready="workspaceUiReady"
parts="{{addedParts}}"
selected="{{selected}}"
running="{{running}}"
style$="[[computeBackground(background.userStyle.*)]]"></kano-workspace>
<kano-workspace-controls
id="workspace-controls"
parts="{{addedParts}}"
opened="[[partsOpened]]"
running="{{running}}"
selected="{{selected}}"
codes="{{codes}}"
on-share-tap="share"
on-add-tap="openParts"
on-make-tap="toggleRunning"
on-remove-part="removePart"></kano-workspace-controls>
running="{{running}}"></kano-workspace>
<div class="controls">
<button type="button" class="add-part-button" on-tap="openParts">Add Part</button>
<button type="button" class="make-button" on-tap="toggleRunning">Make</button>
</div>
<kano-cover-generator id="image_generator"
element-name="kano-workspace"></kano-cover-generator>
</div>
Expand Down
61 changes: 5 additions & 56 deletions app/elements/kano-app-editor/kano-app-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,59 +322,6 @@ class KanoAppEditor {
y: point.y / rect.height * fullSize.height
};
}
sidebarUiReady (e) {
let clone;
interact(e.detail).draggable({
onmove: (event) => {
let target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';

// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
},
restrict: {
restriction: this.$.section
},
onend: () => {
this.$.section.removeChild(clone);
}
}).on('move', (event) => {
let interaction = event.interaction;

// if the pointer was moved while being held down
// and an interaction hasn't started yet
if (interaction.pointerIsDown && !interaction.interacting()) {
let original = event.currentTarget,
rect = original.getBoundingClientRect(),
style;

// create a clone of the currentTarget element
clone = Polymer.dom(original).cloneNode(true);
style = clone.style;
clone.model = original.model;
style.position = 'absolute';
style.top = `${rect.top}px`;
style.left = `${rect.left}px`;
style.zIndex = 11;

// insert the clone to the page
this.$.section.appendChild(clone);

// start a drag interaction targeting the clone
interaction.start({ name: 'drag' },
event.interactable,
clone);
}
});
}
/**
* Toggle the running state of the current app
*/
Expand Down Expand Up @@ -421,9 +368,11 @@ class KanoAppEditor {
}

offsetLeftPanel = e.clientX - container.getBoundingClientRect().left;
// Limit to 60%
offsetLeftPanel = Math.min(container.offsetWidth * 0.8, offsetLeftPanel);
offsetRightPanel = container.offsetWidth - offsetLeftPanel;
leftPanel.style.maxWidth = `${offsetLeftPanel}px`;
rightPanel.style.maxWidth = `${offsetRightPanel}px`;
//rightPanel.style.maxWidth = `${offsetRightPanel}px`;

//We need to trigger the resize of the kano-ui-workspace and the blockly workspace
window.dispatchEvent(new Event('resize'));
Expand All @@ -433,8 +382,8 @@ class KanoAppEditor {
* Restore the editor style
*/
clearEditorStyle () {
this.$['left-panel'].style.maxWidth = 'none';
this.$['right-panel'].style.maxWidth = 'none';
this.$['left-panel'].style.maxWidth = '80%';
//this.$['right-panel'].style.maxWidth = 'none';
}
}
Polymer(KanoAppEditor);
Loading

0 comments on commit 6cb8e81

Please sign in to comment.