codeninjasllc/codecombat
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'dkundel-feature/fullscreen-editor'

Browse source
This commit is contained in:
Nick Winter 2014-07-09 13:41:57 -07:00
commit ca847329b1
16 changed files with 135 additions and 24 deletions

6
app/styles/play/level.sass
View file

@ -37,6 +37,12 @@ body.is-playing
right: 0 right: 0
top: 0px top: 0px
bottom: 0 bottom: 0
transition: width 0.5s ease-in-out
&.fullscreen-editor
position: fixed
width: 100%
height: 100%
z-index: 20
#pointer #pointer
position: absolute position: absolute

28
app/styles/play/level/tome/problem_alert.sass
View file

@ -6,13 +6,14 @@
bottom: -120px bottom: -120px
left: 10px left: 10px
right: 10px right: 10px
background: transparent url(/images/level/code_editor_error_background.png) no-repeat background: transparent
background-size: 100% 100%
border: 0 border: 0
padding: 18px 35px 18px 14px padding: 18px 35px 18px 14px
text-shadow: none text-shadow: none
color: white color: white
word-wrap: break-word word-wrap: break-word
border-image: url(/images/level/code_editor_error_background.png) 16 20 fill round
border-width: 16px 20px
.close .close
@include opacity(0.80) @include opacity(0.80)
@ -30,11 +31,28 @@
//&.alert-error //&.alert-error
&.alert-warning &.alert-warning
background-image: url(/images/level/code_editor_warning_background.png) border-image-source: url(/images/level/code_editor_warning_background.png)
&.alert-info &.alert-info
background-image: url(/images/level/code_editor_info_background.png) border-image-source: url(/images/level/code_editor_info_background.png)
&.alert-style &.alert-style
// Do we ever want to do this for style? // Do we ever want to do this for style?
background-image: url(/images/level/code_editor_info_background.png) border-image-source: url(/images/level/code_editor_info_background.png)
html.no-borderimage
.problem-alert
border-width: 0
border-image: none
background: transparent url(/images/level/code_editor_error_background.png) no-repeat
background-size: 100% 100%
&.alert-warning
background-image: url(/images/level/code_editor_warning_background.png)
&.alert-info
background-image: url(/images/level/code_editor_info_background.png)
&.alert-style
// Do we ever want to do this for style?
background-image: url(/images/level/code_editor_info_background.png)

17
app/styles/play/level/tome/spell.sass
View file

@ -26,6 +26,13 @@
top: 0 top: 0
height: 100% height: 100%
width: 100% width: 100%
span.code-background
border-width: 22px
border-image: url(/images/level/code_editor_background.png) 22 fill round
img.code-background
display: none
.save-status .save-status
display: none display: none
@ -64,7 +71,7 @@
.ace_gutter .ace_gutter
background-color: rgba(255, 255, 255, 0.25) background-color: rgba(255, 255, 255, 0.25)
width: 40px width: 47px
margin-left: 4px margin-left: 4px
border-bottom: 1px dotted #2f261d border-bottom: 1px dotted #2f261d
@ -133,3 +140,11 @@
.ace_searchbtn, .ace_replacebtn .ace_searchbtn, .ace_replacebtn
padding: 0px 4px padding: 0px 4px
html.no-borderimage
#spell-view
span.code-background
display: none
img.code-background
display: block

10
app/styles/play/level/tome/spell_debug.sass
View file

@ -6,8 +6,8 @@
min-width: 250px min-width: 250px
max-width: 400px max-width: 400px
padding: 10px padding: 10px
background: transparent url(/images/level/popover_background.png) border-image: url(/images/level/popover_background.png) 18 fill round
background-size: 100% 100% border-width: 8px
.progress .progress
position: relative position: relative
span span
@ -15,4 +15,10 @@
display: block display: block
color: black color: black
width: 100% width: 100%
html.no-borderimage
.spell-debug-view
background: transparent url(/images/level/popover_background.png)
background-size: 100% 100%
border: 0

9
app/styles/play/level/tome/spell_list.sass
View file

@ -8,6 +8,11 @@
left: 0% left: 0%
right: 10% right: 10%
padding: 4% padding: 4%
background: transparent url(/images/level/popover_background.png) border-image: url(/images/level/popover_background.png) 18 fill round
background-size: 100% 100% border-width: 15px
html.no-borderimage
#spell-list-view
background: transparent url(/images/level/popover_background.png)
background-size: 100% 100%
border: 0

25
app/styles/play/level/tome/spell_list_entry.sass
View file

@ -17,15 +17,15 @@
width: -webkit-calc(100% - 100px) width: -webkit-calc(100% - 100px)
width: calc(100% - 100px) width: calc(100% - 100px)
padding: 0px 8px padding: 0px 8px
background: transparent url(/images/level/code_editor_tab_background.png) no-repeat border-width: 3px
background-size: 100% 100% border-image: url(/images/level/code_editor_tab_background.png) 4 fill repeat
text-align: center text-align: center
&.read-only &.read-only
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%), url(/images/level/code_editor_tab_background.png) background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%), url(/images/level/code_editor_tab_background.png)
background-size: 100% 100% background-size: 100% 100%
.spell-list-button, .thang-avatar-wrapper, .reload-code, .beautify-code .spell-list-button, .thang-avatar-wrapper, .reload-code, .beautify-code, .fullscreen-code
width: $childSize width: $childSize
height: $childSize height: $childSize
margin: $childMargin margin: $childMargin
@ -41,6 +41,15 @@
.beautify-code .beautify-code
float: right float: right
.fullscreen-code
float: right
&:not(.maximized)
.icon-resize-small
display: none
&.maximized
.icon-fullscreen
display: none
.btn.btn-small .btn.btn-small
background: transparent background: transparent
padding: 0 padding: 0
@ -49,7 +58,7 @@
border-color: transparent border-color: transparent
@include box-shadow(none) @include box-shadow(none)
.icon-chevron-down, .icon-repeat, .icon-magnet .icon-chevron-down, .icon-repeat, .icon-magnet, .icon-fullscreen, .icon-resize-small
margin-top: 7px margin-top: 7px
.thang-avatar-wrapper .thang-avatar-wrapper
@ -94,3 +103,11 @@
.thang-avatar-wrapper .thang-avatar-wrapper
margin: 0 5px 0 0 margin: 0 5px 0 0
//margin: 2px 10px 2px 5px //margin: 2px 10px 2px 5px
html.no-borderimage
.spell-list-entry-view.spell-tab
border-width: 0
border-image: none
background: transparent url(/images/level/code_editor_tab_background.png) no-repeat
background-size: 100% 100%

11
app/styles/play/level/tome/spell_list_entry_thangs.sass
View file

@ -10,8 +10,8 @@
max-height: 500px max-height: 500px
overflow: scroll overflow: scroll
padding: 4% padding: 4%
background: transparent url(/images/level/popover_background.png) border-image: url(/images/level/popover_background.png) 18 fill round
background-size: 100% 100% border-width: 15px
.thang-avatar-view .thang-avatar-view
cursor: pointer cursor: pointer
@ -20,4 +20,9 @@
display: inline-block display: inline-block
html.no-borderimage
.spell-list-entry-view
.spell-list-entry-thangs-view
background: transparent url(/images/level/popover_background.png)
background-size: 100% 100%
border: 0

15
app/styles/play/level/tome/spell_palette.sass
View file

