codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-04-26 05:53:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Made the thang editor a little more organized.

Browse source
This commit is contained in:
Scott Erickson 2014-01-06 19:09:43 -08:00
parent 59ec63c041
commit ddbf45b50c
3 changed files with 82 additions and 60 deletions
app
styles/editor/thang
edit.sass
templates/editor/thang
edit.jade
views/editor/thang
edit.coffee

86
app/styles/editor/thang/edit.sass
View file

@ -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

53
app/templates/editor/thang/edit.jade
View file

@ -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

3
app/views/editor/thang/edit.coffee
View file

@ -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: =>