diff --git a/app/styles/editor/thang/edit.sass b/app/styles/editor/thang/edit.sass index 3257a7d42..8d2a546fc 100644 --- a/app/styles/editor/thang/edit.sass +++ b/app/styles/editor/thang/edit.sass @@ -1,57 +1,73 @@ #editor-thang-type-edit-view #save-button float: right + margin-right: 20px + + #portrait + float: right - .control-row + .main-area padding: 5px - & > * + & > div.slider-cell margin-right: 5px + float: right + .file-controls + float: left + position: relative + top: 5px + left: 5px + button + margin-left: 5px select position: relative top: 5px input display: none - #state - position: absolute - top: 10px - left: 40% - right: 40% - height: 30px - text-align: center - font-size: 20px - line-height: 30px - text-transform: uppercase - - #canvas - float: right - width: 400px - - #settings-col - float: left - width: 550px - - .rotation-label - width: 45px - display: inline-block - margin-left: 5px - .slider-cell margin: 5px 0 float: left width: 120px - + .selector display: inline-block width: 100px position: relative top: 3px - - #thang-components-edit-view - position: relative - height: 500px - top: -20px - .treema-root - background-color: white - border-radius: 4px + #canvas + float: right + width: 400px + border: 1px solid blue + + #settings-col + float: left + width: 550px + + #thang-type-treema + height: 400px + overflow: scroll + box-sizing: border-box + + +#thang-components-edit-view + position: relative + height: 500px + top: -20px + + .treema-root + background-color: white + border-radius: 4px + +#canvases + border: 1px solid green + max-width: 100% + max-height: 600px + overflow: scroll + clear: both + box-sizing: border-box + margin-bottom: 20px + canvas + background: darkseagreen + margin: 2px + diff --git a/app/templates/editor/thang/edit.jade b/app/templates/editor/thang/edit.jade index 23dae1b92..bf48fdbad 100644 --- a/app/templates/editor/thang/edit.jade +++ b/app/templates/editor/thang/edit.jade @@ -2,6 +2,8 @@ extends /templates/base block content + img#portrait.img-polaroid + button.btn.btn-primary#save-button(data-toggle="coco-modal", data-target="modal/save_version") | Save @@ -12,52 +14,55 @@ block content a(href="#editor-thang-main-tab-view", data-toggle="tab") Main li a(href="#editor-thang-components-tab-view", data-toggle="tab") Components + li + a(href="#editor-thang-canvases-view", data-toggle="tab") Canvases div.tab-content div.tab-pane.active#editor-thang-main-tab-view - div.main-area - div.controls - div.control-row#animation-row - select#animations-select - for animation in animations - option #{animation} - button.btn.btn-small.btn-primary#upload-button - i.icon-upload - button.btn.btn-small.btn-primary#clear-button - i.icon-remove - input#real-upload-button(type="file") - - canvas#canvas(width="400", height="400", style="background-color:#999999") - - div#settings-col - div#thang-type-treema + div.main-area.well + div.file-controls + select#animations-select + for animation in animations + option #{animation} + button.btn.btn-small.btn-primary#upload-button + i.icon-upload + button.btn.btn-small.btn-primary#clear-button + i.icon-remove + input#real-upload-button(type="file") + div.slider-cell | Rotation: span.rotation-label .selector#rotation-slider - div.slider-cell | Scale: span.scale-label .selector#scale-slider - div.slider-cell | Resolution: span.resolution-label 4.0x .selector#resolution-slider - div.slider-cell | Health: span.health-label 10hp .selector#health-slider - - img#portrait - - div#canvases - + + .clearfix + + div#settings-col + div#thang-type-treema + + canvas#canvas(width="400", height="400", style="background-color:#999999") + + .clearfix + div.tab-pane#editor-thang-components-tab-view #thang-components-edit-view + div.tab-pane#editor-thang-canvases-view + + div#canvases + .clearfix diff --git a/app/views/editor/thang/edit.coffee b/app/views/editor/thang/edit.coffee index b3dc8ba60..fb1288726 100644 --- a/app/views/editor/thang/edit.coffee +++ b/app/views/editor/thang/edit.coffee @@ -221,6 +221,7 @@ module.exports = class ThangTypeEditView extends View portrait = @thangType.getPortraitImage(options) return unless portrait portrait?.attr('id', 'portrait').addClass('img-polaroid') + portrait.addClass 'img-polaroid' $('#portrait').replaceWith(portrait) showDisplayObject: (displayObject) -> @@ -246,7 +247,7 @@ module.exports = class ThangTypeEditView extends View initSliders: -> @rotationSlider = @initSlider $("#rotation-slider", @$el), 50, @updateRotation @scaleSlider = @initSlider $('#scale-slider', @$el), 29, @updateScale - @resolutionSlider = @initSlider $('#resolution-slider', @$el), 19, @updateResolution + @resolutionSlider = @initSlider $('#resolution-slider', @$el), 39, @updateResolution @healthSlider = @initSlider $('#health-slider', @$el), 100, @updateHealth updateRotation: =>