Commit ec303769 authored by Cecilia Vela Gurovic's avatar Cecilia Vela Gurovic Committed by Gerrit Code Review
Browse files

Merge changes Ib060fef5,I7b66ae08,If7e324b1,I6d0945ee

* changes:
  Bug 1838915: Allow externalmedia / iframe sources to use FontAwsome icons if available
  Bug 1838915: Allow social media to use FontAwsome icons if available
  Bug 1838915: Fixing problem with some custom fontawesome placements
  Bug 1838915: Fixing problem with comment ratings and fontawesome 5
parents 0ee345bc 2bb22fa5
......@@ -19,9 +19,20 @@ define('SECTION_PAGE', 'iframesites');
require(dirname(dirname(dirname(__FILE__))) . '/init.php');
require_once('upgrade.php');
define('TITLE', get_string('allowediframesites', 'admin'));
safe_require('blocktype', 'externalvideo');
$iframesources = get_records_menu('iframe_source', '', '', 'name,prefix');
$iframedomains = get_records_menu('iframe_source_icon');
$fa_domains = PluginBlocktypeExternalvideo::get_fa_brand_icons();
$data = array();
foreach ($iframedomains as $name => $domain) {
$data[$name]['name'] = $domain;
$data[$name]['icon'] = favicon_display_url($domain);
$lname = strtolower($name);
if (isset($fa_domains[$lname])) {
$data[$name]['faicon'] = $fa_domains[$lname]['faicon'];
$data[$name]['style'] = $fa_domains[$lname]['style'];
}
}
$newform = pieform(array(
'name' => 'newurl',
......@@ -85,7 +96,7 @@ foreach ($iframesources as $url => $name) {
'id' => $i,
'url' => $url,
'name' => $name,
'icon' => favicon_display_url($iframedomains[$name]),
'icon' => $data[$name],
'editform' => pieform(array(
'name' => 'editurl_' . $i,
'successcallback' => 'editurl_submit',
......
......@@ -122,6 +122,7 @@ $string['star'] = 'Star';
$string['heart'] = 'Heart';
$string['thumbsup'] = 'Thumbs up';
$string['ok'] = 'Tick';
$string['smile'] = 'Smile';
$string['ratingexample'] = 'Generated example';
$string['removerating'] = 'Clear ratings';
$string['ratingoption'] = "Set rating %s out of %s";
......@@ -1123,6 +1123,7 @@ class ArtefactTypeComment extends ArtefactType {
'heart' => get_string('heart', 'artefact.comment'),
'thumbs-up' => get_string('thumbsup', 'artefact.comment'),
'check-circle' => get_string('ok', 'artefact.comment'),
'smile' => get_string('smile', 'artefact.comment'),
),
),
'ratinglength' => array(
......
......@@ -1215,19 +1215,19 @@ class ArtefactTypeSocialprofile extends ArtefactTypeProfileField {
switch ($record->note) {
case 'facebook':
$record->icon = favicon_display_url('facebook.com');
$record->faicon = '<span class="icon icon-brand icon-lg icon-facebook-square" style="color: #4267B2"></span>';
break;
case 'tumblr':
$record->icon = favicon_display_url('tumblr.com');
$record->faicon = '<span class="icon icon-brand icon-lg icon-tumblr-square" style="color: #001935"></span>';
break;
case 'twitter':
$record->icon = favicon_display_url('twitter.com');
$record->faicon = '<span class="icon icon-brand icon-lg icon-twitter" style="color: #00ACED"></span>';
break;
case 'instagram':
$record->icon = favicon_display_url('instagram.com');
$record->faicon = '<span class="icon icon-brand icon-lg icon-instagram" style="background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); background-clip: text; color: transparent; line-height: 1"></span>';
break;
case 'pinterest':
$record->icon = favicon_display_url('www.pinterest.com');
$record->faicon = '<span class="icon icon-brand icon-lg icon-pinterest" style="color: #E80021"></span>';
break;
case 'icq':
$record->icon = favicon_display_url('www.icq.com');
......@@ -1236,11 +1236,10 @@ class ArtefactTypeSocialprofile extends ArtefactTypeProfileField {
$record->icon = favicon_display_url('www.aim.com');
break;
case 'yahoo':
$record->icon = favicon_display_url('messenger.yahoo.com');
$record->faicon = '<span class="icon icon-brand icon-lg icon-yahoo" style="color: #4B06A3"></span>';
break;
case 'skype':
// Since www.skype.com favicon is not working...
$record->icon = favicon_display_url('support.skype.com');
$record->faicon = '<span class="icon icon-brand icon-lg icon-skype" style="color: #3498D8"></span>';
break;
case 'jabber':
// Since www.jabber.org favicon is not working...
......@@ -1248,7 +1247,7 @@ class ArtefactTypeSocialprofile extends ArtefactTypeProfileField {
break;
default:
// We'll fall back to the "no favicon" default icon
$record->icon = favicon_display_url('example.com');
$record->faicon = '<span class="icon icon-lg icon-globe-americas" style="color: #BFBFF2"></span>';
// If they've supplied a URL, use its favicon
if (filter_var($record->title, FILTER_VALIDATE_URL)) {
......
......@@ -364,6 +364,17 @@ class PluginBlocktypeExternalvideo extends MaharaCoreBlocktype {
return false;
}
public static function get_fa_brand_icons() {
return array(
'slideshare' => array('faicon' => 'slideshare', 'style' => 'color: #0077B5'),
'vimeo' => array('faicon' => 'vimeo-square', 'style' => 'color: #1AB7EA'),
'youtube' => array('faicon' => 'youtube', 'style' => 'color: #FF0000'),
'youtube [privacy mode]' => array('faicon' => 'youtube-square', 'style' => 'color: #FF0000'),
'google' => array('faicon' => 'google', 'style' => 'color: #4285f4'),
'googlevideo' => array('faicon' => 'google', 'style' => 'color: #4285f4'),
);
}
/**
* Returns a block of HTML that the external video block can use to show the
* sites for which we will process URLs.
......@@ -372,6 +383,7 @@ class PluginBlocktypeExternalvideo extends MaharaCoreBlocktype {
$source_instances = self::load_media_sources();
$wwwroot = get_config('wwwroot');
$fa_domains = self::get_fa_brand_icons();
$data = array();
foreach ($source_instances as $name => $source) {
$sourcestr = get_string($name, 'blocktype.externalvideo');
......@@ -380,8 +392,12 @@ class PluginBlocktypeExternalvideo extends MaharaCoreBlocktype {
'url' => $source->get_base_url(),
'icon' => $wwwroot . 'blocktype/externalvideo/media_sources/' . $name . '/favicon.png',
);
$lname = strtolower($name);
if (isset($fa_domains[$lname])) {
$data[$sourcestr]['faicon'] = $fa_domains[$lname]['faicon'];
$data[$sourcestr]['style'] = $fa_domains[$lname]['style'];
}
}
ksort($data);
$smarty = smarty_core();
......@@ -398,7 +414,7 @@ class PluginBlocktypeExternalvideo extends MaharaCoreBlocktype {
if (empty($iframedomains)) {
return '';
}
$fa_domains = self::get_fa_brand_icons();
$data = array();
foreach ($iframedomains as $name => $host) {
$data[$name] = array(
......@@ -406,6 +422,11 @@ class PluginBlocktypeExternalvideo extends MaharaCoreBlocktype {
'url' => 'http://' . $host,
'icon' => favicon_display_url($host),
);
$lname = strtolower($name);
if (isset($fa_domains[$lname])) {
$data[$name]['faicon'] = $fa_domains[$lname]['faicon'];
$data[$name]['style'] = $fa_domains[$lname]['style'];
}
}
$smarty = smarty_core();
......@@ -433,6 +454,7 @@ class PluginBlocktypeExternalvideo extends MaharaCoreBlocktype {
}
}
else {
$fa_domains = self::get_fa_brand_icons();
foreach ($service_instances as $name => $service) {
$servicestr = get_string($name, 'blocktype.externalvideo');
$data[$servicestr] = array(
......@@ -440,6 +462,11 @@ class PluginBlocktypeExternalvideo extends MaharaCoreBlocktype {
'url' => $service->get_base_url(),
'icon' => $wwwroot . 'blocktype/externalvideo/embed_services/' . $name . '/favicon.png',
);
$lname = strtolower($name);
if (isset($fa_domains[$lname])) {
$data[$sourcestr]['faicon'] = $fa_domains[$lname]['faicon'];
$data[$sourcestr]['style'] = $fa_domains[$lname]['style'];
}
}
}
......
......@@ -80,13 +80,8 @@
$(this).css('color',settings.coloroff);
if (settings.emptyglyph) {
if ($(this).hasClass(settings.glyph)) {
// need to add the '-o' before the end for thumbs
if (settings.glyph == 'icon-thumbs-up') {
$(this).removeClass(settings.glyph).addClass('icon-thumbs-o-up');
}
else {
$(this).removeClass(settings.glyph).addClass(settings.glyph + '-o');
}
// need to set any font type difference for the 'not selected' ratings
$(this).addClass('icon-regular');
}
}
}
......
......@@ -32,7 +32,9 @@
<span class="star-comment-rating">
{for i $item->ratingdata->min_rating $item->ratingdata->max_rating}
<div class="star-rating star star-rating-applied star-rating-readonly {$star}-rating{if $i <= $item->ratingdata->value}-on{else}-off{/if}"><a {if $colour}style="color: {$colour}"{/if}>&nbsp;</a></div>
<div class="star-rating star-rating-readonly">
<a class="icon icon-{$star} {if $i <= $item->ratingdata->value}icon-solid{else}icon-regular{/if}" {if $colour}style="color: {$colour}"{/if}>&nbsp;</a>
</div>
{/for}
</span>
{/if}
......
......@@ -4,14 +4,20 @@
<div class="card-body flush">
{foreach from=$profiles item=p}
{if $p->link}<a href="{$p->link}" title="{$p->link}" class="btn btn-secondary btn-sm socialbtn">
{if $showicon}<img src="{$p->icon}" alt="{$p->link}" class="valign-top">{/if}
{if $showicon}
{if $p->faicon}
{$p->faicon|safe}
{else}
<img src="{$p->icon}" alt="{$p->link}" class="valign-top">
{/if}
{/if}
{if $showicon && $showtext}&nbsp;{/if}
{if $showtext}{$p->description}{/if}
</a>{/if}
{/foreach}
{if $email}
<a href="mailto:{$email}" title="{$email}" class="btn btn-secondary btn-sm socialbtn">
{if $showicon}<span class="icon icon-envelope" role="presentation" aria-hidden="true"></span>{/if}
{if $showicon}<span class="icon icon-regular icon-envelope" role="presentation" aria-hidden="true"></span>{/if}
{if $showicon && $showtext}&nbsp;{/if}
{if $showtext}{str tag='email'}{/if}
</a>
......
......@@ -21,7 +21,11 @@
{foreach from=$rows item=row}
<tr class="social-info">
<td class="text-center">
{if $row->faicon}
{$row->faicon|safe}
{else}
<img src="{$row->icon}" alt="{$row->description}">
{/if}
</td>
<td>
<span>{$row->description}</span>
......
<ul class="text-inline unstyled">
{foreach from=$data item=item}
<li class="text-inline"><a href="{$item.url}"><img src="{$item.icon}" alt="{$item.name}" title="{$item.name}"></a></li>
<li class="text-inline"><a href="{$item.url}">
{if $item.faicon}
<span class="icon icon-lg icon-{$item.faicon} icon-brand" style="{$item.style}"></span>
{else}
<img src="{$item.icon}" alt="{$item.name}" title="{$item.name}">
{/if}</a></li>
{/foreach}
</ul>
\ No newline at end of file
......@@ -408,18 +408,18 @@
.table thead {
a::after {
font-family: 'FontAwesome';
font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
position: relative;
top: -3px;
margin-left: 3px;
color: $gray-300;
}
.asc > a::after {
content: '\f0dd';
content: fa-content($fa-var-caret-down);
}
.desc > a::after,
.sorted > a::after {
content: '\f0de';
content: fa-content($fa-var-caret-up);
top: 2px;
}
}
......
// /*!
// * Datetimepicker for Bootstrap 3
// * version : 4.17.47
// * https://github.com/Eonasdan/bootstrap-datetimepicker/
// */
// .bootstrap-datetimepicker-widget {
// list-style: none;
// }
// .bootstrap-datetimepicker-widget.dropdown-menu {
// display: block;
// margin: 2px 0;
// padding: 4px;
// width: 19em;
// }
// @include media-breakpoint-up(md) {
// .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
// width: 38em;
// }
// }
// @include media-breakpoint-up(lg) {
// .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
// width: 38em;
// }
// }
// @include media-breakpoint-up(xl) {
// .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
// width: 38em;
// }
// }
// .bootstrap-datetimepicker-widget.dropdown-menu:before,
// .bootstrap-datetimepicker-widget.dropdown-menu:after {
// content: '';
// display: inline-block;
// position: absolute;
// }
// .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
// border-left: 7px solid transparent;
// border-right: 7px solid transparent;
// border-bottom: 7px solid #ccc;
// border-bottom-color: rgba(0, 0, 0, 0.2);
// top: -7px;
// left: 7px;
// }
// .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
// border-left: 6px solid transparent;
// border-right: 6px solid transparent;
// border-bottom: 6px solid white;
// top: -6px;
// left: 8px;
// }
// .bootstrap-datetimepicker-widget.dropdown-menu.top:before {
// border-left: 7px solid transparent;
// border-right: 7px solid transparent;
// border-top: 7px solid #ccc;
// border-top-color: rgba(0, 0, 0, 0.2);
// bottom: -7px;
// left: 6px;
// }
// .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
// border-left: 6px solid transparent;
// border-right: 6px solid transparent;
// border-top: 6px solid white;
// bottom: -6px;
// left: 7px;
// }
// .bootstrap-datetimepicker-widget.dropdown-menu.float-right:before {
// left: auto;
// right: 6px;
// }
// .bootstrap-datetimepicker-widget.dropdown-menu.float-right:after {
// left: auto;
// right: 7px;
// }
// .bootstrap-datetimepicker-widget .list-unstyled {
// margin: 0;
// }
// .bootstrap-datetimepicker-widget a[data-action] {
// padding: 6px 0;
// }
// .bootstrap-datetimepicker-widget a[data-action]:active {
// box-shadow: none;
// }
// .bootstrap-datetimepicker-widget .timepicker-hour,
// .bootstrap-datetimepicker-widget .timepicker-minute,
// .bootstrap-datetimepicker-widget .timepicker-second {
// width: 54px;
// font-weight: bold;
// font-size: 1.2em;
// margin: 0;
// }
// .bootstrap-datetimepicker-widget button[data-action] {
// padding: 6px;
// }
// .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
// position: absolute;
// width: 1px;
// height: 1px;
// margin: -1px;
// padding: 0;
// overflow: hidden;
// clip: rect(0, 0, 0, 0);
// border: 0;
// content: "Increment Hours";
// }
// .bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
// position: absolute;
// width: 1px;
// height: 1px;
// margin: -1px;
// padding: 0;
// overflow: hidden;
// clip: rect(0, 0, 0, 0);
// border: 0;
// content: "Increment Minutes";
// }
// .bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
// position: absolute;
// width: 1px;
// height: 1px;
// margin: -1px;
// padding: 0;
// overflow: hidden;
// clip: rect(0, 0, 0, 0);
// border: 0;
// content: "Decrement Hours";
// }
// .bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
// position: absolute;
// width: 1px;
// height: 1px;
// margin: -1px;
// padding: 0;
// overflow: hidden;
// clip: rect(0, 0, 0, 0);
// border: 0;
// content: "Decrement Minutes";
// }
// .bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
// position: absolute;
// width: 1px;
// height: 1px;
// margin: -1px;
// padding: 0;
// overflow: hidden;
// clip: rect(0, 0, 0, 0);
// border: 0;
// content: "Show Hours";
// }
// .bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
// position: absolute;
// width: 1px;
// height: 1px;
// margin: -1px;
// padding: 0;
// overflow: hidden;
// clip: rect(0, 0, 0, 0);
// border: 0;
// content: "Show Minutes";
// }
// .bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
// position: absolute;
// width: 1px;
// height: 1px;
// margin: -1px;
// padding: 0;
// overflow: hidden;
// clip: rect(0, 0, 0, 0);
// border: 0;
// content: "Toggle AM/PM";
// }
// .bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
// position: absolute;
// width: 1px;
// height: 1px;
// margin: -1px;
// padding: 0;
// overflow: hidden;
// clip: rect(0, 0, 0, 0);
// border: 0;
// content: "Clear the picker";
// }
// .bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
// position: absolute;
// width: 1px;
// height: 1px;
// margin: -1px;
// padding: 0;
// overflow: hidden;
// clip: rect(0, 0, 0, 0);
// border: 0;
// content: "Set the date to today";
// }
// .bootstrap-datetimepicker-widget .picker-switch {
// text-align: center;
// }
// .bootstrap-datetimepicker-widget .picker-switch::after {
// position: absolute;
// width: 1px;
// height: 1px;
// margin: -1px;
// padding: 0;
// overflow: hidden;
// clip: rect(0, 0, 0, 0);
// border: 0;
// content: "Toggle Date and Time Screens";
// }
// .bootstrap-datetimepicker-widget .picker-switch td {
// padding: 0;
// margin: 0;
// height: auto;
// width: auto;
// line-height: inherit;
// }
// .bootstrap-datetimepicker-widget .picker-switch td span {
// line-height: 2.5;
// height: 2.5em;
// width: 100%;
// font-size: 18px;
// }
// .bootstrap-datetimepicker-widget table {
// width: 100%;
// margin: 0;
// }
// .bootstrap-datetimepicker-widget table td,
// .bootstrap-datetimepicker-widget table th {
// text-align: center;
// border-radius: 4px;
// }
// .bootstrap-datetimepicker-widget table th {
// height: 20px;
// line-height: 20px;
// width: 20px;
// }
// .bootstrap-datetimepicker-widget table th.picker-switch {
// width: 145px;
// }
// .bootstrap-datetimepicker-widget table th.disabled,
// .bootstrap-datetimepicker-widget table th.disabled:hover {
// background: none;
// color: #777777;
// cursor: not-allowed;
// }
// .bootstrap-datetimepicker-widget table th.prev::after {
// position: absolute;
// width: 1px;
// height: 1px;
// margin: -1px;
// padding: 0;
// overflow: hidden;
// clip: rect(0, 0, 0, 0);
// border: 0;
// content: "Previous Month";
// }
// .bootstrap-datetimepicker-widget table th.next::after {
// position: absolute;
// width: 1px;
// height: 1px;
// margin: -1px;
// padding: 0;
// overflow: hidden;
// clip: rect(0, 0, 0, 0);
// border: 0;
// content: "Next Month";
// }
// .bootstrap-datetimepicker-widget table thead tr:first-child th {
// cursor: pointer;
// }
// .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
// background: #eeeeee;
// }
// .bootstrap-datetimepicker-widget table td {
// height: 54px;
// line-height: 54px;
// width: 54px;
// }
// .bootstrap-datetimepicker-widget table td.cw {
// font-size: .8em;
// height: 20px;
// line-height: 20px;
// color: #777777;
// }
// .bootstrap-datetimepicker-widget table td.day {
// height: 20px;
// line-height: 20px;
// width: 20px;
// }
// .bootstrap-datetimepicker-widget table td.day:hover,
// .bootstrap-datetimepicker-widget table td.hour:hover,
// .bootstrap-datetimepicker-widget table td.minute:hover,
// .bootstrap-datetimepicker-widget table td.second:hover {
// background: #eeeeee;
// cursor: pointer;
// }
// .bootstrap-datetimepicker-widget table td.old,
// .bootstrap-datetimepicker-widget table td.new {
// color: #777777;
// }
// .bootstrap-datetimepicker-widget table td.today {
// position: relative;
// }
// .bootstrap-datetimepicker-widget table td.today:before {
// content: '';
// display: inline-block;
// border: solid transparent;
// border-width: 0 0 7px 7px;
// border-bottom-color: $theme-primary-color;
// border-top-color: rgba(0, 0, 0, 0.2);
// position: absolute;
// bottom: 4px;
// right: 4px;
// }
// .bootstrap-datetimepicker-widget table td.active,
// .bootstrap-datetimepicker-widget table td.active:hover {
// background-color: $theme-primary-color;
// color: #fff;
// text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
// }
// .bootstrap-datetimepicker-widget table td.active.today:before {
// border-bottom-color: #fff;
// }
// .bootstrap-datetimepicker-widget table td.disabled,
// .bootstrap-datetimepicker-widget table td.disabled:hover {