mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-08-01 15:31:16 +00:00
fix to "editing profile" bug. move {#with _user.preferences as :p}
into minimum allowable depth in HTML hierachy at which it's required. Still trying to put my finger on it, but I'm getting close
This commit is contained in:
Tyler Renelle
parent
5799a155af
commit
49db610602
2 changed files with 111 additions and 106 deletions
|
|
@ -20,6 +20,6 @@ module.exports.app = (appExports, model) ->
|
||||||
appExports.profileChangeActive = (e, el) ->
|
appExports.profileChangeActive = (e, el) ->
|
||||||
uid = $(el).attr('data-uid')
|
uid = $(el).attr('data-uid')
|
||||||
model.ref '_profileActive', model.at("users.#{uid}")
|
model.ref '_profileActive', model.at("users.#{uid}")
|
||||||
model.set '_profileActiveMain', model.get('_user.id') == uid
|
model.set '_profileActiveMain', user.get('id') is uid
|
||||||
model.set '_profileActiveUsername', character.username model.get('_profileActive.auth')
|
model.set '_profileActiveUsername', character.username model.get('_profileActive.auth')
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,18 @@
|
||||||
<modals:>
|
<modals:>
|
||||||
<app:modals:modal modalId="avatar-modal">
|
<app:modals:modal modalId="avatar-modal">
|
||||||
{#if _profileActiveMain}
|
{#if _profileActiveMain}
|
||||||
{#with _user.preferences}
|
<ul class="nav nav-tabs">
|
||||||
<ul class="nav nav-tabs">
|
<li class="active"><a data-toggle='tab' href="#profileCustomize">Avatar</a></li>
|
||||||
<li class="active"><a data-toggle='tab' href="#profileCustomize">Avatar</a></li>
|
<li><a data-toggle='tab' href="#profileEdit">Profile</a></li>
|
||||||
<li><a data-toggle='tab' href="#profileEdit">Profile</a></li>
|
</ul>
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<div class="tab-pane active" id="profileCustomize">
|
<div class="tab-pane active" id="profileCustomize">
|
||||||
<app:avatar:customize />
|
<app:avatar:customize />
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tab-pane" id="profileEdit"><app:avatar:profile user="{_user}" main="true" /></div>
|
|
||||||
</div>
|
</div>
|
||||||
{/}
|
|
||||||
|
<div class="tab-pane" id="profileEdit"><app:avatar:profile user="{_user}" main="true" /></div>
|
||||||
|
</div>
|
||||||
{else}
|
{else}
|
||||||
<app:avatar:profile profile={_profileActive} />
|
<app:avatar:profile profile={_profileActive} />
|
||||||
{/}
|
{/}
|
||||||
|
|
@ -25,23 +23,28 @@
|
||||||
|
|
||||||
<avatar:>
|
<avatar:>
|
||||||
<div class="avatar {{#if @main}}main-avatar{{/}} {{#if @party}}party-avatar{{/}}" data-toggle='modal' data-target='#avatar-modal' data-uid="{@profile.id}" x-bind="click:profileChangeActive">
|
<div class="avatar {{#if @main}}main-avatar{{/}} {{#if @party}}party-avatar{{/}}" data-toggle='modal' data-target='#avatar-modal' data-uid="{@profile.id}" x-bind="click:profileChangeActive">
|
||||||
{#unless @minimal}{#if @profile.items.pet}<img src='img/sprites/{@profile.items.pet.icon}' />{/}{/}
|
|
||||||
<div class='character-sprites'>
|
{#if and(@profile.items.pet, not(@minimal))}
|
||||||
{#with @profile.preferences as :p}
|
<img src='/img/sprites/{@profile.items.pet.icon}' />
|
||||||
<span class='{:p.gender}_skin_{:p.skin}'></span>
|
{/}
|
||||||
<span class='{:p.gender}_hair_{:p.hair}'></span>
|
|
||||||
<span class="{equipped(@profile, 'armor')}"></span>
|
{#with @profile.preferences as :p}
|
||||||
{#if :p.showHelm}
|
<div class='character-sprites'>
|
||||||
<span class="{equipped(@profile, 'head')}"></span>
|
<span class='{:p.gender}_skin_{:p.skin}'></span>
|
||||||
{else}
|
<span class='{:p.gender}_hair_{:p.hair}'></span>
|
||||||
<span class="{:p.gender}_head_0"></span>
|
<span class="{equipped(@profile, 'armor')}"></span>
|
||||||
{/}
|
{#if :p.showHelm}
|
||||||
<span class='{:p.gender}_shield_{@profile.items.shield}'></span>
|
<span class="{equipped(@profile, 'head')}"></span>
|
||||||
<span class='{:p.gender}_weapon_{@profile.items.weapon}'></span>
|
{else}
|
||||||
{/}
|
<span class="{:p.gender}_head_0"></span>
|
||||||
</div>
|
{/}
|
||||||
|
<span class='{:p.gender}_shield_{@profile.items.shield}'></span>
|
||||||
|
<span class='{:p.gender}_weapon_{@profile.items.weapon}'></span>
|
||||||
|
</div>
|
||||||
|
{/}
|
||||||
|
|
||||||
{{#unless @minimal}}
|
{{#unless @minimal}}
|
||||||
<div class="lvl"><span class="badge badge-info">Lvl {@profile.stats.lvl}</span></div>
|
<div class="lvl"><span class="badge badge-info">Lvl {@profile.stats.lvl}</span></div>
|
||||||
{{/}}
|
{{/}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -53,101 +56,103 @@
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
<!-- customization options -->
|
<!-- customization options -->
|
||||||
<menu type="list">
|
{#with _user.preferences as :p}
|
||||||
<!-- gender -->
|
|
||||||
<li class="customize-menu">
|
|
||||||
<menu label="Head">
|
|
||||||
<button type="button" class="m_head_0 customize-option" data-value="m" x-bind="click:customizeGender"></button>
|
|
||||||
<button type="button" class="f_head_0 customize-option" data-value="f" x-bind="click:customizeGender"></button>
|
|
||||||
</menu>
|
|
||||||
<label class="checkbox">
|
|
||||||
<input type=checkbox checked="{_user.preferences.showHelm}" /> Show Helm
|
|
||||||
</label>
|
|
||||||
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<!-- hair -->
|
|
||||||
<li class="customize-menu">
|
|
||||||
<menu label="Hair">
|
|
||||||
<button type="button" class="{.gender}_hair_blond customize-option" data-value="blond" x-bind="click:customizeHair"></button>
|
|
||||||
<button type="button" class="{.gender}_hair_black customize-option" data-value="black" x-bind="click:customizeHair"></button>
|
|
||||||
<button type="button" class="{.gender}_hair_brown customize-option" data-value="brown" x-bind="click:customizeHair"></button>
|
|
||||||
<button type="button" class="{.gender}_hair_white customize-option" data-value="white" x-bind="click:customizeHair"></button>
|
|
||||||
</menu>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<!-- skin -->
|
|
||||||
<li class="customize-menu">
|
|
||||||
<menu label="Skin">
|
|
||||||
<button type="button" class='{.gender}_skin_dead customize-option' data-value="dead" x-bind="click:customizeSkin"></button>
|
|
||||||
<button type="button" class='{.gender}_skin_orc customize-option' data-value="orc" x-bind="click:customizeSkin"></button>
|
|
||||||
<button type="button" class='{.gender}_skin_asian customize-option' data-value="asian" x-bind="click:customizeSkin"></button>
|
|
||||||
<button type="button" class='{.gender}_skin_black customize-option' data-value="black" x-bind="click:customizeSkin"></button>
|
|
||||||
<button type="button" class='{.gender}_skin_white customize-option' data-value="white" x-bind="click:customizeSkin"></button>
|
|
||||||
</menu>
|
|
||||||
</li>
|
|
||||||
</menu>
|
|
||||||
|
|
||||||
{#if equal(_user.preferences.gender, 'f')} <!-- Sorry boys -->
|
|
||||||
<menu type="list">
|
<menu type="list">
|
||||||
|
<!-- gender -->
|
||||||
<li class="customize-menu">
|
<li class="customize-menu">
|
||||||
<menu label="Clothing">
|
<menu label="Head">
|
||||||
<button type="button" class="f_armor_0_v1 customize-option" data-value="v1" x-bind="click:customizeArmorSet"></button>
|
<button type="button" class="m_head_0 customize-option" data-value="m" x-bind="click:customizeGender"></button>
|
||||||
<button type="button" class="f_armor_0_v2 customize-option" data-value="v2" x-bind="click:customizeArmorSet"></button>
|
<button type="button" class="f_head_0 customize-option" data-value="f" x-bind="click:customizeGender"></button>
|
||||||
|
</menu>
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type=checkbox checked="{_user.preferences.showHelm}" /> Show Helm
|
||||||
|
</label>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- hair -->
|
||||||
|
<li class="customize-menu">
|
||||||
|
<menu label="Hair">
|
||||||
|
<button type="button" class="{:p.gender}_hair_blond customize-option" data-value="blond" x-bind="click:customizeHair"></button>
|
||||||
|
<button type="button" class="{:p.gender}_hair_black customize-option" data-value="black" x-bind="click:customizeHair"></button>
|
||||||
|
<button type="button" class="{:p.gender}_hair_brown customize-option" data-value="brown" x-bind="click:customizeHair"></button>
|
||||||
|
<button type="button" class="{:p.gender}_hair_white customize-option" data-value="white" x-bind="click:customizeHair"></button>
|
||||||
|
</menu>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- skin -->
|
||||||
|
<li class="customize-menu">
|
||||||
|
<menu label="Skin">
|
||||||
|
<button type="button" class='{:p.gender}_skin_dead customize-option' data-value="dead" x-bind="click:customizeSkin"></button>
|
||||||
|
<button type="button" class='{:p.gender}_skin_orc customize-option' data-value="orc" x-bind="click:customizeSkin"></button>
|
||||||
|
<button type="button" class='{:p.gender}_skin_asian customize-option' data-value="asian" x-bind="click:customizeSkin"></button>
|
||||||
|
<button type="button" class='{:p.gender}_skin_black customize-option' data-value="black" x-bind="click:customizeSkin"></button>
|
||||||
|
<button type="button" class='{:p.gender}_skin_white customize-option' data-value="white" x-bind="click:customizeSkin"></button>
|
||||||
</menu>
|
</menu>
|
||||||
</li>
|
</li>
|
||||||
</menu>
|
</menu>
|
||||||
|
|
||||||
|
{#if equal(_user.preferences.gender, 'f')} <!-- Sorry boys -->
|
||||||
|
<menu type="list">
|
||||||
|
<li class="customize-menu">
|
||||||
|
<menu label="Clothing">
|
||||||
|
<button type="button" class="f_armor_0_v1 customize-option" data-value="v1" x-bind="click:customizeArmorSet"></button>
|
||||||
|
<button type="button" class="f_armor_0_v2 customize-option" data-value="v2" x-bind="click:customizeArmorSet"></button>
|
||||||
|
</menu>
|
||||||
|
</li>
|
||||||
|
</menu>
|
||||||
|
{/}
|
||||||
{/}
|
{/}
|
||||||
|
|
||||||
<profile:>
|
<profile:>
|
||||||
<div class='row-fluid'>
|
<div class='row-fluid'>
|
||||||
<div class='span6 well'>
|
<div class='span6 well'>
|
||||||
{#if _profileEditing}
|
{#if and(_profileEditing, _profileActiveMain)}
|
||||||
{#if _profileActiveMain}
|
<a class='btn btn-success' x-bind="click:profileSave">Save</a>
|
||||||
<a class='btn btn-success' x-bind="click:profileSave">Save</a>
|
<!-- TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak -->
|
||||||
<!-- TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak -->
|
<div class="control-group">
|
||||||
<div class="control-group">
|
<label class="control-label" for="profileImageUrl">Photo Url</label>
|
||||||
<label class="control-label" for="profileImageUrl">Photo Url</label>
|
<div class="controls">
|
||||||
<div class="controls">
|
<input type="url" id="profileImageUrl" value="{_user.profile.imageUrl}" placeholder="Image Url"/>
|
||||||
<input type="url" id="profileImageUrl" value="{_user.profile.imageUrl}" placeholder="Image Url"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label class="control-label" for="profileFullName">Full Name</label>
|
<label class="control-label" for="profileFullName">Full Name</label>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<input type="text" id="profileFullName" placeholder="Full Name" value="{_user.profile.name}" />
|
<input type="text" id="profileFullName" placeholder="Full Name" value="{_user.profile.name}" />
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label class="control-label" for="profileBlurb">Blurb</label>
|
<label class="control-label" for="profileBlurb">Blurb</label>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<textarea id="profileBlurb" placeholder="Blurb" >{_user.profile.blurb}</textarea>
|
<textarea id="profileBlurb" placeholder="Blurb" >{_user.profile.blurb}</textarea>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label class="control-label" for="profileWebsite">Websites</label>
|
<label class="control-label" for="profileWebsite">Websites</label>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<form x-bind="submit:profileAddWebsite">
|
<form x-bind="submit:profileAddWebsite">
|
||||||
<input type="url" id="profileWebsite" value="{_newProfileWebsite}" placeholder="Add Website"/>
|
<input type="url" id="profileWebsite" value="{_newProfileWebsite}" placeholder="Add Website"/>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
{#each _user.profile.websites as :website}
|
|
||||||
<!-- would prefer if there were and index in #each, instead using data-website to search with indexOf -->
|
|
||||||
<li>{:website} <a data-website="{:website}" x-bind="click:profileRemoveWebsite"><i class='icon-remove'></i></a></li>
|
|
||||||
{/}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<a class='btn btn-success' x-bind="click:profileSave">Save</a>
|
<ul>
|
||||||
{/}
|
{#each _user.profile.websites as :website}
|
||||||
|
<!-- would prefer if there were and index in #each, instead using data-website to search with indexOf -->
|
||||||
|
<li>{:website} <a data-website="{:website}" x-bind="click:profileRemoveWebsite"><i class='icon-remove'></i></a></li>
|
||||||
|
{/}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<a class='btn btn-success' x-bind="click:profileSave">Save</a>
|
||||||
{else}
|
{else}
|
||||||
<h3>
|
<h3>
|
||||||
{#if _profileActive.profile.name}{_profileActive.profile.name}
|
{#if _profileActive.profile.name}
|
||||||
{else}{username(_profileActive.auth)}
|
{_profileActive.profile.name}
|
||||||
|
{else}
|
||||||
|
{username(_profileActive.auth)}
|
||||||
{/}
|
{/}
|
||||||
{#if _profileActiveMain}<a class='btn pull-right' x-bind="click:profileEdit">Edit</a>{/}
|
{#if _profileActiveMain}<a class='btn pull-right' x-bind="click:profileEdit">Edit</a>{/}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -160,7 +165,7 @@
|
||||||
{#if _profileActive.profile.websites}
|
{#if _profileActive.profile.websites}
|
||||||
<ul>
|
<ul>
|
||||||
{#each _profileActive.profile.websites as :website}
|
{#each _profileActive.profile.websites as :website}
|
||||||
<li>{:website}</li>
|
<li>{:website}</li>
|
||||||
{/}
|
{/}
|
||||||
</ul>
|
</ul>
|
||||||
{/}
|
{/}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue