Skip to content

Upgrade: Font Awesome 4.2.0 - Take #2 #6055

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
talbs merged 1 commit into from
Jan 6, 2015
Merged

Upgrade: Font Awesome 4.2.0 - Take #2 #6055

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions cms/static/js/factories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ define(['jquery.form', 'js/index'], function() {
.find('.label')
.text('Sorry, there was error with your request');
$('#request-coursecreator-submit')
.find('.icon-cog')
.toggleClass('icon-spin');
.find('.fa-cog')
.toggleClass('fa-spin');
};

$('#request-coursecreator').ajaxForm({
Expand Down
4 changes: 2 additions & 2 deletions cms/static/js/spec/views/group_configuration_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ define([
usageUnit: '.group-configuration-usage-unit',
usageUnitAnchor: '.group-configuration-usage-unit a',
usageUnitMessage: '.group-configuration-validation-message',
usageUnitWarningIcon: '.group-configuration-usage-unit i.icon-warning-sign',
usageUnitErrorIcon: '.group-configuration-usage-unit i.icon-exclamation-sign',
usageUnitWarningIcon: '.group-configuration-usage-unit i.fa-warning',
usageUnitErrorIcon: '.group-configuration-usage-unit i.fa-exclamation-circle',
warningMessage: '.group-configuration-validation-text',
warningIcon: '.wrapper-group-configuration-validation > i',
note: '.wrapper-delete-button'
Expand Down
4 changes: 2 additions & 2 deletions cms/static/js/spec/views/pages/container_subviews_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -438,9 +438,9 @@ define(["jquery", "underscore", "underscore.string", "js/common_helpers/ajax_hel

verifyExplicitStaffOnly = function(isStaffOnly) {
if (isStaffOnly) {
expect(containerPage.$('.action-staff-lock i')).toHaveClass('icon-check');
expect(containerPage.$('.action-staff-lock i')).toHaveClass('fa-check-square-o');
} else {
expect(containerPage.$('.action-staff-lock i')).toHaveClass('icon-check-empty');
expect(containerPage.$('.action-staff-lock i')).toHaveClass('fa-square-o');
}
};

Expand Down
6 changes: 3 additions & 3 deletions cms/static/js/spec/views/xblock_validation_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ define(['jquery', 'js/models/xblock_validation', 'js/views/xblock_validation', '
it('has a getIcon method', function() {
var getIcon = view.getIcon.bind(view);

expect(getIcon(model.WARNING)).toBe('icon-warning-sign');
expect(getIcon(model.NOT_CONFIGURED)).toBe('icon-warning-sign');
expect(getIcon(model.ERROR)).toBe('icon-exclamation-sign');
expect(getIcon(model.WARNING)).toBe('fa-warning-sign');
expect(getIcon(model.NOT_CONFIGURED)).toBe('fa-warning-sign');
expect(getIcon(model.ERROR)).toBe('fa-exclamation-circle');
expect(getIcon("unknown")).toBeNull();
});

Expand Down
2 changes: 1 addition & 1 deletion cms/static/js/views/course_rerun.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ define(["domReady", "jquery", "underscore", "js/views/utils/create_course_utils"

// Go into creating re-run state
$('.rerun-course-save').addClass('is-disabled').attr('aria-disabled', true).addClass('is-processing').html(
'<i class="icon icon-refresh icon-spin"></i>' + gettext('Processing Re-run Request')
'<i class="icon fa fa-refresh fa-spin"></i>' + gettext('Processing Re-run Request')

@marcotuts marcotuts Dec 31, 2014

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is "fa" a separate class here or is this a duplication typo? (double-checking.)

edit: I'm seeing 'fa' as a standalone class below. Is this serving the same role as the old 'icon' class?

@downzer0 downzer0 Dec 31, 2014

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@marcotuts fa is the Font Awesome class prefix. In this case, there's a duplicate. Good catch.

@frrrances frrrances Dec 31, 2014

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually it looks like @talbs is leaving the bare "fa" probably so we can target these icons specifically in case we need to...

@talbs talbs Dec 31, 2014

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new syntax requires two classes fa and fa-[icon-name] for the Font Awesome vendor styling to be rendered properly. I'm adding both for vendor support, but I'm leaving a class of icon in as well for our own app/edX-styling that's not font icon library dependent (think about if we switch down the road or something). Hope that clears things up.

@downzer0 downzer0 Jan 2, 2015

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

);
$('.action-cancel').addClass('is-hidden');
};
Expand Down
6 changes: 3 additions & 3 deletions cms/static/js/views/import.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ define(
* @param {boolean} isSpinning Turns cog spin on if true, off otherwise.
*/
var updateCog = function (elem, isSpinning) {
var cogI = elem.find('i.icon-cog');
if (isSpinning) { cogI.addClass("icon-spin");}
else { cogI.removeClass("icon-spin");}
var cogI = elem.find('i.fa-cog');
if (isSpinning) { cogI.addClass("fa-spin");}
else { cogI.removeClass("fa-spin");}
};


Expand Down
4 changes: 2 additions & 2 deletions cms/static/js/views/metadata.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ function(BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog, V
var template = _.template(
'<li class="list-settings-item">' +
'<input type="text" class="input" value="<%= ele %>">' +
'<a href="#" class="remove-action remove-setting" data-index="<%= index %>"><i class="icon-remove-sign"></i><span class="sr">Remove</span></a>' +
'<a href="#" class="remove-action remove-setting" data-index="<%= index %>"><i class="icon fa fa-remove-sign"></i><span class="sr">Remove</span></a>' +
'</li>'
);
list.append($(template({'ele': ele, 'index': index})));
Expand Down Expand Up @@ -453,7 +453,7 @@ function(BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog, V
'<li class="list-settings-item">' +
'<input type="text" class="input input-key" value="<%= key %>">' +
'<input type="text" class="input input-value" value="<%= value %>">' +
'<a href="#" class="remove-action remove-setting" data-value="<%= value %>"><i class="icon-remove-sign"></i><span class="sr">Remove</span></a>' +
'<a href="#" class="remove-action remove-setting" data-value="<%= value %>"><i class="icon fa fa-remove-sign"></i><span class="sr">Remove</span></a>' +
'</li>'
);

Expand Down
6 changes: 3 additions & 3 deletions cms/static/js/views/overview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe

var $section = $('.courseware-section');
var $button = $(this);
var $labelCollapsed = $('<i class="icon-arrow-up"></i> <span class="label">' +
var $labelCollapsed = $('<i class="icon fa fa-arrow-up"></i> <span class="label">' +
gettext('Collapse All Sections') + '</span>');
var $labelExpanded = $('<i class="icon-arrow-down"></i> <span class="label">' +
var $labelExpanded = $('<i class="icon fa fa-arrow-down"></i> <span class="label">' +
gettext('Expand All Sections') + '</span>');

var buttonLabel = $button.hasClass('is-activated') ? $labelCollapsed : $labelExpanded;
Expand Down Expand Up @@ -102,7 +102,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
'<strong>' + gettext("Release date:") + '&nbsp;</strong>' +
gettext("{month}/{day}/{year} at {hour}:{minute} UTC") +
'</span>' +
'<a href="#" class="edit-release-date action" data-date="{month}/{day}/{year}" data-time="{hour}:{minute}" data-locator="{locator}"><i class="icon-time"></i> <span class="sr">' +
'<a href="#" class="edit-release-date action" data-date="{month}/{day}/{year}" data-time="{hour}:{minute}" data-locator="{locator}"><i class="icon fa fa-time"></i> <span class="sr">' +
gettext("Edit section release date") +
'</span></a>',
{year: datetime.getUTCFullYear(), month: pad2(datetime.getUTCMonth() + 1), day: pad2(datetime.getUTCDate()),
Expand Down
2 changes: 1 addition & 1 deletion cms/static/js/views/overview_assignment_grader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ define(["js/views/baseview", "underscore", "gettext", "js/models/assignment_grad
// TODO move to a template file
'<h4 class="status-label"><%= assignmentType %></h4>' +
'<a data-tooltip="Mark/unmark this subsection as graded" class="menu-toggle" href="#">' +
'<% if (!hideSymbol) {%><i class="icon-ok"></i><%};%>' +
'<% if (!hideSymbol) {%><i class="icon fa fa-ok"></i><%};%>' +
'</a>' +
'<ul class="menu">' +
'<% graders.each(function(option) { %>' +
Expand Down
4 changes: 2 additions & 2 deletions cms/static/js/views/pages/container_subviews.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,8 +218,8 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/views/utils/
},

checkStaffLock: function(check) {
this.$('.action-staff-lock i').removeClass('icon-check icon-check-empty');
this.$('.action-staff-lock i').addClass(check ? 'icon-check' : 'icon-check-empty');
this.$('.action-staff-lock i').removeClass('fa-check-square-o fa-square-o');
this.$('.action-staff-lock i').addClass(check ? 'fa-check-square-o' : 'fa-square-o');
}
});

Expand Down
2 changes: 1 addition & 1 deletion cms/static/js/views/settings/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ var DetailsView = ValidatingView.extend({
},

initialize : function() {
this.fileAnchorTemplate = _.template('<a href="<%= fullpath %>"> <i class="icon-file"></i><%= filename %></a>');
this.fileAnchorTemplate = _.template('<a href="<%= fullpath %>"> <i class="icon fa fa-file"></i><%= filename %></a>');
// fill in fields
this.$el.find("#course-organization").val(this.model.get('org'));
this.$el.find("#course-number").val(this.model.get('course_id'));
Expand Down
4 changes: 2 additions & 2 deletions cms/static/js/views/xblock_validation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ define(["jquery", "underscore", "js/views/baseview", "gettext"],
*/
getIcon: function (messageType) {
if (messageType === this.model.ERROR) {
return 'icon-exclamation-sign';
return 'fa-exclamation-circle';
}
else if (messageType === this.model.WARNING || messageType === this.model.NOT_CONFIGURED) {
return 'icon-warning-sign';
return 'fa-warning-sign';
}
return null;
},
Expand Down
2 changes: 1 addition & 1 deletion cms/static/sass/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -697,7 +697,7 @@ body.js {
@extend %cont-text-sr;
}

[class^="icon-"] {
.icon {
@extend %t-action1;
color: $white;
}
Expand Down
2 changes: 1 addition & 1 deletion cms/static/sass/_shame.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
transition-timing-function: ease-in-out;
}

.icon-remove-sign {
.fa-times-circle {
// needed to override general a element transition properties - need to fix.
transition-duration: $tmg-f2;
transition-timing-function: ease-in-out;
Expand Down
6 changes: 3 additions & 3 deletions cms/static/sass/elements/_controls.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@
// ====================
.button {

[class^="icon-"] {
.icon {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
Expand Down Expand Up @@ -281,7 +281,7 @@
background-color: $gray-l1;
}

[class^="icon-"] {
.icon {
font-style: normal;
}
}
Expand Down Expand Up @@ -399,7 +399,7 @@
border-top: 1px solid $blue-l1;
opacity: 0.0;

*[class^="icon-caret"] {
.fa-caret-right {
@extend %t-icon5;
position: absolute;
top: -12px;
Expand Down
2 changes: 1 addition & 1 deletion cms/static/sass/elements/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
padding: ($baseline/2) ($baseline/2);
background: transparent;

[class^="icon-"] {
.icon {
@include transition(top $tmg-f2 ease-in-out $tmg-f2);
@extend %t-action3;
display: inline-block;
Expand Down
4 changes: 4 additions & 0 deletions cms/static/sass/elements/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,6 +382,10 @@ form {
@extend %ui-btn-non-blue;
@extend %t-copy-base;
padding-top: ($baseline/10);

.icon.icon {
vertical-align: baseline;
}
}

.incontext-editor-form {
Expand Down
8 changes: 4 additions & 4 deletions cms/static/sass/elements/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,28 +78,28 @@
@extend %ui-btn-dd-nav-primary;
@include transition(all $tmg-f2 ease-in-out 0s);

.label, .icon-caret-down {
.label, .fa-caret-down {

}

.label {

}

.icon-caret-down {
.fa-caret-down {
opacity: 0.25;
}

&:hover {

.icon-caret-down {
.fa-caret-down {
opacity: 1.0;
}
}

.nav-sub .nav-item {

[class^="icon-"] {
.icon {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
Expand Down
7 changes: 1 addition & 6 deletions cms/static/sass/elements/_icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
// studio - elements - icons & badges
// ====================

.icon {

}

[class^="icon-"] {
font-style: normal;
}

Expand All @@ -32,7 +27,7 @@
padding: ($baseline/4) ($baseline/2) ($baseline/4) ($baseline/2);
text-transform: uppercase;

* [class^="icon-"] {
.icon {
margin-right: ($baseline/5);
}

Expand Down
2 changes: 1 addition & 1 deletion cms/static/sass/elements/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
vertical-align: baseline;
}

[class^="icon-"] {
.icon {
display: inline-block;
vertical-align: baseline;
}
Expand Down
2 changes: 1 addition & 1 deletion cms/static/sass/elements/_navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ nav {

.title {

.label, .icon-caret-down {
.label, .fa-caret-down {
display: inline-block;
vertical-align: middle;
}
Expand Down
5 changes: 2 additions & 3 deletions cms/static/sass/elements/_sock.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
padding: ($baseline/2) $baseline;
color: $gray;

[class^="icon-"] {
.icon {
@extend %t-icon6;
@include margin-right($baseline/4);
}
Expand Down Expand Up @@ -95,11 +95,10 @@
@extend %t-action4;
display: block;

[class^="icon-"] {
.icon {
@extend %t-icon4;
vertical-align: middle;
@include margin-right($baseline/4);

}

&:hover, &:active {
Expand Down
8 changes: 4 additions & 4 deletions cms/static/sass/elements/_system-feedback.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -656,7 +656,7 @@
@extend %cont-text-sr;
}

[class^="icon"] {
.icon {
@extend %t-icon6;
color: $white;
width: auto;
Expand Down Expand Up @@ -763,7 +763,7 @@
padding: ($baseline/2) ($baseline*0.75);
color: $white;

[class^="icon-"] {
.icon {
font-style: normal;
}

Expand All @@ -785,7 +785,7 @@
&.has-warnings {
border-bottom: 3px solid $orange;

.icon-warning-sign {
.fa-warning {
margin-right: ($baseline/2);
color: $orange;
}
Expand All @@ -794,7 +794,7 @@
&.has-errors {
border-bottom: 3px solid $red-l2;

.icon-exclamation-sign {
.fa-exclamation-circle {
margin-right: ($baseline/2);
color: $red-l2;
}
Expand Down
Loading