Skip to content

Commit

Permalink
XWIKI-21452: Macros info, success, warning and error are only disting…
Browse files Browse the repository at this point in the history
…uished by colors (#2590)

* Updated style to take into account the addition of an icon in xwiki-rendering
* Implementing the IconProvider interface to override xwiki-rendering behavior
* Added a text alternative to the icons provided for boxes
* Added default translations for the box icons.
* Changed margins and gaps between icon and borders
* Removed borders from the message macro
* Removed box shadow from the message macro
* Added a visually distinguished left border to each type of message

---------

Co-authored-by: Thiago Krieck <thiago.krieck@xwiki.com>
  • Loading branch information
Sereza7 and tkrieck authored Feb 15, 2024
1 parent c401b01 commit 3bb55b5
Show file tree
Hide file tree
Showing 6 changed files with 162 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,49 @@
// Messages
// --------------------------------------------------

.successmessage, .errormessage, .warningmessage, .infomessage,
span.successmessage, span.errormessage, span.warningmessage, span.infomessage,
span.box { // Used by: Inline boxes and messages
padding: floor(@font-size-base * 0.2);
// Used by: Inline boxes
span.successmessage, span.errormessage, span.warningmessage, span.infomessage {
padding: 0 floor(@font-size-base * 0.2);
border: none;
box-shadow: none;
& > img {
// Style the silk icons
margin: 0 .6rem 0 .2rem;
vertical-align: sub;
}

& > span.fa {
// Style the font awesome icons
margin: 0 .6rem 0 .2rem;
}
}

// Used by: message boxes
div.successmessage, div.errormessage, div.warningmessage, div.infomessage {
display: flex;
gap: 2rem;
justify-content: left;
align-items: baseline;
padding: 2rem;
border: none;
border-left: 4px solid;
box-shadow: none;

& > img {
// Improve alignment for silk icons
align-self: flex-start;
}

& > div > .box-title,
& > div > .xwiki-metadata-container[data-xwiki-parameter-name="title"] {
font-weight: bold;
}

// Main message content
& > div > p,
& > div > [data-cke-display-name="$content"] {
margin: 0;
}
}

.box, .plainmessage, // Used by: Code Macro, Success Macro, etc.
Expand All @@ -28,21 +67,25 @@ fieldset.xwikimessage { // Used by: Login form, Delete messages
.successmessage {
.alert-success;
background-color: @state-success-bg;
border-color: @brand-success;
}

.errormessage {
.alert-danger;
background-color: @state-danger-bg;
border-color: @brand-danger;
}

.warningmessage {
.alert-warning;
background-color: @state-warning-bg;
border-color: @brand-warning;
}

.infomessage {
.alert-info;
background-color: @state-info-bg;
border-color: @brand-primary;
}

// --------------------------------------------------
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,8 @@ disk = floppy-o
drink = glass
drive = hdd-o
email = envelope-o
emoticon_smile=smile-o
emoticon_smile= smile-o
emoticon_unhappy = frown-o
error = exclamation-triangle
exclamation = exclamation-circle
eye = eye
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,16 @@
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
</dependency>
<dependency>
<groupId>org.xwiki.platform</groupId>
<artifactId>xwiki-platform-icon-api</artifactId>
<version>${project.version}</version>
</dependency>
<dependency>
<groupId>org.xwiki.platform</groupId>
<artifactId>xwiki-platform-localization-api</artifactId>
<version>${project.version}</version>
</dependency>
<!--dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* This is free software; you can redistribute it and/or modify it
* under the terms of the GNU Lesser General Public License as
* published by the Free Software Foundation; either version 2.1 of
* the License, or (at your option) any later version.
*
* This software 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
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public
* License along with this software; if not, write to the Free
* Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
* 02110-1301 USA, or see the FSF site: http://www.fsf.org.
*/
package org.xwiki.rendering.internal.util;

import javax.inject.Inject;
import javax.inject.Singleton;
import org.xwiki.component.annotation.Component;
import org.xwiki.icon.IconException;
import org.xwiki.icon.IconRenderer;
import org.xwiki.icon.IconSet;
import org.xwiki.icon.IconSetManager;
import org.xwiki.localization.ContextualLocalizationManager;
import org.xwiki.rendering.block.Block;
import org.xwiki.rendering.block.CompositeBlock;
import org.xwiki.rendering.block.FormatBlock;
import org.xwiki.rendering.block.RawBlock;
import org.xwiki.rendering.block.WordBlock;
import org.xwiki.rendering.listener.Format;
import org.xwiki.rendering.syntax.Syntax;

import java.util.List;

/**
* Component to use the icon theme to provide a proper block for displaying an icon.
*
* @version $Id$
* @since 15.10.6
* @since 16.1.0RC1
*/
@Component
@Singleton
public class XWikiIconProvider extends DefaultIconProvider
{
@Inject
private IconSetManager iconSetManager;
@Inject
private IconRenderer iconRenderer;
@Inject
private ContextualLocalizationManager l10n;

/**
* Uses the icon theme to provide the right block for displaying an icon.
* @param iconName the name of the icon to display
* @return the block containing an icon.
*/
@Override
public Block get(String iconName)
{
IconSet iconSet = null;
try {
iconSet = getIconSet(iconName);
String iconContent = this.iconRenderer.renderHTML(iconName, iconSet);
Block iconAlternative;
try {
// Try to retrieve a translation for the icon.
iconAlternative = new FormatBlock(List.of(l10n.getTranslation(
String.format("rendering.icon.provider.icon.alternative.%s", iconName)).render()), Format.NONE);
} catch (Exception e) {
// As a fallback, we just get the english name of the icon as an alternative.
iconAlternative = new FormatBlock(List.of(new WordBlock(iconName)), Format.NONE);
}
iconAlternative.setParameter("class", "sr-only");
Block iconRaw = new RawBlock(iconContent, Syntax.HTML_5_0);
// We return a combination of the icon itself and its text alternative.
return new CompositeBlock(List.of(iconRaw, iconAlternative));
} catch (IconException e) {
return super.get(iconName);
}
}

private IconSet getIconSet(String iconName) throws IconException
{
IconSet iconSet = this.iconSetManager.getCurrentIconSet();
if (iconSet == null || !iconSet.hasIcon(iconName)) {
iconSet = this.iconSetManager.getDefaultIconSet();
}
return iconSet;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,12 @@
# old.key.name=Some translation
###############################################################################

# Those entries are used to label the message boxes of different types.
rendering.icon.provider.icon.alternative.information=Information
rendering.icon.provider.icon.alternative.accept=Success
rendering.icon.provider.icon.alternative.error=Warning
rendering.icon.provider.icon.alternative.exclamation=Error

rendering.error.causedBy=Cause: [{0}].
rendering.error.click=Click on this message for details.
rendering.macro.rawMacroRequiredRights=Using the raw macro for HTML content requires script right.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
500:org.xwiki.rendering.internal.renderer.XWikiAttachmentURILabelGenerator
500:org.xwiki.rendering.internal.renderer.XWikiLinkLabelGenerator
500:org.xwiki.rendering.internal.renderer.XWikiPageAttachmentURILabelGenerator
500:org.xwiki.rendering.internal.util.XWikiIconProvider
500:org.xwiki.rendering.internal.util.XWikiErrorBlockGenerator
500:org.xwiki.rendering.internal.wiki.XWikiWikiModel
500:org.xwiki.rendering.internal.macro.XWikiHTMLRawBlockFilter
Expand Down

0 comments on commit 3bb55b5

Please sign in to comment.