Skip to content

Commit

Permalink
Upgrade: Adopt changes for coloring the activity icons when modifying…
Browse files Browse the repository at this point in the history
… the activity purpose.
  • Loading branch information
abias committed Jul 13, 2024
1 parent 7ec17a7 commit 3c7a883
Show file tree
Hide file tree
Showing 9 changed files with 464 additions and 26 deletions.
1 change: 1 addition & 0 deletions CHANGES.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ Changes

### Unreleased

* 2024-07-12 - Upgrade: Adopt changes for coloring the activity icons when modifying the activity purpose.
* 2024-07-12 - Upgrade: Adopt new activity purpose "Interactive content" when coloring activity icons, resolves #611.
* 2024-07-07 - Upgrade: Adopt changes for coloring the activity icons, moving from background-colors to CSS filters, resolves #631.
* 2024-07-04 - Upgrade: Fix Behat tests which broke due to the introduction of section pages in Moodle core.
Expand Down
26 changes: 26 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,32 @@ With this setting, you can control whether the course image is visible inside th

With this setting, you can control whether the course completion progress is visible inside the course overview block or not.

#### Tab "Blocks"

##### Timeline block

###### Tint timeline activity icons

With this setting, you can tint the activity icons in the timeline block based on the activity purposes. By default, Moodle core displays them just as black icons.

##### Upcoming events block

###### Tint upcoming events activity icons

With this setting, you can tint the activity icons in the upcoming events block based on the activity purposes. By default, Moodle core displays them just as black icons.

##### Recently accessed items block

###### Tint recently accessed items activity icons

With this setting, you can tint the activity icons in the recently accessed items block based on the activity purposes. By default, Moodle core displays them just as black icons.

##### Activities block

###### Tint activities activity icons

With this setting, you can tint the activity icons in the activities block based on the activity purposes. By default, Moodle core displays them just as black icons.

#### Tab "Course"

##### Course Header
Expand Down
23 changes: 23 additions & 0 deletions lang/en/theme_boost_union.php
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,29 @@
$string['courseoverviewshowprogresssetting'] = 'Show course completion progress';
$string['courseoverviewshowprogresssetting_desc'] = 'With this setting, you can control whether the course completion progress is visible inside the course overview block or not.';

// Settings: Blocks tab.
// The string for this tab is the same as on the 'Feel' page.
// ... Section: Timeline block.
$string['timelineheading'] = 'Timeline block';
// Setting: Tint activity icons in the timeline block.
$string['timelinetintenabled'] = 'Tint timeline activity icons';
$string['timelinetintenabled_desc'] = 'With this setting, you can tint the activity icons in the timeline block based on the activity purposes. By default, Moodle core displays them just as black icons.';
// ... Section: Upcoming events block.
$string['upcomingeventsheading'] = 'Upcoming events block';
// Setting: Tint activity icons in the upcoming events block.
$string['upcomingeventstintenabled'] = 'Tint upcoming events activity icons';
$string['upcomingeventstintenabled_desc'] = 'With this setting, you can tint the activity icons in the upcoming events block based on the activity purposes. By default, Moodle core displays them just as black icons.';
// ... Section: Recently accessed items block.
$string['recentlyaccesseditemsheading'] = 'Recently accessed items block';
// Setting: Tint activity icons in the recently accessed items block.
$string['recentlyaccesseditemstintenabled'] = 'Tint recently accessed items activity icons';
$string['recentlyaccesseditemstintenabled_desc'] = 'With this setting, you can tint the activity icons in the recently accessed items block based on the activity purposes. By default, Moodle core displays them just as black icons.';
// ... Section: Activities block.
$string['activitiesheading'] = 'Activities block';
// Setting: Tint activity icons in the activities block.
$string['activitiestintenabled'] = 'Tint activities activity icons';
$string['activitiestintenabled_desc'] = 'With this setting, you can tint the activity icons in the activities block based on the activity purposes. By default, Moodle core displays them just as black icons.';

