From b6080ac1552e6c1c19a709d07df1bf94414200d5 Mon Sep 17 00:00:00 2001 From: Sereza7 Date: Tue, 17 Oct 2023 17:14:10 +0200 Subject: [PATCH] XWIKI-21272: History navigation arrows are not perceived as links and lacking contrast (#2323) * Replaced the `<` and `>` symbols used for buttons with proper icon theme arrow icons. * Updated the order of the nodes and structure to fit improvements to the interface * Updated style to improve usability: action links styled as button, clearer structure of the section, and explicit name on some buttons. * Fixed tests * Removed the display arrow * Replaced titles on 'central' buttons * Replaced the text content of the 'side' buttons. * Fixed inconsistent behavior with reverted version numbers * Escaped titles * Updated the comment display, this is part of improving the usability of this node, not specifically accessibility * Updated style of the change info boxes --- .../main/resources/flamingo/less/misc.less | 54 ++++++------------- .../resources/ApplicationResources.properties | 17 ++++-- .../org/xwiki/test/ui/po/ChangesPane.java | 6 +-- .../main/resources/templates/changesdoc.vm | 26 +++++---- .../main/resources/templates/diff_macros.vm | 36 +++++++------ 5 files changed, 69 insertions(+), 70 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less index 1fcc5f4a25db..146f072da37f 100644 --- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less +++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less @@ -357,76 +357,54 @@ dl.export-tree-legend dt + dd { // Viewer = changes ----------------------------------------------------------- #changes-info { - background-color: @xwiki-background-secondary-color; - border: @border-width solid @xwiki-border-color; margin-top: (@grid-gutter-width / 2); margin-bottom: (@grid-gutter-width / 2); padding-top: (@grid-gutter-width / 2); padding-bottom: (@grid-gutter-width / 2); position: relative; - /* Background arrow */ - &:before { - background: @xwiki-page-content-bg; - height: 2em; - right: 50%; - top: 4em; - width: 2em; - } - &:after { - border-bottom: 2em solid transparent; - border-left: 3em solid @xwiki-page-content-bg; - border-top: 2em solid transparent; - left: 50%; - top: 3em; - } - &:before, &:after { - content: ""; - display: block; - position: absolute; - } } #changes-info-boxes { display: flex; flex-direction: row; flex-wrap: wrap; - justify-content: space-between; + column-gap: 5vw; + row-gap: 1vh; } .changes-info-box { flex: 1; - padding: 0 (@main-padding / 2); -} - -.changes-info-box, #changes-info-comment { + padding: (@main-padding / 4) (@main-padding / 2); + background-color: @xwiki-background-secondary-color; + border-radius: @border-radius-large; text-align: center; } .changes-info-title { .h3; -} - -@media (max-width: @screen-xs-max) { - #changes-info:before, #changes-info:after { - display: none; /* Hide the arrow for small resolutions */ - } + margin-top: 0; } .changes-version { white-space: nowrap; } +.changes-arrow { + font-size: inherit; +} + .changes-arrow, .changes-arrow-left, .changes-arrow-right { &, &:hover, &:active, &:visited, &:focus { - color: @xwiki-page-content-bg; - text-decoration: none; + vertical-align: baseline; font-weight: 700; } } -.changes-arrow-left, .changes-arrow-right { - font-size: 7em; - line-height: 1; +#changes-arrows-box { + font-size: 1.5em; + flex-basis: 100%; + display: flex; + justify-content: space-between; } .changes-body > .changes-body-header { diff --git a/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties b/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties index c05d3339b01f..282f5919254a 100644 --- a/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties +++ b/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties @@ -1720,6 +1720,7 @@ web.history.changes.restrictedInfo=For security reasons, at least one of the com restricted mode as it is not the current version. There may be differences and errors due to this. core.viewers.diff.title=Changes for page {0} +core.viewers.diff.change=From {0} to {1} core.viewers.diff.from=From version {0} core.viewers.diff.fromNew=From empty core.viewers.diff.to=To version {0} @@ -1727,10 +1728,10 @@ core.viewers.diff.editedBy=edited by {0} core.viewers.diff.editedOn=on {0} core.viewers.diff.editComment=Change comment: core.viewers.diff.noEditComment=There is no comment for this version -core.viewers.diff.nextChange=Next change -core.viewers.diff.previousChange=Previous change -core.viewers.diff.nextVersion=Next version -core.viewers.diff.previousVersion=Previous version +core.viewers.diff.nextVersion.origin=Increase the base version to {0} +core.viewers.diff.previousVersion.origin=Decrease the base version to {0} +core.viewers.diff.nextVersion.target=Increase the target version to {0} +core.viewers.diff.previousVersion.target=Decrease the target version to {0} core.viewers.code.showBlame=Show last authors core.viewers.code.hideBlame=Hide last authors @@ -5636,6 +5637,14 @@ platform.office.importDocumentOverwriteConfirmation=The target document exists. ####################################### core.menu.navbar.left.label=Left side of the navigation bar +####################################### +## until 15.9RC1 +####################################### +core.viewers.diff.nextVersion=Next version +core.viewers.diff.previousVersion=Previous version +core.viewers.diff.nextChange=Next change +core.viewers.diff.previousChange=Previous change + ## Used to indicate where deprecated keys end #@deprecatedend diff --git a/xwiki-platform-core/xwiki-platform-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/ChangesPane.java b/xwiki-platform-core/xwiki-platform-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/ChangesPane.java index d8f7f26dce79..1140177f4db8 100644 --- a/xwiki-platform-core/xwiki-platform-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/ChangesPane.java +++ b/xwiki-platform-core/xwiki-platform-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/ChangesPane.java @@ -33,8 +33,8 @@ */ public class ChangesPane extends BaseElement { - private final static String previousChangeSelector = "#changes-info-boxes > a.changes-arrow-left"; - private final static String nextChangeSelector = "#changes-info-boxes > a.changes-arrow-right"; + private final static String previousChangeSelector = "#changes-info-boxes > #changes-arrow-boxes > a.changes-arrow-left"; + private final static String nextChangeSelector = "#changes-info-boxes > #changes-arrow-boxes > a.changes-arrow-right"; private final static String previousFromVersionSelector = "#changes-info-box-from .changes-arrow:first-child"; private final static String nextFromVersionSelector = "#changes-info-box-from .changes-arrow:last-child"; private final static String previousToVersionSelector = "#changes-info-box-to .changes-arrow:first-child"; @@ -69,7 +69,7 @@ public class ChangesPane extends BaseElement /** * The comment for the to version. */ - @FindBy(id = "changes-info-comment") + @FindBy(css = "#changes-info-box-to .changes-info-comment") private WebElement changeComment; @FindBy(css = "#changes-info-box-to .changes-version a:not(.changes-arrow)") diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/changesdoc.vm b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/changesdoc.vm index 837f5e5c2ebb..a72067369c87 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/changesdoc.vm +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/changesdoc.vm @@ -24,31 +24,33 @@ #if ("$!previousOrigdocVersion" != '') #set ($changesLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${previousOrigdocVersion}&rev2=${rev2}")}) - #set ($changesTitle = $services.localization.render('core.viewers.diff.previousVersion')) - #set ($previousOrigdocLink = "<") + #set ($changesTitle = $escapetool.xml($services.localization.render('core.viewers.diff.previousVersion.origin', [${previousOrigdocVersion}]))) + #set ($previousOrigdocLink = "$services.icon.renderHTML('left')") #end #if ("$!nextOrigdocVersion" != '') #set ($changesLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${nextOrigdocVersion}&rev2=${rev2}")}) - #set ($changesTitle = $services.localization.render('core.viewers.diff.nextVersion')) - #set ($nextOrigdocLink = ">") + #set ($changesTitle = $escapetool.xml($services.localization.render('core.viewers.diff.nextVersion.origin', [${nextOrigdocVersion}]))) + #set ($nextOrigdocLink = "$services.icon.renderHTML('right')") #end #if ("$!previousNewdocVersion" != '') #set ($changesLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${rev1}&rev2=${previousNewdocVersion}")}) - #set ($changesTitle = $services.localization.render('core.viewers.diff.previousVersion')) - #set ($previousNewdocLink = "<") + #set ($changesTitle = $escapetool.xml($services.localization.render('core.viewers.diff.previousVersion.target', [${previousNewdocVersion}]))) + #set ($previousNewdocLink = "$services.icon.renderHTML('left')") #end #if ("$!nextNewdocVersion" != '') #set ($changesLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${rev1}&rev2=${nextNewdocVersion}")}) - #set ($changesTitle = $services.localization.render('core.viewers.diff.nextVersion')) - #set ($nextNewdocLink = ">") + #set ($changesTitle = $escapetool.xml($services.localization.render('core.viewers.diff.nextVersion.target', [${nextNewdocVersion}]))) + #set ($nextNewdocLink = "$services.icon.renderHTML('right')") #end ## Display the previous change arrow only if there is a previous version of the original document and there is no extension version #if ("$!previousOrigdocVersion" != '' && "$!previousNewdocVersion" != '') ## Keep the reverse navigation order in case the original document version is greater than the version of the new document #if ($origdoc.RCSVersion.isLessOrEqualThan($newdoc.RCSVersion)) #set ($previousLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${previousOrigdocVersion}&rev2=${rev1}")}) + #set ($previousLabel = $escapetool.xml($services.localization.render('core.viewers.diff.change', [$previousOrigdocVersion,$rev1]))) #else #set ($previousLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${rev2}&rev2=${previousNewdocVersion}")}) + #set ($previousLabel = $escapetool.xml($services.localization.render('core.viewers.diff.change', [$rev2, $previousNewdocVersion]))) #end #end ## Display the next change arrow only if there is a next version of the new document and there is no extension version @@ -56,8 +58,10 @@ ## Keep the reverse navigation order in case the original document version is greater than the version of the new document #if ($origdoc.RCSVersion.isLessOrEqualThan($newdoc.RCSVersion)) #set ($nextLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${rev2}&rev2=${nextNewdocVersion}")}) + #set ($nextLabel = $escapetool.xml($services.localization.render('core.viewers.diff.change', [$rev2, $nextNewdocVersion]))) #else #set ($nextLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${nextOrigdocVersion}&rev2=${rev1}")}) + #set ($nextLabel = $escapetool.xml($services.localization.render('core.viewers.diff.change', [$nextOrigdocVersion, $rev1]))) #end #end @@ -66,14 +70,16 @@ 'version': $rev1, 'previousVersionLink': $previousOrigdocLink, 'nextVersionLink': $nextOrigdocLink, - 'previousLink': $previousLink + 'previousLink': $previousLink, + 'previousLabel': $previousLabel }) #set ($to = { 'doc': $newdoc, 'version': $rev2, 'previousVersionLink': $previousNewdocLink, 'nextVersionLink': $nextNewdocLink, - 'nextLink': $nextLink + 'nextLink': $nextLink, + 'nextLabel': $nextLabel }) #displayDocumentChangesHeader($from $to) diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/diff_macros.vm b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/diff_macros.vm index d07507eb4a5c..1e30d19761ff 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/diff_macros.vm +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/diff_macros.vm @@ -575,15 +575,33 @@ $services.localization.render('core.viewers.diff.editedOn', [$xwiki.formatDate($targetDoc.date)]) #end ## changes-info-content +
+ $escapetool.xml($services.localization.render('core.viewers.diff.editComment')) + #if ("$targetDoc.comment" == '') + $escapetool.xml($services.localization.render('core.viewers.diff.noEditComment')) + #else + $escapetool.xml($targetDoc.comment) + #end +
## changes-info-comment #end #end #macro (displayDocumentChangesHeader $from $to)
- #if ("$!from.previousLink" != '') - < + #if ("$!from.previousLink" != '' || "$!to.nextLink" != '') +
+ #if ("$!from.previousLink" != '') + + $services.icon.renderHTML('left') $from.previousLabel + + #end + #if ("$!to.nextLink" != '') + + $to.nextLabel $services.icon.renderHTML('right') + + #end +
#end
#displayDocumentVersionInfo($from.doc $from.version $from.previousVersionLink $from.nextVersionLink 'core.viewers.diff.from') @@ -591,19 +609,7 @@
#displayDocumentVersionInfo($to.doc $to.version $to.previousVersionLink $to.nextVersionLink 'core.viewers.diff.to')
## changes-info-box-to - #if ("$!to.nextLink" != '') - > - #end
## changes-info-boxes -
- $escapetool.xml($services.localization.render('core.viewers.diff.editComment')) - #if ("$!to.doc.comment" == '') - $escapetool.xml($services.localization.render('core.viewers.diff.noEditComment')) - #else - $escapetool.xml($to.doc.comment) - #end -
## changes-info-comment
## changes-info #end