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

resources/ext.popups.images/cog.svg

@@ -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>

src/ui/templates/pagePreview/pagePreview.js

@@ -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>

src/ui/templates/pagePreview/pagePreview.less

@@ -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;
-			}
-		}
-	}
-}

src/ui/templates/popup.less

@@ -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;
 	}