popup on calendar2 edit event footer buttons use new styleguide

fixes CNVS-4617

test steps:
- go to calendar2
- click on an existing event
- ensure the footer buttons appear correct for both tabs
- click on an empty space on the calendar
- ensure the footer buttons appear correct for both tabs
- go to calendar (1)
- click on an empty space on the calendar
- ensure the footer buttons appear correct for both tabs

Change-Id: Ifed5f81b5b4b9a11faeccd1c5bdd7c8a26016b56
Reviewed-on: https://gerrit.instructure.com/18631
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Ryan Florence <ryanf@instructure.com>
QA-Review: Cam Theriault <cam@instructure.com>
This commit is contained in:
Eric Berry 2013-03-14 13:32:06 -06:00 committed by Eric Berry
parent d7c68b6c15
commit 1f78b006a9
9 changed files with 393 additions and 332 deletions

View File

@ -1,225 +0,0 @@
@import environment
#main
background-color: transparent
border: none
#content
padding-right: 0
#calendar-app
position: relative
#calendar-header
position: absolute
right: 0
top: 0
width: 55%
&.with-scheduler
width: 58%
#change-calendar-version
float: right
.calendar
.fc-content
background-color: white
.fc-view-month .fc-widget-header
color: #627382
font-size: 14px
background-color: #f6f7f9
line-height: 35px
.fc-widget-header, .fc-widget-content
border-color: #dadada
.fc-header
h2
font-size: 18px
padding: 0 16px
.fc-other-month
color: #b4b3b3
background-color: #f8f9f9
.fc-state-highlight
background-color: #ecf3f6
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3)
.fc-event-inner
border-color: inherit
width: auto
padding-left: 3px
.fc-event-time
font-weight: bold
.fc-agenda
.fc-agenda-slots .fc-agenda-axis
border-top-color: transparent //get rid of the grey boders on the row <th> in the agenda view
.fc-widget-header
background-color: #f6f7f9
.scheduler-reserved
font-weight: bold
.scheduler-full
background-color: #EEE !important
.agenda-col-wrapper
overflow: hidden
display: inline-block
color: #617582
font-size: 9px
font-weight: bold
padding: 10px 0
text-transform: uppercase
text-align: left
.day-num
font-size: 24px
float: left
padding-right: 5px
line-height: 23px
text-shadow: -1px -1px 1px white
.day-name
float: left
line-height: 13px
.month-name
line-height: 10px
float: left
color: #9da5ab
.fc-event.assignment, .fc-event.assignment_override
.fc-event-inner div
display: inline
background-color: white
.counter-badge
+border-radius(8px)
background-color: #3cb5fb
color: white
text-shadow: 1px 0px 1px rgba(0,0,0,0.3)
box-shadow: inset 1px 0px 1px rgba(0,0,0,0.3)
padding: 1px 6px
#refresh_calendar_link
+hide_text
width: 20px
height: 20px
float: right
background-image: url('/images/ajax-loader-black-on-white-static.gif')
background-position: 50% 50%
margin-left: 10px
&.loading
background-image: url('/images/ajax-loader-black-on-white.gif')
.event-details
h3
margin-bottom: 0
&.carat-bottom .ui-menu-carat span
border-color: white transparent
position: absolute
z-index: 1000
border: 1px solid #b0afaf
box-shadow: 2px 2px 10px rgba(0,0,0, 0.6)
background-color: white
min-width: 250px
max-width: 500px
ul
+reset-list
th
font-weight: bold
padding-bottom: 3px
padding-right: 8px
td,th
vertical-align: top
.delete_event_link
float: right !important
.event-details-timestring
margin: 5px 0 10px
color: #666
font-size: 14px
.event-details-links
a
padding-right: 6px
line-height: 12px
border-right: 1px solid #333
a:last-child
border-right: none
.event-details-header,
.event-details-content,
.event-details-footer
+clearfix
padding: 10px 20px
border-bottom: 1px solid #eee
word-wrap: normal
max-height: 225px
&:last-child
border-bottom: none
.event-details-header
max-width: 460px
overflow: auto
.event-details-content table
th[scope=row]
width: 55px
.event-details-actual-context
font-size: 0.8em
font-style: italic
color: #666
.event-detail-overflow
min-height: 30px
max-height: 160px
max-width: 395px
margin-bottom: 6px
overflow: auto
.x-close-link
padding-right: 5px
opacity: .5
#attendees li
+name_bubbles
/*replicate button styles to work for fullcalendar */
.calendar .fc-button
+user-select(none)
padding: $buttonPadding
//these are just ui-state-default colors
font-size: 12px
border: 1px solid $borderColorDefault
color: $fcDefault
font-weight: normal
@include background-image(linear-gradient(white, #ffffff 25%, #e6e6e6))
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75)
border-bottom-color: #bbb
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
& ~ .fc-button
border-left: 0
margin-left: 0
&.fc-state-hover
+vertical-gradient(white, #dfdfdf)
&.fc-state-down
+vertical-gradient(#a8a8a8, #c6c6c6)
&.fc-state-disabled
opacity: 0.7 // purposely not handling ie8 because having transparency makes it look weird
.fc-button-content
color: $textColor
text-shadow: #fff 0 1px 1px
&.fc-corner-left
+border-left-radius(4px)
&.fc-corner-right
+border-right-radius(4px)
#edit_appt_calendar_event_form
p
margin-bottom: .5em
textarea
width: 500px
height: 100px
.max-participants
width: 40px
.whats-new
float: right
margin-right: 10px

View File

@ -0,0 +1,288 @@
@import "environment";
#main {
background-color: transparent;
border: none;
}
#content {
padding-right: 0;
}
#calendar-app {
position: relative;
}
#calendar-header {
position: absolute;
right: 0;
top: 0;
width: 55%;
&.with-scheduler {
width: 58%;
}
}
#change-calendar-version {
float: right;
}
.calendar {
.fc-content {
background-color: white;
}
.fc-view-month .fc-widget-header {
color: #627382;
font-size: 14px;
background-color: #f6f7f9;
line-height: 35px;
}
.fc-widget-header, .fc-widget-content {
border-color: #dadada;
}
.fc-header {
h2 {
font-size: 18px;
padding: 0 16px;
}
}
.fc-other-month {
color: #b4b3b3;
background-color: #f8f9f9;
}
.fc-state-highlight {
background-color: #ecf3f6;
box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3);
}
.fc-event-inner {
border-color: inherit;
width: auto;
padding-left: 3px;
}
.fc-event-time {
font-weight: bold;
}
.fc-agenda {
.fc-agenda-slots .fc-agenda-axis {
border-top-color: transparent;
}
.fc-widget-header {
background-color: #f6f7f9;
}
.scheduler-reserved {
font-weight: bold;
}
.scheduler-full {
background-color: #eeeeee !important;
}
}
.agenda-col-wrapper {
overflow: hidden;
display: inline-block;
color: #617582;
font-size: 9px;
font-weight: bold;
padding: 10px 0;
text-transform: uppercase;
text-align: left;
.day-num {
font-size: 24px;
float: left;
padding-right: 5px;
line-height: 23px;
text-shadow: -1px -1px 1px white;
}
.day-name {
float: left;
line-height: 13px;
}
.month-name {
line-height: 10px;
float: left;
color: #9da5ab;
}
}
}
.fc-event.assignment, .fc-event.assignment_override {
.fc-event-inner div {
display: inline;
}
background-color: white;
}
.counter-badge {
@include border-radius(8px);
background-color: #3cb5fb;
color: white;
text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.3);
padding: 1px 6px;
}
#refresh_calendar_link {
@include hide_text;
width: 20px;
height: 20px;
float: right;
background-image: url("/images/ajax-loader-black-on-white-static.gif");
background-position: 50% 50%;
margin-left: 10px;
&.loading {
background-image: url("/images/ajax-loader-black-on-white.gif");
}
}
.event-details {
h3 {
margin-bottom: 0;
}
&.carat-bottom .ui-menu-carat span {
border-color: white transparent;
}
position: absolute;
z-index: 1000;
border: 1px solid #b0afaf;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
background-color: white;
min-width: 250px;
max-width: 500px;
ul {
@include reset-list;
}
th {
font-weight: bold;
padding-bottom: 3px;
padding-right: 8px;
}
td,th {
vertical-align: top;
}
.delete_event_link {
float: right !important;
}
}
.event-details-timestring {
margin: 5px 0 10px;
color: #666666;
font-size: 14px;
}
.event-details-links {
a {
padding-right: 6px;
line-height: 28px;
border-right: 1px solid #333333;
}
a:last-child {
border-right: none;
}
}
.event-details-header,
.event-details-content,
.event-details-footer {
@include clearfix;
padding: 10px;
border-bottom: 1px solid #eeeeee;
word-wrap: normal;
max-height: 225px;
&:last-child {
border-bottom: none;
}
}
.event-details-header {
max-width: 460px;
overflow: auto;
}
.event-details-content table {
th[scope=row] {
width: 55px;
}
}
.event-details-actual-context {
font-size: 0.8em;
font-style: italic;
color: #666666;
}
.event-detail-overflow {
min-height: 30px;
max-height: 160px;
max-width: 395px;
margin-bottom: 6px;
overflow: auto;
}
.x-close-link {
padding-right: 5px;
opacity: 0.5;
}
#attendees li {
@include name_bubbles;
}
/*replicate button styles to work for fullcalendar */
.calendar .fc-button {
@include user-select(none);
padding: $buttonPadding;
//these are just ui-state-default colors
font-size: 12px;
border: 1px solid $borderColorDefault;
color: $fcDefault;
font-weight: normal;
@include background-image(linear-gradient(white, white 25%, #e6e6e6));
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
border-bottom-color: #bbbbbb;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
& ~ .fc-button {
border-left: 0;
margin-left: 0;
}
&.fc-state-hover {
@include vertical-gradient(white, #dfdfdf);
}
&.fc-state-down {
@include vertical-gradient(#a8a8a8, #c6c6c6);
}
&.fc-state-disabled {
opacity: 0.7;
}
.fc-button-content {
color: $textColor;
text-shadow: white 0 1px 1px;
}
&.fc-corner-left {
@include border-left-radius(4px);
}
&.fc-corner-right {
@include border-right-radius(4px);
}
}
#edit_appt_calendar_event_form {
p {
margin-bottom: 0.5em;
}
textarea {
width: 500px;
height: 100px;
}
.max-participants {
width: 40px;
}
}
.whats-new {
float: right;
margin-right: 10px;
}
.event_button {
margin-left: 3px;
}

View File

@ -1,4 +1,11 @@
.align-right {
// You should no longer use .align-right and instead use .text-right
// because Bootstrap 2.3 includes these styles by default
.align-right, .text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}

View File

@ -24,7 +24,7 @@
<%= render :partial => 'calendars/mini_calendar', :locals => {:current => current, :first_day => first_day } %>
<hr />
<div style="text-align: right; font-size: 0.8em;">
<div class="text-right" style="font-size: 0.8em;">
<%= t :calendars_count, { :one => "1 calendar, %{open_count} open", :other => "%{count} calendars, %{open_count} open" },
:count => @contexts.length, :open_count => '<span class="calendars_open_count"></span>'.html_safe %>
</div>
@ -59,7 +59,7 @@
<%= render :partial => 'event', :collection => @undated_events %>
</div>
</div>
<div style="text-align: right; font-size: 0.8em;">
<div class="text-right" style="font-size: 0.8em;">
<a href="#" class="add_event_link add-small"><%= t 'links.add_event', "Add Event" %></a>
</div>
</div>
@ -95,7 +95,7 @@
<table class="calendar_month">
<tr>
<td colspan="7" class="month_title">
<div style="position: relative; text-align: center;">
<div class="text-right" style="position: relative;">
<span style="display: none;" class="month_number"><%= @current.month %></span>
<a href="#" class="prev_month_link no-hover"><%= image_tag "arrow_left.png", :alt => t('alts.previous', "Previous") %></a>
<span id="month_and_year">
@ -191,10 +191,8 @@
</select>
</td>
</tr><tr>
<td></td>
<td><a href="#" class="more_options_link"><%= t 'links.more_options', "more options" %></a></td>
</tr><tr>
<td colspan="2">
<td colspan="2" class="text-right">
<a href="#" class="btn btn-secondary more_options_link"><%= t 'links.more_options', "More Options" %></a>
<button type="submit" class="btn btn-primary"><%= t '#buttons.submit', "Submit" %></button>
</td>
</tr>
@ -224,10 +222,8 @@
<td class="assignment_group_select">
</td>
</tr><tr>
<td></td>
<td><a href="#" class="more_options_link"><%= t 'links.more_options', "more options" %></a></td>
</tr><tr>
<td colspan="2">
<td colspan="2" class="text-right">
<a href="#" class="btn btn-secondary more_options_link"><%= t 'links.more_options', "More Options" %></a>
<button type="submit" class="btn btn-primary"><%= t '#buttons.submit', "Submit" %></button>
</td>
</tr>

View File

@ -1,4 +1,5 @@
<form action='#' id='edit_assignment_form' style='padding: 5px; width: 400px'>
<div class="event-details-content">
<table class="formtable" style="width: 100%;">
<tr>
<td>{{#t "title"}}Title:{{/t}}</td>
@ -30,14 +31,10 @@
</select>
</td>
</tr>
<tr>
<td></td>
<td><a href="#" class="more_options_link">{{#t "links.more_options"}}more options{{/t}}</a></td>
</tr>
<tr>
<td colspan="2" style="text-align: right">
<button type="submit" class="btn">{{#t "#buttons.submit"}}Submit{{/t}}</button>
</td>
</tr>
</table>
</div>
<div class="popover-links-holder event-details-footer">
<button type="submit" class="event_button btn btn-primary pull-right">{{#t "#buttons.submit"}}Submit{{/t}}</button>
<a href="#" class="event_button btn btn-secondary pull-right more_options_link">{{#t "links.more_options"}}More Options{{/t}}</a>
</div>
</form>

View File

@ -1,4 +1,5 @@
<form action='#' id='edit_calendar_event_form' style='padding: 5px; width: 400px'>
<div class="event-details-content">
<table class="formtable" style="width: 100%;">
<tr>
<td style="vertical-align: top;">{{#t "title"}}Title:{{/t}}</td>
@ -34,13 +35,11 @@
{{/each}}
</select>
</td>
</tr><tr>
<td></td>
<td><a href="#" class="more_options_link">{{#t "links.more_options"}}more options{{/t}}</a></td>
</tr><tr>
<td colspan="2" class="button-container" style="text-align: right">
<button type="submit" class="btn">{{#t "#buttons.submit"}}Submit{{/t}}</button>
</td>
</tr>
</table>
</div>
<div class="popover-links-holder event-details-footer">
<button type="submit" class="event_button btn btn-primary pull-right">{{#t "#buttons.submit"}}Submit{{/t}}</button>
<a href="#" class="event_button btn btn-secondary pull-right more_options_link">{{#t "links.more_options"}}More Options{{/t}}</a>
</div>
</form>

View File

@ -74,8 +74,11 @@
{{/if}}
</div>
<div class="popover-links-holder event-details-footer">
{{#if can_edit }}
<a href="#" class="event_button edit_event_link btn btn-primary btn-small pull-right">{{#t "links.edit"}}Edit{{/t}}</a>
{{/if}}
{{#if can_delete }}
<a href="#" class="btn button-secondary delete_event_link">{{#t "links.delete"}}Delete{{/t}}</a>
<a href="#" class="event_button btn button-secondary btn-small delete_event_link pull-right">{{#t "links.delete"}}Delete{{/t}}</a>
{{/if}}
<div class="event-details-links">
{{#if can_reserve }}
@ -84,9 +87,6 @@
{{#if can_unreserve }}
<a href="#" class="unreserve_event_link">{{#t "links.unreserve"}}Un-reserve{{/t}}</a>
{{/if}}
{{#if can_edit }}
<a href="#" class="edit_event_link">{{#t "links.edit"}}Edit{{/t}}</a>
{{/if}}
{{#if reservations }}
<a href="#" class="message_students">
{{#t "message_students"}}Message students{{/t}}

View File

@ -48,6 +48,7 @@ describe "calendar2" do
def create_calendar_event(event_title, should_add_date = false)
middle_number = find_middle_day.find_element(:css, '.fc-day-number').text
find_middle_day.click
edit_event_dialog = f('#edit_event_tabs')
edit_event_dialog.should be_displayed
edit_event_form = edit_event_dialog.find_element(:id, 'edit_calendar_event_form')
@ -173,13 +174,11 @@ describe "calendar2" do
def create_middle_day_event(name = 'new event')
get "/calendar2"
find_middle_day.click
create_calendar_event(name)
end
def create_middle_day_assignment(name = 'new assignment')
get "/calendar2"
find_middle_day.click
create_assignment_event(name)
end
@ -246,7 +245,7 @@ describe "calendar2" do
wait_for_ajaximations
driver.execute_script("$('.delete_event_link').hover().click()")
wait_for_ajaximations
driver.execute_script("$('.ui-dialog .btn-primary').hover().click()")
driver.execute_script("$('.ui-dialog:visible .btn-primary').hover().click()")
wait_for_ajaximations
fj('.fc-event:visible').should be_nil
# make sure it was actually deleted and not just removed from the interface
@ -260,7 +259,7 @@ describe "calendar2" do
fj('.fc-event').click
driver.execute_script("$('.delete_event_link').hover().click()")
wait_for_ajaximations
driver.execute_script("$('.ui-dialog .btn-primary').hover().click()")
driver.execute_script("$('.ui-dialog:visible .btn-primary').hover().click()")
wait_for_ajaximations
fj('.fc-event').should be_nil
# make sure it was actually deleted and not just removed from the interface