pretty tab navigation for wardrobe sidebar

This commit is contained in:
Emi Matchu 2012-07-25 19:02:23 -04:00
parent 9ea7d5841e
commit b02c95c2d9
9 changed files with 607 additions and 362 deletions

View file

@ -8,7 +8,7 @@
$object-padding: 6px $object-padding: 6px
$nc-icon-size: 16px $nc-icon-size: 16px
$preview-dimension: 400px $preview-dimension: 380px
$sidebar-margin: 20px $sidebar-margin: 20px
$sidebar-width: 400px $sidebar-width: 400px
$sidebar-unit-horizontal-padding: 24px $sidebar-unit-horizontal-padding: 24px
@ -29,6 +29,16 @@ $outfit-content-inner-width: $outfit-content-width - $outfit-header-padding
color: $text-color color: $text-color
font-weight: bold font-weight: bold
=sidebar-navbar-unselected
background: transparent
border-bottom: 1px solid $soft-border-color
font-weight: normal
=sidebar-navbar-selected
background: white
border-bottom-color: white
font-weight: bold
=outfit =outfit
+outfit-star-shifted +outfit-star-shifted
padding: .25em 0 padding: .25em 0
@ -148,7 +158,7 @@ body.outfits-edit
position: left center position: left center
repeat: no-repeat repeat: no-repeat
padding-left: 20px padding-left: 20px
#save-outfit, #save-outfit-not-signed-in, #save-current-outfit, #save-outfit-copy, #save-outfit-finish #save-outfit, #save-outfit-not-signed-in, #save-current-outfit, #save-outfit-finish
+loud-awesome-button-color +loud-awesome-button-color
#current-outfit-permalink, #shared-outfit-permalink #current-outfit-permalink, #shared-outfit-permalink
display: none display: none
@ -211,11 +221,14 @@ body.outfits-edit
&.image-active &.image-active
#preview-mode-image #preview-mode-image
+active-mode +active-mode
#report-broken-image #preview-mode-note, #report-broken-image
display: block display: block
&.can-download // Phasing out the image download section. Not confident enough yet to
#preview-download-image // *remove* it, depending on user feedback, but that's a TODO for down
display: inline-block // the road if hiding goes well.
// &.can-download
// #preview-download-image
// display: inline-block
#preview-mode-toggle #preview-mode-toggle
+border-radius(.5em) +border-radius(.5em)
border: 1px solid $module-border-color border: 1px solid $module-border-color
@ -253,17 +266,15 @@ body.outfits-edit
em em
font-style: normal font-style: normal
text-decoration: underline text-decoration: underline
#report-broken-image #preview-mode-note, #report-broken-image
display: none display: none
#preview-sidebar #preview-sidebar
+border-radius(10px)
border: 1px solid $soft-border-color
float: left float: left
height: $preview-dimension height: $preview-dimension
margin-left: $sidebar-margin margin-left: $sidebar-margin
margin-bottom: 1em margin-bottom: 1em
overflow: auto width: $container_width - $preview-dimension - $sidebar-margin
width: $container_width - $preview-dimension - $sidebar-margin - 2px
&.viewing-outfits &.viewing-outfits
#preview-closet #preview-closet
display: none display: none
@ -275,10 +286,7 @@ body.outfits-edit
#preview-sharing #preview-sharing
display: block display: block
.sidebar-view .sidebar-view
h2 margin-top: 1.5em
margin:
bottom: .25em
left: $sidebar-unit-horizontal-padding
#preview-closet #preview-closet
h2 h2
margin-bottom: 0 margin-bottom: 0
@ -380,7 +388,6 @@ body.outfits-edit
width: 100% width: 100%
#preview-sidebar #preview-sidebar
float: right float: right
height: 100%
margin: 0 margin: 0
position: relative position: relative
width: $sidebar-width width: $sidebar-width
@ -463,10 +470,11 @@ body.outfits-edit
#preview-outfits #preview-outfits
display: none display: none
text-align: left text-align: left
> ul > ul
+sidebar-view-child +sidebar-view-child
background: image-url("loading.gif") no-repeat center top background: image-url("loading.gif") no-repeat center top
display: block display: none
font-family: $main-font font-family: $main-font
list-style: none list-style: none
margin: margin:
@ -476,12 +484,39 @@ body.outfits-edit
+outfit +outfit
&.loaded &.loaded
background: transparent background: transparent
#preview-outfits-not-logged-in
text-align: center
img
border:
color: $module-border-color
style: solid
width: 1px 0
figure
display: block
margin: 0 0 1em 0
padding: 0
figcaption
display: block
font-weight: bold
p
+sidebar-view-child
font-size: 85%
#preview-outfits-log-in
+awesome-button
+loud-awesome-button-color
#preview-sharing #preview-sharing
display: none display: none
#preview-sharing-urls #preview-sharing-urls
+sidebar-view-child +sidebar-view-child
display: none
margin: margin:
bottom: 1em bottom: 1em
top: 1em top: 1em
@ -503,6 +538,7 @@ body.outfits-edit
+sidebar-view-child +sidebar-view-child
+user-select(none) +user-select(none)
// remove whitespace between inline-block elements // remove whitespace between inline-block elements
display: none
font-size: 0 font-size: 0
text-align: center text-align: center
@ -536,32 +572,39 @@ body.outfits-edit
border: 1px solid $soft-border-color border: 1px solid $soft-border-color
display: block display: block
height: 150px height: 150px
margin: 0 auto margin: 1em auto 0
width: 150px width: 150px
#preview-sharing-thumbnail-loading #preview-sharing-thumbnail-loading
height: 100% height: 100%
position: relative position: relative
width: 100% width: 100%
span
color: $soft-text-color
font-size: 85%
margin-top: -0.75em
position: absolute
text-align: center
top: 50%
width: 100%
#preview-sharing-thumbnail span
color: $soft-text-color
font-size: 85%
margin-top: -0.75em
position: absolute
text-align: center
top: 50%
width: 100%
#preview-sharing-thumbnail, #preview-sharing-thumbnail-generating
display: none
&.urls-loaded
#preview-sharing-thumbnail-saving
display: none display: none
&.loaded #preview-sharing-urls, #preview-sharing-url-formats, #preview-sharing-thumbnail-generating
#preview-sharing-thumbnail-loading display: block
display: none
&.urls-loaded.thumbnail-loaded
#preview-sharing-thumbnail #preview-sharing-thumbnail-loading
display: block display: none
#preview-sharing-thumbnail
display: block
.preview-sidebar-nav .preview-sidebar-nav
float: right float: right
@ -569,6 +612,48 @@ body.outfits-edit
margin: margin:
right: $sidebar-unit-horizontal-padding right: $sidebar-unit-horizontal-padding
top: 1em top: 1em
$sidebar-border-radius: 10px
$sidebar-navbar-inner-width: $sidebar-width - 2px
$sidebar-navbar-child-outer-width: floor($sidebar-navbar-inner-width / 3)
#preview-sidebar
#preview-sidebar-navbar-closet
+sidebar-navbar-selected
&.viewing-outfits, &.sharing
#preview-sidebar-navbar-closet
+sidebar-navbar-unselected
&.viewing-outfits #preview-sidebar-navbar-outfits, &.sharing #preview-sidebar-navbar-sharing
+sidebar-navbar-selected
#preview-sidebar-navbar
+border-radius($sidebar-border-radius $sidebar-border-radius 0 0)
+clearfix
+header-text
background: $module-bg-color
border: 1px solid $soft-border-color
border-bottom: 0
font-size: 150%
> div
+sidebar-navbar-unselected
cursor: pointer
float: left
border-left: 1px solid $soft-border-color
padding: .5em 0
text-align: center
width: $sidebar-navbar-child-outer-width
&:first-child
border-left: 0
#preview-sidebar-content
+border-radius(0 0 $sidebar-border-radius $sidebar-border-radius)
border: 1px solid $soft-border-color
border-top: 0
overflow: auto
#save-success, #save-error, #outfit-not-found, #preview-sidebar-donation-request #save-success, #save-error, #outfit-not-found, #preview-sidebar-donation-request
+sidebar-view-child +sidebar-view-child
@ -656,8 +741,11 @@ body.outfits-edit
display: none display: none
#save-current-outfit, #save-outfit-copy #save-current-outfit, #save-outfit-copy
display: inline-block display: inline-block
#current-outfit-permalink // Phasing out permalink. Shared outfit links have been straight-up
display: inline-block // removed, but this may stay depending on user feedback. Otherwise,
// removing it is TODO down the road.
// #current-outfit-permalink
// display: inline-block
&.saving-outfit &.saving-outfit
#save-outfit-form #save-outfit-form
display: block display: block
@ -665,6 +753,10 @@ body.outfits-edit
display: none display: none
.preview-search-form-your-items .preview-search-form-your-items
+inline-block +inline-block
#preview-outfits-not-logged-in
display: none
#preview-outfits-list
display: block
&.user-not-signed-in &.user-not-signed-in
#save-outfit-not-signed-in #save-outfit-not-signed-in