@ -17,13 +17,20 @@
z-index: 0 z-index: 0
//overflow-y: auto //overflow-y: auto
img .code-palette-background
position: absolute position: absolute
left: 0 left: 0
top: 0 top: 0
width: 100% width: 100%
height: 100% height: 100%
z-index: -1 z-index: -1
span.code-palette-background
border-width: 25px
border-image: url(/images/level/code_palette_background.png) 25 fill round
img.code-palette-background
display: none
&.disabled &.disabled
@include opacity(0.80) @include opacity(0.80)
@ -86,3 +93,9 @@
&.io &.io
background-image: url(/images/pages/home/language_logo_io.png) background-image: url(/images/pages/home/language_logo_io.png)
html.no-borderimage
#spell-palette-view
span.code-palette-background
display: none
img.code-palette-background
display: block

12
app/styles/play/level/tome/tome.sass
View file

@ -37,9 +37,8 @@
.popover .popover
padding: 10px 10px 30px 10px padding: 10px 10px 30px 10px
background: transparent url(/images/level/popover_background.png) border-image: url(/images/level/popover_background.png) 18 fill round
background-size: 100% 100% border-width: 15px
border: 0
@include box-shadow(0 0 0 #000) @include box-shadow(0 0 0 #000)
h1:not(.not-code), h2:not(.not-code), h3:not(.not-code), h4:not(.not-code), h5:not(.not-code), h6:not(.not-code) h1:not(.not-code), h2:not(.not-code), h3:not(.not-code), h4:not(.not-code), h5:not(.not-code), h6:not(.not-code)
@ -70,3 +69,10 @@
pre pre
display: inline-block display: inline-block
padding: 5px padding: 5px
html.no-borderimage
#tome-view
.popover
background: transparent url(/images/level/popover_background.png)
background-size: 100% 100%
border: 0

1
app/templates/play/level/tome/spell.jade
View file

@ -1,4 +1,5 @@
img(src="/images/level/code_editor_background.png").code-background img(src="/images/level/code_editor_background.png").code-background
span.code-background
div.ace div.ace

5
app/templates/play/level/tome/spell_list_tab_entry.jade
View file

@ -4,10 +4,15 @@
code #{methodSignature} code #{methodSignature}
.btn.btn-small.fullscreen-code(title="Expand code editor")
i.icon-fullscreen
i.icon-resize-small
.btn.btn-small.reload-code(title="Reload original code for " + spell.name) .btn.btn-small.reload-code(title="Reload original code for " + spell.name)
i.icon-repeat i.icon-repeat
.btn.btn-small.beautify-code(title="Ctrl+Shift+B: Beautify code for " + spell.name) .btn.btn-small.beautify-code(title="Ctrl+Shift+B: Beautify code for " + spell.name)
i.icon-magnet i.icon-magnet
.clearfix .clearfix

1
app/templates/play/level/tome/spell_palette.jade
View file

@ -1,4 +1,5 @@
img(src="/images/level/code_palette_background.png").code-palette-background img(src="/images/level/code_palette_background.png").code-palette-background
span.code-palette-background
.code-language-logo .code-language-logo
ul(class="nav nav-pills" + (tabbed ? ' multiple-tabs' : '')) ul(class="nav nav-pills" + (tabbed ? ' multiple-tabs' : ''))
each slug, group in entryGroupSlugs each slug, group in entryGroupSlugs

1
app/views/play/level/modal/docs_modal.coffee
View file

@ -8,7 +8,6 @@ utils = require 'lib/utils'
module.exports = class DocsModal extends View module.exports = class DocsModal extends View
template: template template: template
id: 'docs-modal' id: 'docs-modal'
plain: true
shortcuts: shortcuts:
'enter': 'hide' 'enter': 'hide'

3
app/views/play/level/tome/doc_formatter.coffee
View file

@ -83,7 +83,7 @@ module.exports = class DocFormatter
@doc.title = if @options.shortenize then @doc.shorterName else @doc.shortName @doc.title = if @options.shortenize then @doc.shorterName else @doc.shortName
# Grab the language-specific documentation for some sub-properties, if we have it. # Grab the language-specific documentation for some sub-properties, if we have it.
toTranslate = [{obj: @doc, prop: 'example'}, {obj: @doc, prop: 'returns'}] toTranslate = [{obj: @doc, prop: 'description'}, {obj: @doc, prop: 'example'}, {obj: @doc, prop: 'returns'}]
for arg in (@doc.args ? []) for arg in (@doc.args ? [])
toTranslate.push {obj: arg, prop: 'example'}, {obj: arg, prop: 'description'} toTranslate.push {obj: arg, prop: 'example'}, {obj: arg, prop: 'description'}
for {obj, prop} in toTranslate for {obj, prop} in toTranslate
@ -93,6 +93,7 @@ module.exports = class DocFormatter
obj[prop] = null obj[prop] = null
formatPopover: -> formatPopover: ->
console.log "gotta do the popover", @doc
content = popoverTemplate doc: @doc, language: @options.language, value: @formatValue(), marked: marked, argumentExamples: (arg.example or arg.default or arg.name for arg in @doc.args ? []) content = popoverTemplate doc: @doc, language: @options.language, value: @formatValue(), marked: marked, argumentExamples: (arg.example or arg.default or arg.name for arg in @doc.args ? [])
owner = if @doc.owner is 'this' then @options.thang else window[@doc.owner] owner = if @doc.owner is 'this' then @options.thang else window[@doc.owner]
content = content.replace /#{spriteName}/g, @options.thang.type ? @options.thang.spriteName # Prefer type, and excluded the quotes we'd get with @formatValue content = content.replace /#{spriteName}/g, @options.thang.type ? @options.thang.spriteName # Prefer type, and excluded the quotes we'd get with @formatValue

9
app/views/play/level/tome/spell_list_tab_entry_view.coffee
View file

@ -18,6 +18,7 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
'click .spell-list-button': 'onDropdownClick' 'click .spell-list-button': 'onDropdownClick'
'click .reload-code': 'onCodeReload' 'click .reload-code': 'onCodeReload'
'click .beautify-code': 'onBeautifyClick' 'click .beautify-code': 'onBeautifyClick'
'click .fullscreen-code': 'onFullscreenClick'
constructor: (options) -> constructor: (options) ->
super options super options
@ -86,6 +87,14 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
return unless @controlsEnabled return unless @controlsEnabled
Backbone.Mediator.publish 'spell-beautify', spell: @spell Backbone.Mediator.publish 'spell-beautify', spell: @spell
onFullscreenClick: ->
unless $('.fullscreen-code').hasClass 'maximized'
$('#code-area').addClass 'fullscreen-editor'
$('.fullscreen-code').addClass 'maximized'
else
$('#code-area').removeClass 'fullscreen-editor'
$('.fullscreen-code').removeClass 'maximized'
updateReloadButton: -> updateReloadButton: ->
changed = @spell.hasChanged null, @spell.getSource() changed = @spell.hasChanged null, @spell.getSource()
@$el.find('.reload-code').css('display', if changed then 'inline-block' else 'none') @$el.find('.reload-code').css('display', if changed then 'inline-block' else 'none')

6
bower.json
View file

@ -44,7 +44,8 @@
"bootstrap": "~3.1.1", "bootstrap": "~3.1.1",
"validated-backbone-mediator": "~0.1.3", "validated-backbone-mediator": "~0.1.3",
"jquery.browser": "~0.0.6", "jquery.browser": "~0.0.6",
"zatanna": "~0.0.2" "zatanna": "~0.0.2",
"modernizr": "~2.8.3"
}, },
"overrides": { "overrides": {
"backbone": { "backbone": {
@ -81,6 +82,9 @@
"./dist/fonts/glyphicons-halflings-regular.ttf", "./dist/fonts/glyphicons-halflings-regular.ttf",
"./dist/fonts/glyphicons-halflings-regular.woff" "./dist/fonts/glyphicons-halflings-regular.woff"
] ]
},
"modernizr": {
"main": "modernizr.js"
} }
} }
} }