mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-11-23 15:16:50 +00:00
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:
parent
4e591bbfb7
commit
a782b7b7da
BIN
resources/dist/index.js
vendored
BIN
resources/dist/index.js
vendored
Binary file not shown.
BIN
resources/dist/index.js.json
vendored
BIN
resources/dist/index.js.json
vendored
Binary file not shown.
|
@ -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 |
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue