Update setting icon

- Adds an extra element in popups template to contain settings icon.
- Resizes the setting icon so that the hover/active state is a square.
- Updates the settings icon SVG file.
- Modifies margin rule for icons placed near top of popup.

Bug: T193058
Change-Id: Icc16a788bba8e2f0a82a27c2b5c7be6c2cccaa90
This commit is contained in:
Jan Drewniak 2018-05-29 11:31:03 +02:00 committed by jdlrobson
parent 4e591bbfb7
commit a782b7b7da
6 changed files with 24 additions and 21 deletions

Binary file not shown.

Binary file not shown.

View file

@ -1,4 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="#54595d" d="M20 14.5v-2.9l-1.8-.3c-.1-.4-.3-.8-.6-1.4l1.1-1.5-2.1-2.1-1.5 1.1c-.5-.3-1-.5-1.4-.6L13.5 5h-2.9l-.3 1.8c-.5.1-.9.3-1.4.6L7.4 6.3 5.3 8.4l1 1.5c-.3.5-.4.9-.6 1.4l-1.7.2v2.9l1.8.3c.1.5.3.9.6 1.4l-1 1.5 2.1 2.1 1.5-1c.4.2.9.4 1.4.6l.3 1.8h3l.3-1.8c.5-.1.9-.3 1.4-.6l1.5 1.1 2.1-2.1-1.1-1.5c.3-.5.5-1 .6-1.4l1.5-.3zM12 16c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"/>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<g fill="#54595D">
<path d="M10.112 4.554a5.334 5.334 0 1 0 0 10.668 5.334 5.334 0 0 0 0-10.668zm0 7.823a2.49 2.49 0 1 1 0-4.978 2.49 2.49 0 0 1 0 4.978z"/>
<path d="M11.4 5.303L11.05 3h-2.1L8.6 5.303a4.9 4.9 0 0 1 2.8 0zm-2.8 9.394L8.95 17h2.1l.35-2.303a4.9 4.9 0 0 1-2.8 0zm5.712-7.028l1.4-1.876L14.2 4.309l-1.876 1.4a4.9 4.9 0 0 1 1.981 1.981l.007-.021zm-8.624 4.662L4.309 14.2 5.8 15.691l1.876-1.4a4.9 4.9 0 0 1-1.981-1.981l-.007.021zm9.009-.931L17 11.05v-2.1l-2.303-.35a4.9 4.9 0 0 1 0 2.8zM5.303 8.6L3 8.95v2.1l2.303.35a4.9 4.9 0 0 1 0-2.8zm7.028 5.712l1.876 1.4 1.484-1.512-1.4-1.876a4.9 4.9 0 0 1-1.981 1.981l.021.007zM7.669 5.688L5.8 4.309 4.309 5.8l1.4 1.876a4.9 4.9 0 0 1 1.96-1.988z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 505 B

After

Width:  |  Height:  |  Size: 861 B

View file

@ -16,7 +16,9 @@ export function renderPagePreview(
${ hasThumbnail ? `<a href='${ url }' class='mwe-popups-discreet'></a>` : '' }
<a dir='${ languageDirection }' lang='${ languageCode }' class='mwe-popups-extract' href='${ url }'></a>
<footer>
<a class='mwe-popups-settings-icon mw-ui-icon mw-ui-icon-element mw-ui-icon-popups-settings'></a>
<a class='mwe-popups-settings-icon'>
<span class="mw-ui-icon mw-ui-icon-element mw-ui-icon-popups-settings"></span>
</a>
</footer>
</div>
</div>

View file

@ -1,14 +1,16 @@
@import 'mediawiki.ui/variables';
.mwe-popups-settings-icon {
// For purpose of active and hover states
display: block;
overflow: hidden;
font-size: 16px; // should be equal to .mwe-popups .mw-ui-icon { font-size: 16px; }
width: @iconSize;
height: @iconSize;
padding: 3px; // enlarges icon box (visible on hover)
float: right; // positions icon near bottom right corner
margin: 4px; // adjusts position
text-indent: -1em; // offsets .mw-ui-icon-element:before { margin: 0 1em; }
border-radius: @borderRadius;
// Icon sizes are relative to font size. Override any parents.
font-size: 16px;
// position icon
/* stylelint-disable value-keyword-case */
margin-right: -@iconSize / 2;
&:hover {
background-color: @colorGray14;
}
@ -17,13 +19,3 @@
background-color: @colorGray12;
}
}
.mwe-popups {
.mwe-popups-container {
footer {
.mwe-popups-settings-icon {
float: right;
}
}
}
}

View file

@ -26,6 +26,12 @@
.mw-ui-icon {
// mw-ui-icon assumes a font size of 16px so we must declare it here
font-size: 16px;
}
// icons positioned at the top of the popup
.mw-ui-icon-preview-disambiguation,
.mw-ui-icon-preview-generic
{
margin: 21px 0 8px 0;
}