Skip to content

Commit

Permalink
Migrating to Font-Awesome 5 (oppia#6789)
Browse files Browse the repository at this point in the history
* Initial Upgrade

* Fix build.py for webfont dir

* Second upgrade

* More fa-icons changed

* update app.yaml

* Fix lint

* Fix spaces

* Pre-load fonts

* Handel Cache validation

* Add webfonts

* change pos preload webfonts

* Temp commit for  testing

* Revert temp changse and Add more specific paths

* Revert Changes

* change color

* Changes size of icons

* add comments

* update comments
  • Loading branch information
Nisheal John authored and vojtechjelinek committed Jun 23, 2019
1 parent 624f6d9 commit 022c478
Show file tree
Hide file tree
Showing 22 changed files with 96 additions and 83 deletions.
2 changes: 1 addition & 1 deletion app.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ skip_files:
- third_party/static/angular-scroll-1.0.0
- third_party/static/angular-toastr-1.7.0
- third_party/static/bower-material-0.6.0-rc1
- third_party/static/font-awesome-4.7.0
- third_party/static/fontawesome-free-5.8.1-web
- third_party/static/guppy-b5055b/site
- third_party/static/guppy-b5055b/test
- third_party/static/MathJax-2.7.5/docs
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,21 @@ <h4>
<div class="oppia-footer-social-icons">
<div class="oppia-youtube-follow">
<a href="https://www.youtube.com/channel/UC5c1G7BNDCfv1rczcBp9FPw" target="_blank" rel="noopener">
<i class="oppia-follow-icons fa fa-youtube-play"></i>
<i class="oppia-follow-icons fab fa-youtube"></i>
<span class="oppia-icon-accessibility-label">Youtube</span>
</a>
</div>

<div class="oppia-facebook-follow">
<a href="https://www.facebook.com/oppiaorg" target="_blank" rel="noopener">
<i class="oppia-follow-icons fa fa-facebook"></i>
<i class="oppia-follow-icons fab fa-facebook-f"></i>
<span class="oppia-icon-accessibility-label">Facebook</span>
</a>
</div>

<div class="oppia-twitter-follow">
<a href="https://twitter.com/oppiaorg" target="_blank" rel="noopener">
<i class="oppia-follow-icons fa fa-twitter"></i>
<i class="oppia-follow-icons fab fa-twitter"></i>
<span class="oppia-icon-accessibility-label">Twitter</span>
</a>
</div>
Expand Down Expand Up @@ -65,12 +65,12 @@ <h4>
margin-right: 6px;
padding: 5px 6px;
}
.oppia-footer-social .oppia-facebook-follow i.oppia-follow-icons.fa.fa-facebook {
.oppia-footer-social .oppia-facebook-follow i.oppia-follow-icons.fab.fa-facebook {
bottom: -7px;
position: relative;
right: -5px;
}
.oppia-footer-social .oppia-youtube-follow i.oppia-follow-icons.fa.fa-youtube-play {
.oppia-footer-social .oppia-youtube-follow i.oppia-follow-icons.fab.fa-youtube-play {
font-size: 18px;
left: -0.35px;
position: relative;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<ul class="oppia-sharing-links" layout="<[$ctrl.layoutType]>" layout-align="<[$ctrl.layoutAlignType]>">
<li>
<a title="Facebook" ng-href="https://www.facebook.com/sharer/sharer.php?sdk=joey&u=<[$ctrl.serverName]>/<[$ctrl.activityType]>/<[$ctrl.activityId]>&display=popup&ref=plugin&src=share_button" onclick="return !window.open(this.href, '', 'height=336, width=640')" ng-click="$ctrl.registerShareEvent('facebook')" target="_window">
<i class="oppia-share-icons fa fa-facebook-square"></i>
<i class="oppia-share-icons fab fa-facebook-square"></i>
<span class="oppia-icon-accessibility-label">Facebook</span>
</a>
</li>

<li>
<a title="Twitter" ng-href="https://twitter.com/share?text=<[$ctrl.escapedTwitterText]>&url=<[$ctrl.serverName]>/<[$ctrl.activityType]>/<[$ctrl.activityId]>" onclick="return !window.open(this.href, '', 'height=460, width=640')" ng-click="$ctrl.registerShareEvent('twitter')" target="_window">
<i class="oppia-share-icons fa fa-twitter-square"></i>
<i class="oppia-share-icons fab fa-twitter-square"></i>
<span class="oppia-icon-accessibility-label">Twitter</span>
</a>
</li>
Expand Down Expand Up @@ -67,15 +67,15 @@
padding: 0 5px;
}

i.oppia-share-icons.fa.fa-facebook-square {
i.oppia-share-icons.fab.fa-facebook-square {
color: #3b5998;
}

i.oppia-share-icons.fa.fa-twitter-square {
i.oppia-share-icons.fab.fa-twitter-square {
color: #1da1f2;
}

i.oppia-share-icons.fa.fa-chalkboard-teacher {
i.oppia-share-icons.fab.fa-chalkboard-teacher {
color: #50a15f;
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<span style="<[getCursorStyle()]>" ng-mouseleave="leaveArea()">
<span ng-if="ratingValue || isEditable" ng-repeat="star in stars" class="fa <[star.cssClass]> oppia-rating-star protractor-test-rating-star" ng-click="clickStar(star.value)" ng-mouseenter="enterStar(star.value)">
<span ng-if="ratingValue || isEditable" ng-repeat="star in stars" class="<[star.cssClass]> oppia-rating-star protractor-test-rating-star" ng-click="clickStar(star.value)" ng-mouseenter="enterStar(star.value)">
<span class="oppia-icon-accessibility-label">Rate this <[$index + 1]> stars</span>
</span>
</span>
Original file line number Diff line number Diff line change
Expand Up @@ -41,42 +41,42 @@ describe('Rating display directive', function() {
ctrlScope.ratingValue = 4.2;
outerScope.$digest();
// Note the array here is zero-indexed but ratings are one-indexed.
expect(ctrlScope.stars[0].cssClass).toBe('fa-star');
expect(ctrlScope.stars[1].cssClass).toBe('fa-star');
expect(ctrlScope.stars[2].cssClass).toBe('fa-star');
expect(ctrlScope.stars[3].cssClass).toBe('fa-star');
expect(ctrlScope.stars[4].cssClass).toBe('fa-star-o');
expect(ctrlScope.stars[0].cssClass).toBe('fas fa-star');
expect(ctrlScope.stars[1].cssClass).toBe('fas fa-star');
expect(ctrlScope.stars[2].cssClass).toBe('fas fa-star');
expect(ctrlScope.stars[3].cssClass).toBe('fas fa-star');
expect(ctrlScope.stars[4].cssClass).toBe('far fa-star');

ctrlScope.ratingValue = 1.7;
outerScope.$digest();
expect(ctrlScope.stars[0].cssClass).toBe('fa-star');
expect(ctrlScope.stars[1].cssClass).toBe('fa-star-half-o');
expect(ctrlScope.stars[2].cssClass).toBe('fa-star-o');
expect(ctrlScope.stars[3].cssClass).toBe('fa-star-o');
expect(ctrlScope.stars[4].cssClass).toBe('fa-star-o');
expect(ctrlScope.stars[0].cssClass).toBe('fas fa-star');
expect(ctrlScope.stars[1].cssClass).toBe('far fa-star-half');
expect(ctrlScope.stars[2].cssClass).toBe('far fa-star');
expect(ctrlScope.stars[3].cssClass).toBe('far fa-star');
expect(ctrlScope.stars[4].cssClass).toBe('far fa-star');

ctrlScope.ratingValue = 1.9;
outerScope.$digest();
expect(ctrlScope.stars[0].cssClass).toBe('fa-star');
expect(ctrlScope.stars[1].cssClass).toBe('fa-star');
expect(ctrlScope.stars[2].cssClass).toBe('fa-star-o');
expect(ctrlScope.stars[3].cssClass).toBe('fa-star-o');
expect(ctrlScope.stars[4].cssClass).toBe('fa-star-o');
expect(ctrlScope.stars[0].cssClass).toBe('fas fa-star');
expect(ctrlScope.stars[1].cssClass).toBe('fas fa-star');
expect(ctrlScope.stars[2].cssClass).toBe('far fa-star');
expect(ctrlScope.stars[3].cssClass).toBe('far fa-star');
expect(ctrlScope.stars[4].cssClass).toBe('far fa-star');

ctrlScope.ratingValue = 2.25;
outerScope.$digest();
expect(ctrlScope.stars[0].cssClass).toBe('fa-star');
expect(ctrlScope.stars[1].cssClass).toBe('fa-star');
expect(ctrlScope.stars[2].cssClass).toBe('fa-star-half-o');
expect(ctrlScope.stars[3].cssClass).toBe('fa-star-o');
expect(ctrlScope.stars[4].cssClass).toBe('fa-star-o');
expect(ctrlScope.stars[0].cssClass).toBe('fas fa-star');
expect(ctrlScope.stars[1].cssClass).toBe('fas fa-star');
expect(ctrlScope.stars[2].cssClass).toBe('far fa-star-half');
expect(ctrlScope.stars[3].cssClass).toBe('far fa-star');
expect(ctrlScope.stars[4].cssClass).toBe('far fa-star');

ctrlScope.ratingValue = 4.3;
outerScope.$digest();
expect(ctrlScope.stars[0].cssClass).toBe('fa-star');
expect(ctrlScope.stars[1].cssClass).toBe('fa-star');
expect(ctrlScope.stars[2].cssClass).toBe('fa-star');
expect(ctrlScope.stars[3].cssClass).toBe('fa-star');
expect(ctrlScope.stars[4].cssClass).toBe('fa-star-half-o');
expect(ctrlScope.stars[0].cssClass).toBe('fas fa-star');
expect(ctrlScope.stars[1].cssClass).toBe('fas fa-star');
expect(ctrlScope.stars[2].cssClass).toBe('fas fa-star');
expect(ctrlScope.stars[3].cssClass).toBe('fas fa-star');
expect(ctrlScope.stars[4].cssClass).toBe('far fa-star-half');
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ oppia.directive('ratingDisplay', [
var POSSIBLE_RATINGS = [1, 2, 3, 4, 5];
$scope.stars = POSSIBLE_RATINGS.map(function(starValue) {
return {
cssClass: 'fa-star-o',
cssClass: 'far fa-star',
value: starValue
};
});
Expand All @@ -61,10 +61,10 @@ oppia.directive('ratingDisplay', [
var displayValue = function(ratingValue) {
for (var i = 0; i < $scope.stars.length; i++) {
$scope.stars[i].cssClass = (
ratingValue === undefined ? 'fa-star-o' :
ratingValue < $scope.stars[i].value - 0.75 ? 'fa-star-o' :
ratingValue < $scope.stars[i].value - 0.25 ? 'fa-star-half-o' :
'fa-star');
ratingValue === undefined ? 'far fa-star' :
ratingValue < $scope.stars[i].value - 0.75 ? 'far fa-star' :
ratingValue < $scope.stars[i].value - 0.25 ? 'far fa-star-half' :
'fas fa-star');

if ($scope.status === STATUS_ACTIVE &&
ratingValue >= $scope.stars[i].value) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ <h3 class="activity-title protractor-test-exp-summary-tile-title" ng-style="isPl
<ul ng-if="!isCollectionPreviewTile" layout="row" class="metrics" layout-align="space-between center">
<li>
<span class="protractor-test-exp-summary-tile-rating" ng-class="{'rating-disabled': !getAverageRating()}">
<span class="fa fa-star fa-lg" uib-tooltip="<['I18N_LIBRARY_RATINGS_TOOLTIP' | translate]>" tooltip-placement="top">
<span class="fas fa-star" uib-tooltip="<['I18N_LIBRARY_RATINGS_TOOLTIP' | translate]>" tooltip-placement="top">
<span class="oppia-icon-accessibility-label"><['I18N_LIBRARY_RATINGS_TOOLTIP' | translate]></span>
</span>
<span ng-if="getAverageRating()">
Expand All @@ -54,7 +54,7 @@ <h3 class="activity-title protractor-test-exp-summary-tile-title" ng-style="isPl
</span>
</li>
<li>
<span class="fa fa-eye fa-lg" uib-tooltip="<['I18N_LIBRARY_VIEWS_TOOLTIP' | translate]>" tooltip-placement="top">
<span class="far fa-eye" uib-tooltip="<['I18N_LIBRARY_VIEWS_TOOLTIP' | translate]>" tooltip-placement="top">
<span class="oppia-icon-accessibility-label"><['I18N_LIBRARY_VIEWS_TOOLTIP' | translate]></span>
</span>
<span ng-if="getNumViews()">
Expand Down Expand Up @@ -84,7 +84,7 @@ <h3 class="activity-title protractor-test-exp-summary-tile-title" ng-style="isPl
ng-if="isRefresherExploration"
ng-click="loadParentExploration()">
<span translate="I18N_PLAYER_RETURN_TO_PARENT"></span>
<i class="fa fa-arrow-right"
<i class="fas fa-arrow-right"
style="font-size: 19px; padding-top: 1.5px;">
</i>
</md-button>
8 changes: 4 additions & 4 deletions core/templates/dev/head/css/oppia.css
Original file line number Diff line number Diff line change
Expand Up @@ -2648,7 +2648,7 @@ md-card.preview-conversation-skin-supplemental-card {
padding: 0;
}

.oppia-info-card-content .card-metrics li .fa {
.oppia-info-card-content .card-metrics li .far {
font-size: 24px;
margin-right: 5px;
}
Expand Down Expand Up @@ -3352,8 +3352,8 @@ md-card.preview-conversation-skin-supplemental-card {
position: absolute;
}

.oppia-activity-summary-tile .metrics li .fa,
.oppia-activity-summary-tile-mobile .metrics li .fa {
.oppia-activity-summary-tile .metrics li .fab,
.oppia-activity-summary-tile-mobile .metrics li .fab {
font-size: 1.1em;
margin-right: 2px;
vertical-align: initial;
Expand Down Expand Up @@ -3470,7 +3470,7 @@ md-card.preview-conversation-skin-supplemental-card {
margin-top: 12px;
}

.oppia-activity-summary-tile.small-width .metrics li .fa {
.oppia-activity-summary-tile.small-width .metrics li .far {
margin-bottom: 10px;
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<i class="oppia-learner-dashboard-icon fa fa-clock-o"
<i class="oppia-learner-dashboard-icon far fa-clock"
ng-if="isAddToPlaylistIconShown()"
ng-show="canActivityBeAddedToLearnerPlaylist(getActivityId()) && !isContainerNarrow()"
ng-click="addToLearnerPlaylist(getActivityId(), getActivityType())"
Expand All @@ -13,9 +13,9 @@
<a><['I18N_LIBRARY_ADD_TO_LEARNER_PLAYLIST' | translate]></a>
</li>
</ul>
<i class="fa fa-ellipsis-v dropdown-toggle" uib-dropdown-toggle></i>
<i class="fas fa-ellipsis-v dropdown-toggle" uib-dropdown-toggle></i>
</div>
<i class="oppia-learner-dashboard-icon fa fa-clock-o"
<i class="oppia-learner-dashboard-icon far fa-clock"
ng-if="belongsToLearnerPlaylist()"
ng-click="removeFromLearnerPlaylist(getActivityId(), getActivityTitle(), getActivityType())"
aria-hidden="true"
Expand All @@ -24,13 +24,13 @@
uib-tooltip="<['I18N_LIBRARY_ACTIVITY_IN_LEARNER_PLAYLIST' | translate]>"
tooltip-placement="left">
</i>
<i class="oppia-learner-dashboard-icon fa fa-check-circle-o"
<i class="oppia-learner-dashboard-icon far fa-check-circle"
ng-if="belongsToCompletedActivities()"
aria-hidden="true"
uib-tooltip="<['I18N_LIBRARY_ACTIVITY_COMPLETED_ICON' | translate]>"
tooltip-placement="left">
</i>
<i class="oppia-learner-dashboard-icon fa fa-spinner"
<i class="oppia-learner-dashboard-icon fas fa-spinner"
ng-if="belongsToIncompleteActivities()"
aria-hidden="true"
tooltip-append-to-body="true"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,13 +83,13 @@ <h1 class="stat-value-without-rating" ng-hide="$ctrl.$ctrl.dashboardStats.num_ra
ng-class="{'dashboard-active-view': $ctrl.myExplorationsView === 'card'}"
ng-click="$ctrl.setMyExplorationsView('card')"
aria-label="Card View">
<span class="fa fa-th-large fa-lg"></span>
<span class="fa fa-th-large"></span>
</button>
<button class="list-view-btn"
ng-class="{'dashboard-active-view': $ctrl.myExplorationsView === 'list'}"
ng-click="$ctrl.setMyExplorationsView('list')"
aria-label="List View">
<span class="fa fa-list fa-lg"></span>
<span class="fa fa-list"></span>
</button>
</li>
</ul>
Expand Down Expand Up @@ -241,7 +241,7 @@ <h2 class="activity-title protractor-test-exp-summary-tile-title">
layout-align="space-between center">
<li flex="50">
<span class="protractor-test-exp-summary-tile-rating">
<span class="fa fa-star fa-lg oppia-dashboard-card-statistic-icon"
<span class="fa fa-star oppia-dashboard-card-statistic-icon"
uib-tooltip="<['I18N_LIBRARY_RATINGS_TOOLTIP' | translate]>"
tooltip-placement="top">
</span>
Expand All @@ -252,7 +252,7 @@ <h2 class="activity-title protractor-test-exp-summary-tile-title">
</li>

<li flex="50" class="protractor-test-exploration-feedback-count">
<span class="fa fa-comments fa-lg oppia-dashboard-card-statistic-icon"
<span class="fa fa-comments oppia-dashboard-card-statistic-icon"
uib-tooltip="<['I18N_DASHBOARD_OPEN_FEEDBACK' | translate]>"
tooltip-placement="top">
</span>
Expand All @@ -267,7 +267,7 @@ <h2 class="activity-title protractor-test-exp-summary-tile-title">
</li>

<li flex="50">
<span class="fa fa-eye fa-lg oppia-dashboard-card-statistic-icon"
<span class="fa fa-eye oppia-dashboard-card-statistic-icon"
uib-tooltip="<['I18N_LIBRARY_VIEWS_TOOLTIP' | translate]>"
tooltip-placement="top">
</span>
Expand All @@ -277,7 +277,7 @@ <h2 class="activity-title protractor-test-exp-summary-tile-title">
</li>

<li flex="50">
<span class="fa fa-clock-o fa-lg oppia-dashboard-card-statistic-icon"
<span class="fa fa-clock-o oppia-dashboard-card-statistic-icon"
uib-tooltip="<['I18N_LIBRARY_LAST_UPDATED' | translate]>"
tooltip-placement="top">
</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ <h3 class="modal-title">Sample Playthrough</h3>

<div class="modal-body" style="padding-bottom: 8rem; margin-left:0.5rem; margin-right: 0.5rem;">
<div ng-if="maxHidden != 0" class="row oppia-pt2">
<button type="button" name="button" ng-click="showRemainingActions(playthroughIndex)" class="oppia-issues-btn-arrow" id="arrowDiv" style="display: block;"><i class="fa fa-arrow-up"></i></button>
<button type="button" name="button" ng-click="showRemainingActions(playthroughIndex)" class="oppia-issues-btn-arrow" id="arrowDiv" style="display: block;"><i class="fas fa-arrow-up"></i></button>
</div>
<div class="row oppia-pt2" style="margin-top: 0.5rem;">
<div ng-repeat="displayBlock in reversedDisplayBlocks" style="text-align: left; margin-left: 0.2rem;">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="audio-header" ng-if="isAudioBarAvailable()">
<div ng-if="audioBarIsExpanded" class="audio-controls">
<div style="width: 560px;">
<i class="fa audio-controls-button-icon"
<i class="fas audio-controls-button-icon"
ng-click="onPlayButtonClicked()"
ng-class="{'fa-ellipsis-h': audioLoadingIndicatorIsShown, 'fa-play-circle': !isAudioPlaying(), 'fa-pause-circle': isAudioPlaying(), 'audio-controls-audio-not-available': !isAudioAvailableInCurrentLanguage() || audioIsLoading}"
uib-tooltip="<[!isAudioAvailableInCurrentLanguage() ? ('I18N_PLAYER_AUDIO_NOT_AVAILABLE_IN' | translate:{languageDescription:getCurrentAudioLanguageDescription()}) : '']>"
Expand All @@ -27,9 +27,9 @@
ng-change="onNewLanguageSelected()">
</select>
</div>
<div class="audio-collapse-button audio-toggle-button" ng-if="audioBarIsExpanded" ng-click="collapseAudioBar()"><i class="fa fa-sort-up"></i></div>
<div class="audio-collapse-button audio-toggle-button" ng-if="audioBarIsExpanded" ng-click="collapseAudioBar()"><i class="fas fa-sort-up"></i></div>
</div>
<div class="audio-expand-button audio-toggle-button" ng-if="!audioBarIsExpanded" ng-click="expandAudioBar()"><span class="audio-expand-button-text" translate="I18N_PLAYER_AUDIO_EXPAND_TEXT"></span> <i class="audio-expand-icon fa fa-sort-down"></i></div>
<div class="audio-expand-button audio-toggle-button" ng-if="!audioBarIsExpanded" ng-click="expandAudioBar()"><span class="audio-expand-button-text" translate="I18N_PLAYER_AUDIO_EXPAND_TEXT"></span> <i class="audio-expand-icon fas fa-sort-down"></i></div>
</div>

<style>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<md-button ng-if="interactionId === 'Continue'" ng-click="onSubmit()"
class="oppia-learner-confirm-button protractor-test-continue-button">
<[interactionCustomizationArgs.buttonText.value]>
<i class="fa fa-arrow-right" style="font-size: 19px; padding-top: 1.5px;"></i>
<i class="fas fa-arrow-right" style="font-size: 19px; padding-top: 1.5px;"></i>
</md-button>
<md-button ng-if="shouldGenericSubmitButtonBeShown()"
class="oppia-learner-confirm-button protractor-test-submit-answer-button" ng-click="onSubmit()"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
aria-label="Continue">
<div ng-if="!isLearnAgainButton()">
<span translate="I18N_PLAYER_CONTINUE_BUTTON"></span>
<i class="fa fa-arrow-right"
<i class="fas fa-arrow-right"
style="font-size: 19px; padding-top: 1.5px;">
</i>
</div>
<div ng-if="isLearnAgainButton()">
<span translate="I18N_PLAYER_LEARN_AGAIN_BUTTON"></span>
<i class="fa fa-repeat"
<i class="fas fa-redo"
style="font-size: 19px; padding-top: 1.5px;">
</i>
</div>
Expand Down
Loading

0 comments on commit 022c478

Please sign in to comment.