mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-30 10:56:53 -05:00
Improved a bunch of things with the wizard settings view.
This commit is contained in:
Scott Erickson
parent
f991bc3a58
commit
02cb9155c0
6 changed files with 322 additions and 82 deletions
|
|
@ -1,42 +1,27 @@
|
|||
#wizard-settings-view
|
||||
h3#loading
|
||||
h3
|
||||
text-align: center
|
||||
|
||||
#color-settings
|
||||
#tinting-display
|
||||
float: right
|
||||
|
||||
width: 450px
|
||||
margin: 0 auto
|
||||
|
||||
#color-settings table
|
||||
float: left
|
||||
width: 600px
|
||||
margin-left: 30px
|
||||
width: 250px
|
||||
|
||||
canvas
|
||||
float: left
|
||||
border: 2px solid black
|
||||
margin: 20px
|
||||
.minicolors-input
|
||||
display: none
|
||||
|
||||
.color-group
|
||||
clear: both
|
||||
padding-bottom: 10px
|
||||
margin-bottom: 10px
|
||||
border-bottom: 1px solid gray
|
||||
|
||||
.name-cell
|
||||
float: left
|
||||
width: 100px
|
||||
padding-top: 2px
|
||||
|
||||
input
|
||||
margin-right: 10px
|
||||
position: relative
|
||||
top: -3px
|
||||
|
||||
.checkbox-cell
|
||||
float: left
|
||||
.minicolors-swatch
|
||||
position: static
|
||||
width: 40px
|
||||
cursor: pointer
|
||||
|
||||
.slider-cell
|
||||
margin-bottom: 10px
|
||||
float: left
|
||||
width: 120px
|
||||
|
||||
.selector
|
||||
width: 100px
|
||||
.enabled-cell
|
||||
width: 30px
|
||||
|
||||
.color-cell
|
||||
width: 50px
|
||||
|
|
@ -1,20 +1,18 @@
|
|||
#color-settings
|
||||
table.table.table-bordered
|
||||
tr
|
||||
th
|
||||
th Color
|
||||
th Group
|
||||
for group in colorGroups
|
||||
tr.color-group(data-name=group.name)
|
||||
td.enabled-cell
|
||||
input(type='checkbox', checked=group.exists, id=group.name).color-group-checkbox
|
||||
td.color-cell
|
||||
input.minicolors(type=hidden, value=group.rgb, name=group.name)
|
||||
td.group-cell
|
||||
label(for=group.name, data-i18n='wizard_settings.' + group.dasherized)= group.humanized
|
||||
|
||||
canvas#tinting-display(width=200, height=200).img-rounded
|
||||
|
||||
#color-settings
|
||||
for group in colorGroups
|
||||
.color-group(data-name=group.name)
|
||||
div.name-cell
|
||||
input(type='checkbox', checked=group.exists).color-group-checkbox
|
||||
span(data-i18n='wizard_settings.' + group.dasherized)= group.humanized
|
||||
div.sliders
|
||||
div.slider-cell
|
||||
label(for=group.humanized+"_hue", data-i18n="wizard_settings.hue") Hue
|
||||
.selector(id=group.humanized+"_hue", name=group.name+'.hue', data-key='hue')
|
||||
div.slider-cell
|
||||
label(for=group.humanized+"_saturation", data-i18n="wizard_settings.saturation") Saturation
|
||||
.selector(id=group.humanized+"_saturation", name=group.name+'.saturation', data-key='saturation')
|
||||
div.slider-cell
|
||||
label(for=group.humanized+"_lightness", data-i18n="wizard_settings.lightness") Lightness
|
||||
.selector(id=group.humanized+"_lightness", name=group.name+'.lightness', data-key='lightness')
|
||||
div.clearfix
|
||||
div.clearfix
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
extends /templates/modal/modal_base
|
||||
|
||||
block modal-header-content
|
||||
h3(data-i18n="wizard_settings.title") Wizard Settings
|
||||
h3(data-i18n="wizard_settings.title2") Customize Your Character
|
||||
|
||||
block modal-body-content
|
||||
div.wizard-name-line.form-group
|
||||
label.control-label(for="name")
|
||||
| Name
|
||||
| Your Wizardly Name
|
||||
input#wizard-settings-name(name="name", type="text", value="#{me.get('name')||''}")
|
||||
|
||||
#wizard-settings-view
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ template = require 'templates/account/wizard_settings'
|
|||
{me} = require('lib/auth')
|
||||
ThangType = require 'models/ThangType'
|
||||
SpriteBuilder = require 'lib/sprites/SpriteBuilder'
|
||||
{hslToHex, hexToHSL} = require 'lib/utils'
|
||||
|
||||
module.exports = class WizardSettingsView extends CocoView
|
||||
id: 'wizard-settings-view'
|
||||
|
|
@ -12,8 +13,8 @@ module.exports = class WizardSettingsView extends CocoView
|
|||
events:
|
||||
'change .color-group-checkbox': (e) ->
|
||||
colorGroup = $(e.target).closest('.color-group')
|
||||
@updateSliderVisibility(colorGroup)
|
||||
@updateColorSettings(colorGroup)
|
||||
@updateSwatchVisibility(colorGroup)
|
||||
|
||||
constructor: ->
|
||||
super(arguments...)
|
||||
|
|
@ -36,11 +37,15 @@ module.exports = class WizardSettingsView extends CocoView
|
|||
wizardSettings = me.get('wizard')?.colorConfig or {}
|
||||
|
||||
colorGroups = @wizardThangType.get('colorGroups') or {}
|
||||
f = (name) -> {
|
||||
f = (name) ->
|
||||
hslObj = wizardSettings[name]
|
||||
hsl = if hslObj then [hslObj.hue, hslObj.saturation, hslObj.lightness] else [0, 0.5, 0.5]
|
||||
return {
|
||||
dasherized: _.string.dasherize(name)
|
||||
humanized: _.string.humanize name
|
||||
name: name
|
||||
exists: wizardSettings[name]
|
||||
rgb: hslToHex(hsl)
|
||||
}
|
||||
c.colorGroups = (f(colorName) for colorName in _.keys colorGroups)
|
||||
c
|
||||
|
|
@ -50,27 +55,29 @@ module.exports = class WizardSettingsView extends CocoView
|
|||
wizardSettings = me.get('wizard') or {}
|
||||
wizardSettings.colorConfig ?= {}
|
||||
|
||||
@$el.find('.selector').each (i, slider) =>
|
||||
[groupName, prop] = $(slider).attr('name').split('.')
|
||||
value = 100 * (wizardSettings.colorConfig[groupName]?[prop] ? 0.5)
|
||||
@initSlider $(slider), value, @onSliderChanged
|
||||
@$el.find('.minicolors').each (e, minicolor) =>
|
||||
$(minicolor).minicolors({
|
||||
change: => @updateColorSettings($(minicolor).closest('.color-group'))
|
||||
changeDelay: 200
|
||||
})
|
||||
|
||||
@$el.find('.color-group').each (i, colorGroup) =>
|
||||
@updateSliderVisibility($(colorGroup))
|
||||
@updateSwatchVisibility($(colorGroup))
|
||||
|
||||
updateSliderVisibility: (colorGroup) ->
|
||||
updateSwatchVisibility: (colorGroup) ->
|
||||
enabled = colorGroup.find('.color-group-checkbox').prop('checked')
|
||||
colorGroup.find('.sliders').toggle Boolean(enabled)
|
||||
colorGroup.find('.minicolors-swatch').toggle Boolean(enabled)
|
||||
|
||||
updateColorSettings: (colorGroup) ->
|
||||
wizardSettings = me.get('wizard') or {}
|
||||
updateColorSettings: (colorGroup) =>
|
||||
wizardSettings = _.cloneDeep(me.get('wizard')) or {}
|
||||
wizardSettings.colorConfig ?= {}
|
||||
colorName = colorGroup.data('name')
|
||||
wizardSettings.colorConfig[colorName] ?= {}
|
||||
if colorGroup.find('.color-group-checkbox').prop('checked')
|
||||
config = {}
|
||||
colorGroup.find('.selector').each (i, slider) ->
|
||||
config[$(slider).data('key')] = $(slider).slider('value') / 100
|
||||
input = colorGroup.find('.minicolors-input')
|
||||
hex = input.val()
|
||||
hsl = hexToHSL(hex)
|
||||
config = {hue: hsl[0], saturation:hsl[1], lightness:hsl[2]}
|
||||
wizardSettings.colorConfig[colorName] = config
|
||||
else
|
||||
delete wizardSettings.colorConfig[colorName]
|
||||
|
|
@ -79,9 +86,6 @@ module.exports = class WizardSettingsView extends CocoView
|
|||
@updateMovieClip()
|
||||
@trigger 'change'
|
||||
|
||||
onSliderChanged: (e, result) =>
|
||||
@updateColorSettings $(result.handle).closest('.color-group')
|
||||
|
||||
initStage: ->
|
||||
@stage = new createjs.Stage(@$el.find('canvas')[0])
|
||||
@updateMovieClip()
|
||||
|
|
|
|||
8
vendor/scripts/jquery.minicolors.min.js
vendored
Normal file
8
vendor/scripts/jquery.minicolors.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
245
vendor/styles/jquery.minicolors.css
vendored
Normal file
245
vendor/styles/jquery.minicolors.css
vendored
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
.minicolors {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.minicolors-swatch {
|
||||
position: absolute;
|
||||
vertical-align: middle;
|
||||
background: url(/images/jquery.minicolors.png) -80px 0;
|
||||
border: solid 1px #ccc;
|
||||
cursor: text;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.minicolors-swatch-color {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.minicolors input[type=hidden] + .minicolors-swatch {
|
||||
width: 28px;
|
||||
position: static;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Panel */
|
||||
.minicolors-panel {
|
||||
position: absolute;
|
||||
width: 173px;
|
||||
height: 152px;
|
||||
background: white;
|
||||
border: solid 1px #CCC;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
|
||||
z-index: 99999;
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.minicolors-panel.minicolors-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Panel positioning */
|
||||
.minicolors-position-top .minicolors-panel {
|
||||
top: -154px;
|
||||
}
|
||||
|
||||
.minicolors-position-right .minicolors-panel {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.minicolors-position-bottom .minicolors-panel {
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.minicolors-position-left .minicolors-panel {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.minicolors-with-opacity .minicolors-panel {
|
||||
width: 194px;
|
||||
}
|
||||
|
||||
.minicolors .minicolors-grid {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: url(/images/jquery.minicolors.png) -120px 0;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.minicolors .minicolors-grid-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.minicolors-slider-saturation .minicolors-grid {
|
||||
background-position: -420px 0;
|
||||
}
|
||||
|
||||
.minicolors-slider-saturation .minicolors-grid-inner {
|
||||
background: url(/images/jquery.minicolors.png) -270px 0;
|
||||
}
|
||||
|
||||
.minicolors-slider-brightness .minicolors-grid {
|
||||
background-position: -570px 0;
|
||||
}
|
||||
|
||||
.minicolors-slider-brightness .minicolors-grid-inner {
|
||||
background: black;
|
||||
}
|
||||
|
||||
.minicolors-slider-wheel .minicolors-grid {
|
||||
background-position: -720px 0;
|
||||
}
|
||||
|
||||
.minicolors-slider,
|
||||
.minicolors-opacity-slider {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 152px;
|
||||
width: 20px;
|
||||
height: 150px;
|
||||
background: white url(/images/jquery.minicolors.png) 0 0;
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.minicolors-slider-saturation .minicolors-slider {
|
||||
background-position: -60px 0;
|
||||
}
|
||||
|
||||
.minicolors-slider-brightness .minicolors-slider {
|
||||
background-position: -20px 0;
|
||||
}
|
||||
|
||||
.minicolors-slider-wheel .minicolors-slider {
|
||||
background-position: -20px 0;
|
||||
}
|
||||
|
||||
.minicolors-opacity-slider {
|
||||
left: 173px;
|
||||
background-position: -40px 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.minicolors-with-opacity .minicolors-opacity-slider {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Pickers */
|
||||
.minicolors-grid .minicolors-picker {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 70px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: solid 1px black;
|
||||
border-radius: 10px;
|
||||
margin-top: -6px;
|
||||
margin-left: -6px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.minicolors-grid .minicolors-picker > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
border: solid 2px white;
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.minicolors-picker {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 18px;
|
||||
height: 2px;
|
||||
background: white;
|
||||
border: solid 1px black;
|
||||
margin-top: -2px;
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* Inline controls */
|
||||
.minicolors-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.minicolors-inline .minicolors-input {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.minicolors-inline .minicolors-panel {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
box-shadow: none;
|
||||
z-index: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Default theme */
|
||||
.minicolors-theme-default .minicolors-swatch {
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
|
||||
left: auto;
|
||||
right: 5px;
|
||||
}
|
||||
.minicolors-theme-default.minicolors {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
.minicolors-theme-default .minicolors-input {
|
||||
height: 20px;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
padding-left: 26px;
|
||||
}
|
||||
.minicolors-theme-default.minicolors-position-right .minicolors-input {
|
||||
padding-right: 26px;
|
||||
padding-left: inherit;
|
||||
}
|
||||
|
||||
/* Bootstrap theme */
|
||||
.minicolors-theme-bootstrap .minicolors-swatch {
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.minicolors-theme-bootstrap.minicolors-position-right .minicolors-swatch {
|
||||
left: auto;
|
||||
right: 3px;
|
||||
}
|
||||
.minicolors-theme-bootstrap .minicolors-input {
|
||||
padding-left: 44px;
|
||||
}
|
||||
.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
|
||||
padding-right: 44px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
Loading…
Reference in a new issue