Permalink
Browse files

UX pass

* Show invitation message field on Event#show when autocomplete active
* Make back button on multiple invitations more prominent
* Fix voting :active state
* Disable resizing of invitation message text box on firefox

https://trello.com/c/HS5g3CWZo
https://trello.com/c/ZDsWr1HLu
  • Loading branch information...
1 parent 8dc7043 commit eb5c0643fea6e6072d16c92a1dbf4c73ca5ea1ba Alex Baldwin and Jessie Young committed Apr 18, 2013
@@ -128,4 +128,10 @@ $(document).ready(function() {
}
);
})
+
+ // Slide in the invitation message textarea
+ $('#auto-complete').focus(function(){
+ $('.user-show-custom-text').fadeIn(400);
+ });
+
});
@@ -282,6 +282,11 @@ div.table-wrapper {
background-position: center center;
background-repeat: no-repeat;
background-size: 40px;
+
+ &:active {
+ background-color: darken($success, 25%);
+ background-position: center 10px;
+ }
}
&.unvote {
@@ -291,6 +296,10 @@ div.table-wrapper {
background-repeat: no-repeat;
background-size: 40px;
@include box-shadow(inset 0 1px 2px darken($orange, 10%));
+
+ &:active {
+ background-position: center 10px;
+ }
}
&[disabled="disabled"] {
@@ -46,9 +46,6 @@ div.new-event-invite {
fieldset {
a.back {
float: left;
- margin: 0;
- margin-top: 15px;
- width: 60px;
}
}
}
@@ -7,10 +7,19 @@ div.show-event {
top: 18px
}
- form#invitations {
+ div.invitation-text, .invitee-input {
margin-left: 240px;
}
+ .custom-text {
+ h4 {
+ margin-left: 5px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
&.guest {
form#invitations {
margin-left: 145px;
@@ -371,39 +371,33 @@ div.show-event {
@extend section.invited-yammer-groups;
}
- section.custom-text {
- @extend .search-box;
- @include clearfix;
- border: 1px solid #a9d9e3;
- background-image: -webkit-linear-gradient(top, #f6fbfc, #dff1f4);
+ .user-show-custom-text {
+ display: none;
+ }
- h4 {
- color: #3da2b6;
- float: left;
- text-shadow: none;
- width: 242px;
- margin-top: 5px;
- }
+ .custom-text {
+ @include clearfix;
+ margin-top: 18px;
+ position: relative;
li {list-style-type: none;}
- input[type="text"] {
- @include invitation-text;
- height: 20px;
- }
-
- input[disabled="disabled"] {
- background-color: #E6E6E6;
- color: grey;
- }
-
- input[type="submit"] {
- display: none;
- }
-
textarea {
+ @include background-image(none);
+ @include border-radius(4px);
+ @include box-shadow(0 1px 0 lighten($yammer-blue, 20%));
+ @include box-sizing(border-box);
@include invitation-text;
+ border: 1px solid darken($yammer-blue, 20%);
+ float: none;
+ font-size: 0.8em;
height: 80px;
+ padding: 0.6em 0.8em;
+ width: 100%;
+
+ &:focus {
+ outline: 0;
+ }
}
}
@@ -56,7 +56,8 @@ div.new-event-invite {
a.back {
@extend .button;
display: block;
- margin: 20px auto 0;
+ font-size: 1.5em;
+ margin: 10px auto 0;
text-align: center;
width: 100px;
}
@@ -1,8 +1,8 @@
<% if @event.open? %>
<% if user_owner?(@event, current_user) %>
<div class="closing-time">
- <p>Your poll is now live. Kick back and invitees will vote on the best times. No need to wait here though, you will receive notifications via email.</p>
- <p>When you've reached a consensus, choose a winner and notify invitees.</p>
+ <p><%= t 'events_show.poll_live_text_html' %></p>
+ <p>Once you've reached a consensus, choose a winner.</p>
</div>
<% end %>
<% else %>
@@ -1,5 +1,6 @@
<section class="search-box">
<h4><%= t 'multiple_invitations_index.invite_people_to_event' %></h4>
+
<%= semantic_form_for(@invitation, html: { id: 'invitations' }) do |form| %>
<%= form.inputs do %>
@@ -30,20 +31,21 @@
<%= form.action :submit, button_html: { id: "add-invitee" } %>
<div class="invitation-autocomplete-suggestions"></div>
<% end %>
-</section>
-<section class="custom-text" data-toggle="tooltip" title="<%= t 'multiple_invitations_index.invitation_text_tooltip' %>">
- <h4><%= t 'multiple_invitations_index.invitation_text_label' %></h4>
- <div class="invitation-text">
- <%= form.input :invitation_text,
- label: false,
- input_html: {
- disable_with: 'disabled',
- disabled: invitation_text_disabled?(@event, current_user),
- value: last_non_owner_invitation_text(@event)
- }
- %>
- </div>
+ <div class="custom-text user-show-custom-text" data-toggle="tooltip" title="<%= t 'multiple_invitations_index.invitation_text_tooltip' %>">
+ <h4><%= t 'multiple_invitations_index.invitation_text_label' %></h4>
+ <div class="invitation-text">
+ <%= form.input :invitation_text,
+ label: false,
+ input_html: {
+ class: 'show-view-textarea',
+ disable_with: 'disabled',
+ disabled: invitation_text_disabled?(@event, current_user),
+ value: last_non_owner_invitation_text(@event)
+ }
+ %>
+ </div>
+ </div>
<% end %>
</section>
@@ -0,0 +1,25 @@
+<section class="search-box">
+ <h4><%= t 'multiple_invitations_index.invite_people_to_event' %></h4>
+
+ <%= form_tag('', id: 'invitations') do %>
+ <fieldset class="inputs">
+ <ol>
+ <div class="invitee-input">
+ <%= text_field_tag "invitation[invitee_attributes][name_or_email]",
+ nil,
+ 'data-role' => 'invitation_name',
+ placeholder: t('multiple_invitations_index.watermark'),
+ id: 'auto-complete' %>
+ </div>
+ <div class="invitation-autocomplete-suggestions"></div>
+ </ol>
+ </fieldset>
+ <% end %>
+
+ <div class="suggestions custom-text">
+ <h4><%= t 'multiple_invitations_index.invitation_text_label' %></h4>
+ <div class="invitation-text">
+ <textarea id="multiple-invite-text" rows="4" cols="50"> <%= last_non_owner_invitation_text(@event) %> </textarea>
+ </div>
+ </div>
+</section>
@@ -13,34 +13,7 @@
</div>
</div>
- <section class="search-box">
- <h4><%= t 'multiple_invitations_index.invite_people_to_event' %></h4>
-
- <%= form_tag('', id: 'invitations') do %>
- <fieldset class="inputs">
- <ol>
- <div class="invitee-input">
- <%= text_field_tag "invitation[invitee_attributes][name_or_email]",
- nil,
- 'data-role' => 'invitation_name',
- placeholder: t('multiple_invitations_index.watermark'),
- id: 'auto-complete' %>
- </div>
- <div class="invitation-autocomplete-suggestions"></div>
- </ol>
- </fieldset>
- <% end %>
- </section>
-
- <section class="custom-text">
- <div class="suggestions">
- <h4><%= t 'multiple_invitations_index.invitation_text_label' %></h4>
- <div class="invitation-text">
- <%= text_area_tag '', last_non_owner_invitation_text(@event),
- id: 'multiple-invite-text', size: '50x4' %>
- </div>
- </div>
- </section>
+ <%= render 'invitation_box' %>
<%= render 'javascript_templates/yammer_autocomplete_templates' %>
<%= render 'javascript_templates/multiple_invitation_templates' %>
@@ -70,7 +43,9 @@
</li>
</ol>
- <%= link_to 'Back', edit_event_path(@event), class: 'back' %>
+ <%= link_to edit_event_path(@event), class: 'back' do %>
+ &larr; Back
+ <% end %>
</fieldset>
</form>
View
@@ -9,6 +9,8 @@ en:
My Events
default_custom_invitation_text:
I'm organizing %{event_name} on sched.do and I need your input.
+ poll_live_text_html:
+ <strong>Your poll is now live</strong>. You will receive notifications via email when invitees vote.
welcome_index:
tagline:
Make scheduling simple and social
@@ -5,8 +5,8 @@ Feature: User can customize invitation text
Given I am signed in
And I create an event named "Clown party" with a suggestion of "tomorrow"
When I visit the event page for "Clown party"
- Then I should see "Invitation Message"
- And I should see "I'm organizing Clown party on sched.do and I need your input." in the Invitation text field
+ And I fill in "user@example.com" in the invitation field
+ Then I should see "I'm organizing Clown party on sched.do and I need your input." in the Invitation text field
@javascript
Scenario: User invites a user and customizes the invitation text

0 comments on commit eb5c064

Please sign in to comment.