View file

@ -17,14 +17,10 @@
#save-outfit-wrapper #save-outfit-wrapper
%a#current-outfit-permalink{:target => '_blank'} %a#current-outfit-permalink{:target => '_blank'}
= image_tag 'link_go.png', :alt => 'Permalink', :title => 'Permalink to current outfit' = image_tag 'link_go.png', :alt => 'Permalink', :title => 'Permalink to current outfit'
%a#shared-outfit-permalink{:target => '_blank'}
= image_tag 'link_go.png', :alt => 'Permalink', :title => 'Permalink to shared outfit'
%input#shared-outfit-url.outfit-url{:type => 'text'}
%button#share-outfit Share outfit
%button#save-outfit Save outfit %button#save-outfit Save outfit
%button#save-outfit-not-signed-in Log in to save %button#save-outfit-not-signed-in Log in to save
%button#save-outfit-copy Save as…
%button#save-current-outfit Save &quot;<span>current outfit</span>&quot; %button#save-current-outfit Save &quot;<span>current outfit</span>&quot;
%button#save-outfit-copy Save a copy
%form#save-outfit-form %form#save-outfit-form
.outfit-star .outfit-star
%input#save-outfit-name{:type => 'text', :placeholder => 'Outfit name'} %input#save-outfit-name{:type => 'text', :placeholder => 'Outfit name'}
@ -62,45 +58,62 @@
%em donate %em donate
at least $5 to help upgrade the server. Thanks! at least $5 to help upgrade the server. Thanks!
#preview-sidebar #preview-sidebar
#outfit-not-found Outfit not found %nav#preview-sidebar-navbar
#save-success Outfit successfully saved #preview-sidebar-navbar-closet Closet
#save-error #preview-sidebar-navbar-sharing Sharing
#preview-closet.sidebar-view #preview-sidebar-navbar-outfits Outfits
%a#preview-sidebar-nav-outfits.preview-sidebar-nav{:href => '#'} Your outfits #preview-sidebar-content
%h2 Closet #outfit-not-found Outfit not found
%ul #save-success Outfit successfully saved
%p#fullscreen-copyright #save-error
Images © 2000-2010 Neopets, Inc. All Rights Reserved. #preview-closet.sidebar-view
Used With Permission %ul
#preview-outfits.sidebar-view %p#fullscreen-copyright
%a.preview-sidebar-nav-closet.preview-sidebar-nav{:href => "#"} &larr; Back to Closet Images © 2000-2010 Neopets, Inc. All Rights Reserved.
%h2 Your outfits Used With Permission
%ul #preview-outfits.sidebar-view
#preview-sharing.sidebar-view %ul#preview-outfits-list
%a.preview-sidebar-nav-closet.preview-sidebar-nav{:href => '#'} &larr; Back to Closet #preview-outfits-not-logged-in
%h2 Sharing %figure
#preview-sharing-thumbnail-wrapper = image_tag 'outfits_welcome.png'
#preview-sharing-thumbnail-loading %figcaption Ready to become a pro designer?
= image_tag 'outfits/small_loading.gif' :markdown
%span Generating&hellip; We know how hard it can be to keep track of your ideas,
%img#preview-sharing-thumbnail especially if you end up having a lot of them.
%ul#preview-sharing-urls **But Dress to Impress makes it easy.**
%li
%label{:for => 'preview-sharing-permalink-url'} Outfit page Once you have an idea for an outfit, you can **build it,
%input#preview-sharing-permalink-url.outfit-url{:type => 'text'} save it, and view it again later**, either to update your
%li design or finally make your dream a reality.
%label{:for => 'preview-sharing-large-image-url'} Large image
%input#preview-sharing-large-image-url.outfit-url{:type => 'text'} **Thousands of users have already saved tens of thousands of
%li outfits &mdash; will you be next?**
%label{:for => 'preview-sharing-medium-image-url'} Medium image
%input#preview-sharing-medium-image-url.outfit-url{:type => 'text'} = link_to 'Log in to save this outfit', login_path_with_return_to, :id => 'preview-outfits-log-in'
%li #preview-sharing.sidebar-view
%label{:for => 'preview-sharing-small-image-url'} Small image #preview-sharing-thumbnail-wrapper
%input#preview-sharing-small-image-url.outfit-url{:type => 'text'} #preview-sharing-thumbnail-loading
%ul#preview-sharing-url-formats = image_tag 'outfits/small_loading.gif'
%li.active{'data-format' => 'plain'} Plain %span#preview-sharing-thumbnail-saving Saving&hellip;
%li{'data-format' => 'html'} HTML %span#preview-sharing-thumbnail-generating Generating&hellip;
%li{'data-format' => 'bbcode'} BBCode %img#preview-sharing-thumbnail
%ul#preview-sharing-urls
%li
%label{:for => 'preview-sharing-permalink-url'} Outfit page
%input#preview-sharing-permalink-url.outfit-url{:type => 'text'}
%li
%label{:for => 'preview-sharing-large-image-url'} Large image
%input#preview-sharing-large-image-url.outfit-url{:type => 'text'}
%li
%label{:for => 'preview-sharing-medium-image-url'} Medium image
%input#preview-sharing-medium-image-url.outfit-url{:type => 'text'}
%li
%label{:for => 'preview-sharing-small-image-url'} Small image
%input#preview-sharing-small-image-url.outfit-url{:type => 'text'}
%ul#preview-sharing-url-formats
%li.active{'data-format' => 'plain'} Plain
%li{'data-format' => 'html'} HTML
%li{'data-format' => 'bbcode'} BBCode
%form#preview-search-form %form#preview-search-form
%header %header
%h2 Add an item %h2 Add an item

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

