From 0ed8d2b3711e42e4466a898902da5ef2bbadc513 Mon Sep 17 00:00:00 2001 From: Nick Winter Date: Wed, 9 Jul 2014 13:41:42 -0700 Subject: [PATCH] Merged in the full-screen editor, and fixed a spell palette multi-language bug while at it. --- app/styles/play/level.sass | 6 ++++ app/styles/play/level/tome/problem_alert.sass | 28 +++++++++++++++---- app/styles/play/level/tome/spell.sass | 17 ++++++++++- app/styles/play/level/tome/spell_debug.sass | 10 +++++-- app/styles/play/level/tome/spell_list.sass | 9 ++++-- .../play/level/tome/spell_list_entry.sass | 25 ++++++++++++++--- .../level/tome/spell_list_entry_thangs.sass | 11 ++++++-- app/styles/play/level/tome/spell_palette.sass | 15 +++++++++- app/styles/play/level/tome/tome.sass | 12 ++++++-- app/templates/play/level/tome/spell.jade | 1 + .../play/level/tome/spell_list_tab_entry.jade | 5 ++++ .../play/level/tome/spell_palette.jade | 1 + app/views/play/level/modal/docs_modal.coffee | 1 - .../play/level/tome/doc_formatter.coffee | 3 +- .../tome/spell_list_tab_entry_view.coffee | 9 ++++++ bower.json | 6 +++- 16 files changed, 135 insertions(+), 24 deletions(-) diff --git a/app/styles/play/level.sass b/app/styles/play/level.sass index 64ea6e43a..3abc58d24 100644 --- a/app/styles/play/level.sass +++ b/app/styles/play/level.sass @@ -37,6 +37,12 @@ body.is-playing right: 0 top: 0px bottom: 0 + transition: width 0.5s ease-in-out + &.fullscreen-editor + position: fixed + width: 100% + height: 100% + z-index: 20 #pointer position: absolute diff --git a/app/styles/play/level/tome/problem_alert.sass b/app/styles/play/level/tome/problem_alert.sass index df410f680..d26a3ad5b 100644 --- a/app/styles/play/level/tome/problem_alert.sass +++ b/app/styles/play/level/tome/problem_alert.sass @@ -6,13 +6,14 @@ bottom: -120px left: 10px right: 10px - background: transparent url(/images/level/code_editor_error_background.png) no-repeat - background-size: 100% 100% + background: transparent border: 0 padding: 18px 35px 18px 14px text-shadow: none color: white word-wrap: break-word + border-image: url(/images/level/code_editor_error_background.png) 16 20 fill round + border-width: 16px 20px .close @include opacity(0.80) @@ -30,11 +31,28 @@ //&.alert-error &.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 - background-image: url(/images/level/code_editor_info_background.png) + border-image-source: 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) + 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) \ No newline at end of file diff --git a/app/styles/play/level/tome/spell.sass b/app/styles/play/level/tome/spell.sass index 73d727457..291403dc0 100644 --- a/app/styles/play/level/tome/spell.sass +++ b/app/styles/play/level/tome/spell.sass @@ -26,6 +26,13 @@ top: 0 height: 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 display: none @@ -64,7 +71,7 @@ .ace_gutter background-color: rgba(255, 255, 255, 0.25) - width: 40px + width: 47px margin-left: 4px border-bottom: 1px dotted #2f261d @@ -133,3 +140,11 @@ .ace_searchbtn, .ace_replacebtn padding: 0px 4px + +html.no-borderimage + #spell-view + span.code-background + display: none + img.code-background + display: block + diff --git a/app/styles/play/level/tome/spell_debug.sass b/app/styles/play/level/tome/spell_debug.sass index 976675c2e..d06143caa 100644 --- a/app/styles/play/level/tome/spell_debug.sass +++ b/app/styles/play/level/tome/spell_debug.sass @@ -6,8 +6,8 @@ min-width: 250px max-width: 400px padding: 10px - background: transparent url(/images/level/popover_background.png) - background-size: 100% 100% + border-image: url(/images/level/popover_background.png) 18 fill round + border-width: 8px .progress position: relative span @@ -15,4 +15,10 @@ display: block color: black width: 100% + +html.no-borderimage + .spell-debug-view + background: transparent url(/images/level/popover_background.png) + background-size: 100% 100% + border: 0 diff --git a/app/styles/play/level/tome/spell_list.sass b/app/styles/play/level/tome/spell_list.sass index 0af5f314f..0692a47a0 100644 --- a/app/styles/play/level/tome/spell_list.sass +++ b/app/styles/play/level/tome/spell_list.sass @@ -8,6 +8,11 @@ left: 0% right: 10% padding: 4% - background: transparent url(/images/level/popover_background.png) - background-size: 100% 100% + border-image: url(/images/level/popover_background.png) 18 fill round + border-width: 15px +html.no-borderimage + #spell-list-view + background: transparent url(/images/level/popover_background.png) + background-size: 100% 100% + border: 0 \ No newline at end of file diff --git a/app/styles/play/level/tome/spell_list_entry.sass b/app/styles/play/level/tome/spell_list_entry.sass index 8d036dd57..8f8683c41 100644 --- a/app/styles/play/level/tome/spell_list_entry.sass +++ b/app/styles/play/level/tome/spell_list_entry.sass @@ -17,15 +17,15 @@ width: -webkit-calc(100% - 100px) width: calc(100% - 100px) padding: 0px 8px - background: transparent url(/images/level/code_editor_tab_background.png) no-repeat - background-size: 100% 100% + border-width: 3px + border-image: url(/images/level/code_editor_tab_background.png) 4 fill repeat text-align: center &.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-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 height: $childSize margin: $childMargin @@ -41,6 +41,15 @@ .beautify-code float: right + .fullscreen-code + float: right + &:not(.maximized) + .icon-resize-small + display: none + &.maximized + .icon-fullscreen + display: none + .btn.btn-small background: transparent padding: 0 @@ -49,7 +58,7 @@ border-color: transparent @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 .thang-avatar-wrapper @@ -94,3 +103,11 @@ .thang-avatar-wrapper margin: 0 5px 0 0 //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% \ No newline at end of file diff --git a/app/styles/play/level/tome/spell_list_entry_thangs.sass b/app/styles/play/level/tome/spell_list_entry_thangs.sass index 0f005675a..5398423f9 100644 --- a/app/styles/play/level/tome/spell_list_entry_thangs.sass +++ b/app/styles/play/level/tome/spell_list_entry_thangs.sass @@ -10,8 +10,8 @@ max-height: 500px overflow: scroll padding: 4% - background: transparent url(/images/level/popover_background.png) - background-size: 100% 100% + border-image: url(/images/level/popover_background.png) 18 fill round + border-width: 15px .thang-avatar-view cursor: pointer @@ -20,4 +20,9 @@ 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 \ No newline at end of file diff --git a/app/styles/play/level/tome/spell_palette.sass b/app/styles/play/level/tome/spell_palette.sass index 5e19cc0ce..3e2f78794 100644 --- a/app/styles/play/level/tome/spell_palette.sass +++ b/app/styles/play/level/tome/spell_palette.sass @@ -17,13 +17,20 @@ z-index: 0 //overflow-y: auto - img + .code-palette-background position: absolute left: 0 top: 0 width: 100% height: 100% 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 @include opacity(0.80) @@ -86,3 +93,9 @@ &.io 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 \ No newline at end of file diff --git a/app/styles/play/level/tome/tome.sass b/app/styles/play/level/tome/tome.sass index 773005d64..370cc293d 100644 --- a/app/styles/play/level/tome/tome.sass +++ b/app/styles/play/level/tome/tome.sass @@ -37,9 +37,8 @@ .popover padding: 10px 10px 30px 10px - background: transparent url(/images/level/popover_background.png) - background-size: 100% 100% - border: 0 + border-image: url(/images/level/popover_background.png) 18 fill round + border-width: 15px @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) @@ -70,3 +69,10 @@ pre display: inline-block padding: 5px + +html.no-borderimage + #tome-view + .popover + background: transparent url(/images/level/popover_background.png) + background-size: 100% 100% + border: 0 diff --git a/app/templates/play/level/tome/spell.jade b/app/templates/play/level/tome/spell.jade index 85fcdbda0..32a97806d 100644 --- a/app/templates/play/level/tome/spell.jade +++ b/app/templates/play/level/tome/spell.jade @@ -1,4 +1,5 @@ img(src="/images/level/code_editor_background.png").code-background +span.code-background div.ace diff --git a/app/templates/play/level/tome/spell_list_tab_entry.jade b/app/templates/play/level/tome/spell_list_tab_entry.jade index 8ebad097f..9199b8a48 100644 --- a/app/templates/play/level/tome/spell_list_tab_entry.jade +++ b/app/templates/play/level/tome/spell_list_tab_entry.jade @@ -4,10 +4,15 @@ 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) i.icon-repeat .btn.btn-small.beautify-code(title="Ctrl+Shift+B: Beautify code for " + spell.name) i.icon-magnet + .clearfix \ No newline at end of file diff --git a/app/templates/play/level/tome/spell_palette.jade b/app/templates/play/level/tome/spell_palette.jade index 2164a970b..2344bfdaf 100644 --- a/app/templates/play/level/tome/spell_palette.jade +++ b/app/templates/play/level/tome/spell_palette.jade @@ -1,4 +1,5 @@ img(src="/images/level/code_palette_background.png").code-palette-background +span.code-palette-background .code-language-logo ul(class="nav nav-pills" + (tabbed ? ' multiple-tabs' : '')) each slug, group in entryGroupSlugs diff --git a/app/views/play/level/modal/docs_modal.coffee b/app/views/play/level/modal/docs_modal.coffee index 72aa6b8d0..9970b8916 100644 --- a/app/views/play/level/modal/docs_modal.coffee +++ b/app/views/play/level/modal/docs_modal.coffee @@ -8,7 +8,6 @@ utils = require 'lib/utils' module.exports = class DocsModal extends View template: template id: 'docs-modal' - plain: true shortcuts: 'enter': 'hide' diff --git a/app/views/play/level/tome/doc_formatter.coffee b/app/views/play/level/tome/doc_formatter.coffee index 2d256c3ad..d159d08e4 100644 --- a/app/views/play/level/tome/doc_formatter.coffee +++ b/app/views/play/level/tome/doc_formatter.coffee @@ -83,7 +83,7 @@ module.exports = class DocFormatter @doc.title = if @options.shortenize then @doc.shorterName else @doc.shortName # 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 ? []) toTranslate.push {obj: arg, prop: 'example'}, {obj: arg, prop: 'description'} for {obj, prop} in toTranslate @@ -93,6 +93,7 @@ module.exports = class DocFormatter obj[prop] = null 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 ? []) 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 diff --git a/app/views/play/level/tome/spell_list_tab_entry_view.coffee b/app/views/play/level/tome/spell_list_tab_entry_view.coffee index 1938cc1e4..32d4682b1 100644 --- a/app/views/play/level/tome/spell_list_tab_entry_view.coffee +++ b/app/views/play/level/tome/spell_list_tab_entry_view.coffee @@ -18,6 +18,7 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView 'click .spell-list-button': 'onDropdownClick' 'click .reload-code': 'onCodeReload' 'click .beautify-code': 'onBeautifyClick' + 'click .fullscreen-code': 'onFullscreenClick' constructor: (options) -> super options @@ -86,6 +87,14 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView return unless @controlsEnabled 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: -> changed = @spell.hasChanged null, @spell.getSource() @$el.find('.reload-code').css('display', if changed then 'inline-block' else 'none') diff --git a/bower.json b/bower.json index 357b9d431..e979e2f49 100644 --- a/bower.json +++ b/bower.json @@ -44,7 +44,8 @@ "bootstrap": "~3.1.1", "validated-backbone-mediator": "~0.1.3", "jquery.browser": "~0.0.6", - "zatanna": "~0.0.2" + "zatanna": "~0.0.2", + "modernizr": "~2.8.3" }, "overrides": { "backbone": { @@ -81,6 +82,9 @@ "./dist/fonts/glyphicons-halflings-regular.ttf", "./dist/fonts/glyphicons-halflings-regular.woff" ] + }, + "modernizr": { + "main": "modernizr.js" } } }