From fcc08650c855f0f6b3cc3d53e98fbf041495af2d Mon Sep 17 00:00:00 2001 From: Adrian Fish Date: Wed, 11 Sep 2019 18:52:25 +0100 Subject: [PATCH] SAK-41586 Allow gradebook to go fullscreen (#7341) https://jira.sakaiproject.org/browse/SAK-41586 --- .../gradebookng/tool/pages/GradebookPage.html | 1 + .../src/webapp/styles/gradebook-grades.css | 11 +- .../js/src/sakai.morpheus.usernav.js | 45 +++- .../impl/src/webapp/vm/morpheus/site.vm | 1 + .../bundle/src/main/bundle/.properties | 210 ------------------ .../main/bundle/maximise-button.properties | 2 + .../tool/src/main/frontend/fa-icon.js | 69 ++++++ .../tool/src/main/frontend/package-lock.json | 5 + .../tool/src/main/frontend/package.json | 1 + .../main/frontend/sakai-maximise-button.js | 64 ++++++ 10 files changed, 195 insertions(+), 214 deletions(-) delete mode 100644 webcomponents/bundle/src/main/bundle/.properties create mode 100644 webcomponents/bundle/src/main/bundle/maximise-button.properties create mode 100644 webcomponents/tool/src/main/frontend/fa-icon.js create mode 100644 webcomponents/tool/src/main/frontend/sakai-maximise-button.js diff --git a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/pages/GradebookPage.html b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/pages/GradebookPage.html index d154da8e792d..d3cdef0e7b6e 100644 --- a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/pages/GradebookPage.html +++ b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/pages/GradebookPage.html @@ -63,6 +63,7 @@ + diff --git a/gradebookng/tool/src/webapp/styles/gradebook-grades.css b/gradebookng/tool/src/webapp/styles/gradebook-grades.css index c81f07507fc6..77fbda287710 100644 --- a/gradebookng/tool/src/webapp/styles/gradebook-grades.css +++ b/gradebookng/tool/src/webapp/styles/gradebook-grades.css @@ -88,7 +88,6 @@ line-height: 1em; max-width: 80%; max-width: calc(100% - 50px); - margin-top: 10px; font-size: 12px; } #gradebookGradesToolbar .gb-item-summary.warn-items-hidden .gb-item-summary-counts { @@ -641,6 +640,11 @@ div.wicket-modal div.w_right > div { margin-left: auto; } +.captionToggleContainer { + display: flex; + align-items: center; +} + .gradesToolbar2 { -ms-grid-row: 2; @@ -736,3 +740,8 @@ div.wicket-mask-transparent, div.wicket-mask-dark { width: 100%; margin-bottom: 15px; } + +sakai-maximise-button { + padding-top: 5px; + margin-left: 10px; +} diff --git a/library/src/morpheus-master/js/src/sakai.morpheus.usernav.js b/library/src/morpheus-master/js/src/sakai.morpheus.usernav.js index 50c0cb518df5..c1b5c0fd7d18 100644 --- a/library/src/morpheus-master/js/src/sakai.morpheus.usernav.js +++ b/library/src/morpheus-master/js/src/sakai.morpheus.usernav.js @@ -3,6 +3,7 @@ */ function userNavEscHandler(e){ + if (e.keyCode === 27) { // esc keycode toggleUserNav(e); } @@ -12,8 +13,10 @@ function userNavEscHandler(e){ * Toggle user nav in header: */ -function toggleUserNav(event){ +function toggleUserNav(event) { + event.preventDefault(); + $PBJQ('.Mrphs-userNav__subnav').toggleClass('is-hidden'); if (!$PBJQ('.Mrphs-userNav__subnav').hasClass('is-hidden')) { @@ -25,7 +28,7 @@ function toggleUserNav(event){ $PBJQ('body').prepend(overlay); // ESC key also closes it - $PBJQ(document).on('keyup',userNavEscHandler); + $PBJQ(document).on('keyup.usernav',userNavEscHandler); } else { $PBJQ('.user-dropdown-overlay').remove(); @@ -285,11 +288,47 @@ $PBJQ(document).ready( function(){ currentHeaderWidth = $PBJQ(".Mrphs-mainHeader").width(); - $PBJQ('.Mrphs-headerLogo').on('click', function() { // scroll to top on banner click/touch document.body.scrollTop = 0; document.body.scrollLeft = 0; $PBJQ(window).trigger('scroll'); }); + + var minimiseTool = () => { + + $PBJQ(document).off("keypress.maximise"); + + $PBJQ(".Mrphs-topHeader").show(); + $PBJQ("#Mrphs-sites-nav").show(); + $PBJQ(".Mrphs-siteHierarchy").show(); + $PBJQ("#toolMenuWrap").show(); + $PBJQ("#footer").show(); + $PBJQ("#presenceToggle").show(); + }; + + $PBJQ("body").on("maximise-tool", e => { + + $PBJQ(document).off('keyup.usernav'); + + $PBJQ(".Mrphs-topHeader").hide(); + $PBJQ("#Mrphs-sites-nav").hide(); + $PBJQ(".Mrphs-siteHierarchy").hide(); + $PBJQ("#toolMenuWrap").hide(); + $PBJQ("#footer").hide(); + $PBJQ("#presenceToggle").hide(); + + $PBJQ(document).on("keyup.maximise", e => { + + // Exit fullscreen mode on escape + if (e.keyCode === 27) { + minimiseTool(); + e.stopPropagation(); + $PBJQ(document).on('keyup.usernav',userNavEscHandler); + $PBJQ("sakai-maximise-button").each((i ,e) => e.setMinimised()); + } + }); + }); + + $PBJQ("body").on("minimise-tool", e => minimiseTool()); }); diff --git a/portal/portal-render-engine-impl/impl/src/webapp/vm/morpheus/site.vm b/portal/portal-render-engine-impl/impl/src/webapp/vm/morpheus/site.vm index 0260dedfa8e1..8e1570dc59fc 100755 --- a/portal/portal-render-engine-impl/impl/src/webapp/vm/morpheus/site.vm +++ b/portal/portal-render-engine-impl/impl/src/webapp/vm/morpheus/site.vm @@ -147,6 +147,7 @@ + diff --git a/webcomponents/bundle/src/main/bundle/.properties b/webcomponents/bundle/src/main/bundle/.properties deleted file mode 100644 index e70d92af636d..000000000000 --- a/webcomponents/bundle/src/main/bundle/.properties +++ /dev/null @@ -1,210 +0,0 @@ -# localization strings for the authz-tool - -gen.alert = Alert: -gen.can = Cancel -gen.sav = Save -gen.don = Done -gen.show5 = show 5 items... -gen.show10 = show 10 items... -gen.show20 = show 20 items... -gen.show50 = show 50 items... -gen.show100 = show 100 items... -gen.show200 = show 200 items.... -gen.listnavselect = To operate the combo box, first press Alt+Down Arrow to open it, and then use the up and down arrow keys to scroll through the options. -gen.first = First -gen.previous = Previous -gen.next = Next -gen.last = Last -gen.enable = Enable -gen.back=Back - -gen.yes=yes -gen.no=no - -per.alrgra = already granted -per.lis.head=Permission -per.lis.head.title=Toggle all permissions for all roles -per.lis.role.title=Toggle all permissions for this role -per.lis.perm.title=Toggle all roles for this permission -per.lis.title = Permissions -per.lis = List of roles and permissions that can be applied to this folder. Layout: each row lists the permissions of a role. Layout: column 1 lists the roles, the other columns list the permissions, checkboxes permit enabling a permission for a role. -per.rol = Role -per.alert = Alert: no roles are defined. -per.lis.clearall=Clear all -per.lis.restoredef=Undo changes -per.lis.selectgrp=Set permissions for -per.lis.site=Site - -alert.prbset = Permissions can not be set at this time because of an unknown error.\ - Try closing permissions in other tools before proceeding. - -realm.add = Add Role -realm.confirm.alert = Alert: -realm.confirm.cancel = Cancel -realm.confirm.please = Please confirm the removal of this Realm: -realm.confirm.remove = Remove -realm.confirm.usedfor = Used for -realm.confirm.removing = Removing Realm... -realm.copyrol = Copy Role... -realm.defined = A Role with this id ({0}) is already defined. -realm.edit.active = active -realm.edit.inactive = inactive -realm.edit.summary = Review and modify this Realm's information. -realm.edit.alert = Alert: -realm.edit.cancel = Cancel -realm.edit.complete = Complete the Realm Edit -realm.edit.description = Description -realm.edit.edit = Edit: Realm -realm.edit.from = From Provider -realm.edit.id = Realm Id: -realm.edit.maintain = Maintain Role: -realm.edit.noroles = No Roles have been granted to any users. -realm.edit.noroles1 = No roles are defined. -realm.edit.provided = provided -realm.edit.provider = Provider Id: -realm.edit.realm = Realm -realm.edit.review = Review and modify this Realm's information. -realm.edit.role = Role -realm.edit.status = Status -realm.edit.roleid = Role Id -realm.edit.roles = Roles -realm.edit.roles.list.summary = List of Roles. First column role ids, second column description. -realm.edit.save = Save -realm.edit.these = These are the Roles granted to individual users in this Realm. Click on an Id to edit. -realm.edit.these1 = These are the Roles defined within this Realm. Click on an Id to edit. -realm.edit.used = Used for -realm.edit.userid = User Id -realm.edit.users = Users -realm.edit.users.list.summary = List of users. First column contains user ids, second column contains description, third column contains status, fourth column contains the provider. -realm.grant = Grant Ability -realm.idinvalid = The realm id is invalid -realm.iduse = The realm id is already in use -realm.list.alert = Alert: -realm.list.summary =List of Realms. First column Realm ID, second provider ID, third Maintain Role -realm.list.maintain = Maintain Role -realm.list.norealms = No realms are defined that meet the search criteria. -realm.list.provide = Provider Id -realm.list.realmid = Realm Id -realm.list.these = These are the Realms defined within the system that meet the search criteria. Click on an Id to edit. -realm.list.used = Used for -realm.list.youare = You are viewing -realm.list.of = of -realm.list.results = results. -realm.list.search.acc = Search by realm Id -realm.new = New Realm -realm.notfound = Realm {0} not found -realm.notpermis = You do not have permission to create this Realm -realm.notpermis1 = You do not have permission to edit Realm -realm.notpermis2 = You do not have permission to remove Realm {0} -realm.notpermis3 = You do not have permission to edit this Realm -realm.please = Please enter a Role id. -realm.realm = Realm -realm.remove = Remove Realm -realm.removeall = Remove All -realm.removerol = Remove Role -realm.role = Add Role -realm.role.alert = Alert: -realm.role.cancel = Cancel -realm.role.complete = Complete the Realm Edit -realm.role.continue = Continue Editing -realm.role.description = Description: -realm.role.done = Done -realm.role.edit = Edit: Realm -realm.role.functions = Functions -realm.role.functions2 = Functions: -realm.role.id = Role Id: -realm.role.role = Role -realm.role.save = Save -realm.role.used = Used for -realm.role.set = Set the Functions for this Role. -realm.role.group = Should this role be limited to the group provider only? -realm.save = Save As -realm.saveas.alert = Alert: -realm.saveas.cancel = Cancel -realm.saveas.copy = Copy Role -realm.saveas.enter = Enter a new Role id to create a new role that is a copy of the selected Role. -realm.saveas.enter1 = Enter a new realm id to create a new realm that is a copy of the selected realm. -realm.saveas.realm = Realm -realm.saveas.realmid = Realm Id: -realm.saveas.role = Role -realm.saveas.roleid = Role Id: -realm.saveas.save = Save -realm.saveas.saveas = Save as... -realm.someone = Someone else is currently editing this Realm: -realm.user = User id not found. -realm.user.alert = Alert: -realm.user.cancel = Cancel -realm.user.complete = Complete the Realm Edit -realm.user.continue = Continue Editing -realm.user.done = Done -realm.user.edit = Edit: Realm -realm.user.id = User Id: -realm.user.role = Role -realm.user.role2 = Role: -realm.user.save = Save -realm.user.set = Set the Role for this User. -realm.user.used = Used for -realm.user.user = User Role -realm.user.notfound = Internal error: user not found. -realm.noaccess = You do not have permission to use this tool. - -realm.view.active = active -realm.view.description = Description -realm.view.view = View: Realm -realm.view.realm = Realm -realm.view.review = Review this Realm's information. -realm.view.from = From Provider -realm.view.id = Realm Id: -realm.view.maintain = Maintain Role: -realm.view.used = Used for -realm.view.these = These are the Roles granted to individual users in this Realm. Click on an Id to view. -realm.view.these1 = These are the Roles defined within this Realm. Click on an Id to view. -realm.view.userid = User Id -realm.view.users = Users -realm.view.users.list.summary = List of users. First column contains user ids, second column contains description, third column contains status, fourth column contains the provider. -realm.view.status = Status -realm.view.roleid = Role Id -realm.view.roles = Roles -realm.view.roles.list.summary = List of Roles. First column role ids, second column description. -realm.view.noroles = No Roles have been granted to any users. -realm.view.noroles1 = No roles are defined. -realm.view.provided = provided -realm.view.provider = Provider Id: -realm.role.view = View the Functions for this Role. -realm.role.group.view = Is this role be limited to the group provider only? -realm.view.back = Cancel - - -realm.noProviderIdFound = No course section found with Provider Id: {0} - -reasav.alert = Alert: -reasav.can = Cancel -reasav.entanew2 = Enter a new Realm id. -reasav.entnew = Enter a new realm id to create a new realm that is a copy of the selected realm. -reasav.reaid = Realm Id: -reasav.realm = Realm -reasav.sav = Save -reasav.savas = Save As ... - -reasavrol.alert = Alert: -reasavrol.can = Cancel -reasavrol.coprol = Copy Role -reasavrol.entanew = Enter a new Role id to create a new role that is a copy of the selected Role. -reasavrol.entanew2 = Enter a new Role id. -reasavrol.rolid = Role Id: -reasavrol.sav = Save - - -#### permissions - -desc-annc.new=Create announcements -desc-annc.read=Read announcements -desc-annc.revise.any=Edit all announcements -desc-annc.revise.own=Edit own announcements -desc-annc.delete.any=Delete all announcements -desc-annc.delete.own=Delete own announcements -desc-annc.read.drafts=Read all draft announcements -desc-annc.all.groups=Access all group announcements - -alert_sitegroupnotdefined=Cannot find site/group with reference ''{0}''. -alert_permission=You don''t have permission to change permission settings for ''{0}''. diff --git a/webcomponents/bundle/src/main/bundle/maximise-button.properties b/webcomponents/bundle/src/main/bundle/maximise-button.properties new file mode 100644 index 000000000000..a15b0e86e155 --- /dev/null +++ b/webcomponents/bundle/src/main/bundle/maximise-button.properties @@ -0,0 +1,2 @@ +normal_view=Normal View +fullscreen_view=Fullscreen View diff --git a/webcomponents/tool/src/main/frontend/fa-icon.js b/webcomponents/tool/src/main/frontend/fa-icon.js new file mode 100644 index 000000000000..5622762a6557 --- /dev/null +++ b/webcomponents/tool/src/main/frontend/fa-icon.js @@ -0,0 +1,69 @@ +import { LitElement, html, css } from './assets/lit-element/lit-element.js'; + +class FaIcon extends LitElement { + + static get properties() { + return { + color: String, + iClass: { attribute: 'class' }, + src: String, + style: String, + size: Number, + pathPrefix: { attribute: "path-prefix" }, + }; + } + static get styles() { + return css` + :host { + display: inline-block; + padding: 0; + margin: 0; + } + `; + } + + getSources(className) { + const PREFIX_TO_STYLE = { + fas: 'solid', + far: 'regular', + fal: 'light', + fab: 'brands', + fa: 'solid' + }; + const getPrefix = iClass => { + let data = iClass.split(' '); + return [PREFIX_TO_STYLE[data[0]], normalizeIconName(data[1])]; + }; + const normalizeIconName = name => { + let icon = name.replace('fa-', ''); + return icon; + }; + let data = getPrefix(className); + return `${this.pathPrefix}/@fortawesome/fontawesome-free/sprites/${data[0]}.svg#${data[1]}`; + } + constructor() { + super(); + this.iClass = ''; + this.src = ''; + this.style = ''; + this.size = 19; + this.color = '#000'; + this.pathPrefix = "node_modules"; + } + firstUpdated() { + this.src = this.getSources(this.iClass); + } + render() { + return html` +
+ + + +
+ `; + } +} +customElements.define('fa-icon', FaIcon); diff --git a/webcomponents/tool/src/main/frontend/package-lock.json b/webcomponents/tool/src/main/frontend/package-lock.json index be1b47619121..9522bfe48663 100644 --- a/webcomponents/tool/src/main/frontend/package-lock.json +++ b/webcomponents/tool/src/main/frontend/package-lock.json @@ -43,6 +43,11 @@ "whatwg-url": "^6.4.0" } }, + "@fortawesome/fontawesome-free": { + "version": "5.10.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.10.2.tgz", + "integrity": "sha512-9pw+Nsnunl9unstGEHQ+u41wBEQue6XPBsILXtJF/4fNN1L3avJcMF/gGF86rIjeTAgfLjTY9ndm68/X4f4idQ==" + }, "@types/babel-core": { "version": "6.25.5", "resolved": "https://registry.npmjs.org/@types/babel-core/-/babel-core-6.25.5.tgz", diff --git a/webcomponents/tool/src/main/frontend/package.json b/webcomponents/tool/src/main/frontend/package.json index e7f2c1367b15..97fbb0e70120 100644 --- a/webcomponents/tool/src/main/frontend/package.json +++ b/webcomponents/tool/src/main/frontend/package.json @@ -16,6 +16,7 @@ "author": "", "license": "ECL-2.0", "dependencies": { + "@fortawesome/fontawesome-free": "^5.10.2", "@webcomponents/webcomponentsjs": "^2.2.10", "lit-element": "^2.1.0", "sortablejs": "^1.9.0" diff --git a/webcomponents/tool/src/main/frontend/sakai-maximise-button.js b/webcomponents/tool/src/main/frontend/sakai-maximise-button.js new file mode 100644 index 000000000000..c142c65f11f4 --- /dev/null +++ b/webcomponents/tool/src/main/frontend/sakai-maximise-button.js @@ -0,0 +1,64 @@ +import {SakaiElement} from "./sakai-element.js"; +import {html} from "/webcomponents/assets/lit-element/lit-element.js"; +import "/webcomponents/fa-icon.js"; + +class SakaiMaximiseButton extends SakaiElement { + + constructor() { + + super(); + + this.loadTranslations({bundle: "maximise-button"}).then(t => { this.i18n = t; this.requestUpdate(); }); + } + + static get properties() { + + return { + fullScreen: { attribute: "full-screen", type: Boolean }, + }; + } + + shouldUpdate(changed) { + return this.i18n; + } + + render() { + + return html` +
+ ${this.fullScreen ? + html` + + + ` + : html` + + + ` + } +
+ `; + } + + maximise(e) { + + e.preventDefault(); + + this.dispatchEvent(new CustomEvent("maximise-tool", {bubbles: true, composed: true})); + this.fullScreen = true; + } + + minimise(e) { + + e.preventDefault(); + + this.dispatchEvent(new CustomEvent("minimise-tool", {bubbles: true, composed: true})); + this.fullScreen = false; + } + + setMinimised() { + this.fullScreen = false; + } +} + +customElements.define("sakai-maximise-button", SakaiMaximiseButton);