View file

@ -171,7 +171,9 @@ View.Fullscreen = function (wardrobe) {
var full = $(document.body).hasClass('fullscreen'), win = $(window), var full = $(document.body).hasClass('fullscreen'), win = $(window),
preview_el = $('#preview'), search_el = $('#preview-search-form'), preview_el = $('#preview'), search_el = $('#preview-search-form'),
preview_swf = $('#preview-swf'), sidebar_el = $('#preview-sidebar'), preview_swf = $('#preview-swf'), sidebar_el = $('#preview-sidebar'),
footer = $('#footer'), jwindow = $(window), overrideFull = false; sidebar_content_el = $('#preview-sidebar-content'),
sidebar_navbar_el = $('#preview-sidebar-navbar'), footer = $('#footer'),
jwindow = $(window), overrideFull = false;
function fit() { function fit() {
if(!overrideFull) { if(!overrideFull) {
@ -213,6 +215,12 @@ View.Fullscreen = function (wardrobe) {
preview_swf.css(size.next); preview_swf.css(size.next);
preview_el.height(available.height); preview_el.height(available.height);
// Now that preview is fit, we fit the sidebar's content element, which
// also has to deal with the constraint of its navbar's height.
var sidebar_content_height = available.height -
sidebar_navbar_el.outerHeight() - 1; // 1px bottom border
sidebar_content_el.height(sidebar_content_height);
} }
} }
$('#preview').data('fit', fit); $('#preview').data('fit', fit);
@ -430,8 +438,6 @@ View.Hash = function (wardrobe) {
View.Outfits = function (wardrobe) { View.Outfits = function (wardrobe) {
var current_outfit_permalink_el = $('#current-outfit-permalink'), var current_outfit_permalink_el = $('#current-outfit-permalink'),
shared_outfit_permalink_el = $('#shared-outfit-permalink'),
shared_outfit_url_el = $('#shared-outfit-url'),
new_outfit_form_el = $('#save-outfit-form'), new_outfit_form_el = $('#save-outfit-form'),
new_outfit_name_el = $('#save-outfit-name'), new_outfit_name_el = $('#save-outfit-name'),
outfits_el = $('#preview-outfits'), outfits_el = $('#preview-outfits'),
@ -451,13 +457,6 @@ View.Outfits = function (wardrobe) {
return $('li.outfit-' + outfit.id); return $('li.outfit-' + outfit.id);
} }
function navLinkTo(callback) {
return function (e) {
e.preventDefault();
callback();
}
}
function navigateTo(will_be_viewing) { function navigateTo(will_be_viewing) {
var currently_viewing = sidebar_el.attr('class'); var currently_viewing = sidebar_el.attr('class');
if(currently_viewing != will_be_viewing) previously_viewing = currently_viewing; if(currently_viewing != will_be_viewing) previously_viewing = currently_viewing;
@ -499,9 +498,13 @@ View.Outfits = function (wardrobe) {
save_outfit_wrapper_el.removeClass('saving-outfit'); save_outfit_wrapper_el.removeClass('saving-outfit');
} }
$('#preview-sidebar-nav-outfits').click(navLinkTo(showOutfits)); $('#preview-sidebar-navbar-closet').click(showCloset);
$('#preview-sidebar-navbar-sharing').click(function () {
$('.preview-sidebar-nav-closet').click(navLinkTo(showCloset)); sharing.startLoading();
wardrobe.outfit.share();
showSharing();
});
$('#preview-sidebar-navbar-outfits').click(showOutfits);
$('#save-outfit, #save-outfit-copy').click(showNewOutfitForm); $('#save-outfit, #save-outfit-copy').click(showNewOutfitForm);
@ -617,10 +620,6 @@ View.Outfits = function (wardrobe) {
setOutfitPermalink(outfit, current_outfit_permalink_el); setOutfitPermalink(outfit, current_outfit_permalink_el);
} }
function setSharedOutfitPermalink(outfit) {
setOutfitPermalink(outfit, shared_outfit_permalink_el, shared_outfit_url_el);
}
function setActiveOutfit(outfit) { function setActiveOutfit(outfit) {
outfits_list_el.find('li.active').removeClass('active'); outfits_list_el.find('li.active').removeClass('active');
if(outfit.id) { if(outfit.id) {
@ -647,6 +646,7 @@ View.Outfits = function (wardrobe) {
/* Sharing */ /* Sharing */
var sharing = new function Sharing() { var sharing = new function Sharing() {
var WRAPPER = $('#preview-sharing');
var sharing_url_els = { var sharing_url_els = {
permalink: $('#preview-sharing-permalink-url'), permalink: $('#preview-sharing-permalink-url'),
large_image: $('#preview-sharing-large-image-url'), large_image: $('#preview-sharing-large-image-url'),
@ -698,6 +698,11 @@ View.Outfits = function (wardrobe) {
urls.large_image = pathToUrl(outfit.image_versions.large); urls.large_image = pathToUrl(outfit.image_versions.large);
thumbnail.setUrl(urls.small_image); thumbnail.setUrl(urls.small_image);
formatUrls(); formatUrls();
WRAPPER.addClass('urls-loaded');
}
this.startLoading = function () {
WRAPPER.removeClass('urls-loaded');
} }
function formatUrls() { function formatUrls() {
@ -720,7 +725,6 @@ View.Outfits = function (wardrobe) {
} }
var thumbnail = new function SharingThumbnail() { var thumbnail = new function SharingThumbnail() {
var WRAPPER = $('#preview-sharing-thumbnail-wrapper');
var IMAGE = $('#preview-sharing-thumbnail'); var IMAGE = $('#preview-sharing-thumbnail');
var RETRY_DELAY = 2000; // 2 seconds var RETRY_DELAY = 2000; // 2 seconds
var url = null; var url = null;
@ -734,7 +738,7 @@ View.Outfits = function (wardrobe) {
} }
function hide() { function hide() {
WRAPPER.removeClass('loaded'); WRAPPER.removeClass('thumbnail-loaded');
} }
function load() { function load() {
@ -756,7 +760,7 @@ View.Outfits = function (wardrobe) {
function show() { function show() {
log("Sharing thumbnail found"); log("Sharing thumbnail found");
IMAGE.attr('src', url); IMAGE.attr('src', url);
WRAPPER.addClass('loaded'); WRAPPER.addClass('thumbnail-loaded');
} }
this.setUrl = function (newUrl) { this.setUrl = function (newUrl) {
@ -784,11 +788,6 @@ View.Outfits = function (wardrobe) {
wardrobe.outfit.create({starred: new_outfit_form_el.hasClass('starred'), name: new_outfit_name_el.val()}); wardrobe.outfit.create({starred: new_outfit_form_el.hasClass('starred'), name: new_outfit_name_el.val()});
}); });
$('#share-outfit').click(function () {
save_outfit_wrapper_el.startLoading();
wardrobe.outfit.saveAnonymously();
});
new_outfit_form_el.find('div.outfit-star').click(function () { new_outfit_form_el.find('div.outfit-star').click(function () {
new_outfit_form_el.toggleClass('starred'); new_outfit_form_el.toggleClass('starred');
}); });
@ -806,6 +805,7 @@ View.Outfits = function (wardrobe) {
wardrobe.outfit.bind('saveSuccess', function (outfit) { wardrobe.outfit.bind('saveSuccess', function (outfit) {
save_success_el.notify(); save_success_el.notify();
sharing.setOutfit(outfit);
}); });
wardrobe.outfit.bind('createSuccess', function (outfit) { wardrobe.outfit.bind('createSuccess', function (outfit) {
@ -820,7 +820,6 @@ View.Outfits = function (wardrobe) {
function shareComplete(outfit) { function shareComplete(outfit) {
save_outfit_wrapper_el.stopLoading().addClass('shared-outfit'); save_outfit_wrapper_el.stopLoading().addClass('shared-outfit');
setSharedOutfitPermalink(outfit);
sharing.setOutfit(outfit); sharing.setOutfit(outfit);
showSharing(); showSharing();
} }

View file

@ -808,7 +808,7 @@ function Wardrobe() {
Controller.all = {}; Controller.all = {};
Controller.all.Outfit = function OutfitController() { Controller.all.Outfit = function OutfitController() {
var controller = this, outfit = new Outfit, last_saved_outfit = null; var controller = this, outfit = new Outfit, last_shared_outfit = null;
this.in_transaction = false; this.in_transaction = false;
@ -938,16 +938,24 @@ function Wardrobe() {
); );
} }
this.saveAnonymously = function () { this.share = function () {
if(!outfit.isIdenticalTo(last_saved_outfit)) { if(outfit.id) {
last_saved_outfit = outfit.clone(); // If this is a user-saved outfit (user is logged in), no need to
last_saved_outfit.anonymous = true; // re-share it. Skip to using the current outfit.
last_saved_outfit.create( controller.events.trigger('shareSkipped', outfit);
} else if(outfit.isIdenticalTo(last_shared_outfit)) {
// If the outfit hasn't changed since last time we shared it, no need to
// re-share it. Skip to using the last shared outfit.
controller.events.trigger('shareSkipped', last_shared_outfit);
} else {
// Otherwise, this is a fresh outfit that needs to be shared. Try, and
// report success or failure.
last_shared_outfit = outfit.clone();
last_shared_outfit.anonymous = true;
last_shared_outfit.create(
controller.event('shareSuccess'), controller.event('shareSuccess'),
controller.event('shareFailure') controller.event('shareFailure')
); );
} else {
controller.events.trigger('shareSkipped', last_saved_outfit);
} }
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 299 KiB

File diff suppressed because it is too large Load diff