// Settings: Course tab.
$string['coursetab'] = 'Course';
// ... Section: Course header.
Expand Down
65 changes: 48 additions & 17 deletions locallib.php
Original file line number Diff line number Diff line change
Expand Up @@ -1376,37 +1376,68 @@ function theme_boost_union_get_scss_for_activity_icon_purpose($theme) {
foreach ($installedactivities as $modname => $modinfo) {
// Get default purpose of activity module.
$defaultpurpose = plugin_supports('mod', $modname, FEATURE_MOD_PURPOSE, MOD_PURPOSE_OTHER);

// If the plugin does not have any default purpose.
if (!$defaultpurpose) {
// Fallback to "other" purpose.
$defaultpurpose = MOD_PURPOSE_OTHER;
}

// Compose selectors for blocks.
$blocksscss = [];
// If the admin wanted us to tint the timeline block as well.
if (get_config('theme_boost_union', 'timelinetintenabled') == THEME_BOOST_UNION_SETTING_SELECT_YES) {
$blocksscss[] = '.block_timeline .theme-boost-union-mod_'.$modname.'.activityiconcontainer img';
}
// If the admin wanted us to tint the upcoming events block as well.
if (get_config('theme_boost_union', 'upcomingeventstintenabled') == THEME_BOOST_UNION_SETTING_SELECT_YES) {
$blocksscss[] = '.block_calendar_upcoming .theme-boost-union-mod_'.$modname.'.activityiconcontainer img';
}
// If the admin wanted us to tint the recently accessed items block as well.
if (get_config('theme_boost_union', 'recentlyaccesseditemstintenabled') == THEME_BOOST_UNION_SETTING_SELECT_YES) {
$blocksscss[] = '.block_recentlyaccesseditems .theme-boost-union-'.$modname.'.activityiconcontainer img';
}
// If the admin wanted us to tint the activities block as well.
if (get_config('theme_boost_union', 'activitiestintenabled') == THEME_BOOST_UNION_SETTING_SELECT_YES) {
$blocksscss[] = '.block_activity_modules .content .icon[title="'.$modinfo.'"]';
}
$blocksscss = implode(', ', $blocksscss);

// If the activity purpose setting is set and differs from the activity's default purpose.
$activitypurpose = get_config('theme_boost_union', 'activitypurpose'.$modname);
if ($activitypurpose && $activitypurpose != $defaultpurpose) {
// Add CSS to modify the activity purpose color in the activity chooser and the activity icon.
$scss .= '.activity.modtype_'.$modname.' .activityiconcontainer.courseicon,';
$scss .= '.modchoosercontainer .modicon_'.$modname.'.activityiconcontainer,';
$scss .= '#page-header .modicon_'.$modname.'.activityiconcontainer,';
$scss .= '.block_recentlyaccesseditems .theme-boost-union-'.$modname.'.activityiconcontainer,';
$scss .= '.block_timeline .theme-boost-union-mod_'.$modname.'.activityiconcontainer {';
// If the purpose is now different than 'other', change the background color to the new color.
$scss .= '.activity.modtype_'.$modname.' .activityiconcontainer.courseicon img,';
$scss .= '.modchoosercontainer .modicon_'.$modname.'.activityiconcontainer img,';
$scss .= '#page-header .modicon_'.$modname.'.activityiconcontainer img';
// Add CSS for the configured blocks.
if (strlen($blocksscss) > 0) {
$scss .= ', '.$blocksscss;
}
$scss .= ' {';
// If the purpose is now different than 'other', change the filter to the new color.
if ($activitypurpose != MOD_PURPOSE_OTHER) {
$scss .= 'background-color: var(--activity' . $activitypurpose . ') !important;';
$scss .= 'filter: var(--activity' . $activitypurpose . ') !important;';

// Otherwise, the background color is set to light grey (as there is no '--activityother' variable).
// Otherwise, the filter is removed (as there is no '--activityother' variable).
} else {
$scss .= 'background-color: $light !important;';
}
// If the default purpose originally was 'other' and now is overridden, make the icon white.
if ($defaultpurpose == MOD_PURPOSE_OTHER) {
$scss .= '.activityicon, .icon { filter: brightness(0) invert(1); }';
}
// If the default purpose was not 'other' and now it is, make the icon black.
if ($activitypurpose == MOD_PURPOSE_OTHER) {
$scss .= '.activityicon, .icon { filter: none; }';
$scss .= 'filter: none !important;';
}
$scss .= '}';

// Otherwise, if the purpose is unchanged.
} else {
// Add CSS for the configured blocks.
if (strlen($blocksscss) > 0) {
$scss .= $blocksscss.'{ ';

// If the purpose is now different than 'other', set the filter to tint the icon.
if ($activitypurpose != MOD_PURPOSE_OTHER) {
$scss .= 'filter: var(--activity' . $defaultpurpose . ') !important;';
}

$scss .= '}';
}
}
}
return $scss;
Expand Down
64 changes: 64 additions & 0 deletions settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -851,6 +851,70 @@
$page->add($tab);


// Create Blocks tab.
$tab = new admin_settingpage('theme_boost_union_look_blocks',
get_string('blockstab', 'theme_boost_union', null, true));

// Create Timeline block heading.
$name = 'theme_boost_union/timelineheading';
$title = get_string('timelineheading', 'theme_boost_union', null, true);
$setting = new admin_setting_heading($name, $title, null);
$tab->add($setting);

// Setting: Tint activity icons in the timeline block.
$name = 'theme_boost_union/timelinetintenabled';
$title = get_string('timelinetintenabled', 'theme_boost_union', null, true);
$description = get_string('timelinetintenabled_desc', 'theme_boost_union', null, true);
$setting = new admin_setting_configselect($name, $title, $description, THEME_BOOST_UNION_SETTING_SELECT_NO, $yesnooption);
$setting->set_updatedcallback('theme_reset_all_caches');
$tab->add($setting);

// Create Upcoming events block heading.
$name = 'theme_boost_union/upcomingeventsheading';
$title = get_string('upcomingeventsheading', 'theme_boost_union', null, true);
$setting = new admin_setting_heading($name, $title, null);
$tab->add($setting);

// Setting: Tint activity icons in the upcoming events block.
$name = 'theme_boost_union/upcomingeventstintenabled';
$title = get_string('upcomingeventstintenabled', 'theme_boost_union', null, true);
$description = get_string('upcomingeventstintenabled_desc', 'theme_boost_union', null, true);
$setting = new admin_setting_configselect($name, $title, $description, THEME_BOOST_UNION_SETTING_SELECT_NO, $yesnooption);
$setting->set_updatedcallback('theme_reset_all_caches');
$tab->add($setting);

// Create Recently accessed items block heading.
$name = 'theme_boost_union/recentlyaccesseditemsheading';
$title = get_string('recentlyaccesseditemsheading', 'theme_boost_union', null, true);
$setting = new admin_setting_heading($name, $title, null);
$tab->add($setting);

// Setting: Tint activity icons in the recently accessed items block.
$name = 'theme_boost_union/recentlyaccesseditemstintenabled';
$title = get_string('recentlyaccesseditemstintenabled', 'theme_boost_union', null, true);
$description = get_string('recentlyaccesseditemstintenabled_desc', 'theme_boost_union', null, true);
$setting = new admin_setting_configselect($name, $title, $description, THEME_BOOST_UNION_SETTING_SELECT_NO, $yesnooption);
$setting->set_updatedcallback('theme_reset_all_caches');
$tab->add($setting);

// Create Activities block heading.
$name = 'theme_boost_union/activitiesheading';
$title = get_string('activitiesheading', 'theme_boost_union', null, true);
$setting = new admin_setting_heading($name, $title, null);
$tab->add($setting);

// Setting: Tint activity icons in the activities block.
$name = 'theme_boost_union/activitiestintenabled';
$title = get_string('activitiestintenabled', 'theme_boost_union', null, true);
$description = get_string('activitiestintenabled_desc', 'theme_boost_union', null, true);
$setting = new admin_setting_configselect($name, $title, $description, THEME_BOOST_UNION_SETTING_SELECT_NO, $yesnooption);
$setting->set_updatedcallback('theme_reset_all_caches');
$tab->add($setting);

// Add tab to settings page.
$page->add($tab);


// Create course tab.
$tab = new admin_settingpage('theme_boost_union_look_course',
get_string('coursetab', 'theme_boost_union', null, true));
Expand Down
121 changes: 121 additions & 0 deletions templates/core_calendar/upcoming_mini.mustache
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core_calendar/upcoming_mini
Calendar upcoming view for blocks.
The purpose of this template is to render the upcoming view for blocks.
Classes required for JS:
* none
Data attributes required for JS:
* none
Example context (json):
{
}
}}
{{!
This template is a modified version of core_calendar/upcoming_mini
Modifications compared to the original template:
* Added component placeholder to the activityiconcontainer element to support overwriting of activity purposes.
}}
<div class="card-text content calendarwrapper"{{!
}} id="month-upcoming-mini-{{uniqid}}"{{!
}} data-context-id="{{defaulteventcontext}}"{{!
}} data-courseid="{{courseid}}"{{!
}} data-categoryid="{{categoryid}}"{{!
}}>
{{> core/overlay_loading}}
{{#events}}
<div{{!
}} class="event d-flex border-bottom pt-2 pb-3"{{!
}} data-eventtype-{{normalisedeventtype}}="1"{{!
}} data-region="event-item"{{!
}}>
<div class="activityiconcontainer small theme-boost-union-{{component}} courseicon mr-3">
{{#icon}}
{{#iconurl}}
<img alt="{{alttext}}" title="{{alttext}}" src="{{{ iconurl }}}" class="icon {{iconclass}}">
{{/iconurl}}
{{^iconurl}}
{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}
{{/iconurl}}
{{/icon}}
</div>
<div class="overflow-auto">
<h6 class="d-flex mb-1">
<a{{!
}} class="text-truncate"{{!
}} data-type="event"{{!
}} data-action="view-event"{{!
}} data-event-id="{{id}}"{{!
}} href="{{viewurl}}"{{!
}} title="{{name}}"{{!
}}>{{{name}}}</a>
</h6>
<div class="date small">{{{formattedtime}}}</div>
</div>
</div>
{{/events}}
{{^events}}
{{#str}}noupcomingevents, calendar{{/str}}
{{/events}}
</div>
{{#js}}
require([
'jquery',
'core_calendar/selectors',
'core_calendar/events',
], function(
$,
CalendarSelectors,
CalendarEvents
) {
var root = $('#month-upcoming-mini-{{uniqid}}');
$('body').on(CalendarEvents.filterChanged, function(e, data) {
M.util.js_pending("month-upcoming-mini-{{uniqid}}-filterChanged");
// A filter value has been changed.
// Find all matching cells in the popover data, and hide them.
var target = $("#month-upcoming-mini-{{uniqid}}").find(CalendarSelectors.eventType[data.type]);
var transitionPromise = $.Deferred();
if (data.hidden) {
transitionPromise.then(function() {
return target.slideUp('fast').promise();
});
} else {
transitionPromise.then(function() {
return target.slideDown('fast').promise();
});
}

transitionPromise.then(function() {
M.util.js_complete("month-upcoming-mini-{{uniqid}}-filterChanged");
return;
});

transitionPromise.resolve();
});
});
{{/js}}
Loading

0 comments on commit 3c7a883

Please sign in to comment.