From 443b144f29174bb805f5c060fbb055ca26ddde89 Mon Sep 17 00:00:00 2001 From: Matchu Date: Mon, 27 Jun 2011 15:33:34 -0400 Subject: [PATCH] image mode --- app/controllers/application_controller.rb | 7 + app/helpers/application_helper.rb | 4 + app/stylesheets/outfits/_edit.sass | 49 +++ app/views/outfits/edit.html.haml | 13 + ...26202605_add_image_mode_tester_to_users.rb | 10 + db/schema.rb | 3 +- public/javascripts/outfits/edit.js | 26 ++ public/javascripts/wardrobe.js | 71 ++- public/stylesheets/compiled/screen.css | 416 ++++++++++-------- 9 files changed, 420 insertions(+), 179 deletions(-) create mode 100644 db/migrate/20110626202605_add_image_mode_tester_to_users.rb diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index e8065d95..903f64ec 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -1,3 +1,10 @@ class ApplicationController < ActionController::Base protect_from_forgery + + helper_method :can_use_image_mode? + + def can_use_image_mode? + user_signed_in? && current_user.image_mode_tester? + end end + diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index acd0f91d..bbed463e 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -14,6 +14,10 @@ module ApplicationHelper end end + def donate_url + '/donate' + end + def flashes raw(flash.inject('') do |html, pair| key, value = pair diff --git a/app/stylesheets/outfits/_edit.sass b/app/stylesheets/outfits/_edit.sass index 4ccf69ca..eb579f2a 100644 --- a/app/stylesheets/outfits/_edit.sass +++ b/app/stylesheets/outfits/_edit.sass @@ -20,6 +20,10 @@ $outfit-header-padding: 24px $outfit-content-width: $sidebar-unit-inner-width - $outfit-thumbnail-size - $outfit-thumbnail-margin - 32px $outfit-content-inner-width: $outfit-content-width - $outfit-header-padding +=active-mode + color: $text-color + font-weight: bold + =outfit +outfit-star-shifted padding: .25em 0 @@ -187,6 +191,51 @@ body.outfits-edit z-index: 1000 &.waiting-on-0 display: none + #preview-mode + margin-right: 1em + position: absolute + right: 100% + text-align: center + top: 0 + width: 7em + &.flash-active + #preview-mode-flash + +active-mode + &.image-active + #preview-mode-image + +active-mode + &.can-download + #preview-download-image + display: inline-block + #preview-mode-toggle + +border-radius(.5em) + border: 1px solid $module-border-color + color: $soft-text-color + font-size: 85% + list-style: none + margin: 0 auto .5em + text-align: center + width: 5em + li + border-top: 1px solid $soft-border-color + cursor: pointer + padding: .125em 0 + width: 100% + &:first-child + border-top: 0 + #preview-download-image + display: none + font-size: 85% + margin: 0 auto + #preview-mode-image-access-denied + display: block + font-size: 75% + text-align: center + text-decoration: none + width: 100% + em + font-style: normal + text-decoration: underline #preview-sidebar +border-radius(10px) border: 1px solid $soft-border-color diff --git a/app/views/outfits/edit.html.haml b/app/views/outfits/edit.html.haml index e51db33b..10530c18 100644 --- a/app/views/outfits/edit.html.haml +++ b/app/views/outfits/edit.html.haml @@ -36,6 +36,19 @@ %p Flash and Javascript (but not Java!) are required to preview outfits. %p If this message stays after the page is done loading, check those first. #preview-image-container + #preview-mode + %ul#preview-mode-toggle + %li#preview-mode-flash.active Flash + - if can_use_image_mode? + %li#preview-mode-image Image + - unless can_use_image_mode? + = link_to(donate_url, :id => 'preview-mode-image-access-denied', :target => '_blank') do + %strong Image mode + is available for early beta testing to users who + %em donate + at least $5 to help upgrade the server. Thanks! + - if can_use_image_mode? + %button#preview-download-image Download #preview-sidebar #outfit-not-found Outfit not found #save-success Outfit successfully saved diff --git a/db/migrate/20110626202605_add_image_mode_tester_to_users.rb b/db/migrate/20110626202605_add_image_mode_tester_to_users.rb new file mode 100644 index 00000000..a319eecb --- /dev/null +++ b/db/migrate/20110626202605_add_image_mode_tester_to_users.rb @@ -0,0 +1,10 @@ +class AddImageModeTesterToUsers < ActiveRecord::Migration + def self.up + add_column :users, :image_mode_tester, :boolean, :default => false, :null => false + end + + def self.down + remove_column :users, :image_mode_tester + end +end + diff --git a/db/schema.rb b/db/schema.rb index cdecbcb9..69c5dca6 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -10,7 +10,7 @@ # # It's strongly recommended to check this file into your version control system. -ActiveRecord::Schema.define(:version => 20110515134542) do +ActiveRecord::Schema.define(:version => 20110626202605) do create_table "auth_servers", :force => true do |t| t.string "short_name", :limit => 10, :null => false @@ -168,6 +168,7 @@ ActiveRecord::Schema.define(:version => 20110515134542) do t.datetime "remember_created_at" t.boolean "forum_admin", :default => false, :null => false t.boolean "forum_moderator" + t.boolean "image_mode_tester", :default => false, :null => false end create_table "zones", :force => true do |t| diff --git a/public/javascripts/outfits/edit.js b/public/javascripts/outfits/edit.js index 7301b69b..65c4d3c3 100644 --- a/public/javascripts/outfits/edit.js +++ b/public/javascripts/outfits/edit.js @@ -822,6 +822,32 @@ View.PreviewAdapterForm = function (wardrobe) { preview.toggleAdapter(); } konami.load(); + + var modeWrapper = $('#preview-mode').addClass('flash-active'); + var modeOptions = $('#preview-mode-toggle li'); + function activate(el, modeOn, modeOff) { + modeWrapper.removeClass(modeOff + '-active').addClass(modeOn + '-active'); + $(el).addClass('active'); + } + + $('#preview-mode-flash').click(function () { + activate(this, 'flash', 'image'); + preview.useSWFAdapter(); + }); + + $('#preview-mode-image').click(function () { + activate(this, 'image', 'flash'); + preview.useImageAdapter(); + }); + + $('#preview-download-image').click(function () { + preview.adapter.saveImage(); + }); + + if(document.createElement('canvas').getContext) { + // If browser supports canvas + modeWrapper.addClass('can-download'); + } } View.Search = function (wardrobe) { diff --git a/public/javascripts/wardrobe.js b/public/javascripts/wardrobe.js index 96377c85..37c9a541 100644 --- a/public/javascripts/wardrobe.js +++ b/public/javascripts/wardrobe.js @@ -1249,6 +1249,48 @@ Wardrobe.getStandardView = function (options) { preview_el.removeClass('swf-adapter').addClass('image-adapter'); pendingMessageEl.appendTo(previewImageContainer); + var exportIframe = $('#preview-export-iframe'); + if(exportIframe.length == 0) { + exportIframe = $('