jenkins-bot has submitted this change and it was merged.
Change subject: Turn page action icons in alpha into SVGS
......................................................................
Turn page action icons in alpha into SVGS
Change-Id: I0f53dc032fc7d682f7c51409840d1d6baeb36d91
---
M less/content/headings.less
M less/iconsNew.less
A less/images/icons/edit.svg
A less/images/icons/editLocked.svg
A less/images/icons/talk.svg
A less/images/icons/upload.svg
A less/images/icons/uploadLocked.svg
M less/minerva.less/minerva.variables.less
M less/pageactions.less
M less/ui.less
10 files changed, 99 insertions(+), 40 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/less/content/headings.less b/less/content/headings.less
index bb7be26..083e28f 100644
--- a/less/content/headings.less
+++ b/less/content/headings.less
@@ -42,15 +42,15 @@
.pre-content h1,
.content h1 {
font-family: @fontFamilyHeading;
- font-size: 1.7em;
+ font-size: @fontSizeH1;
}
h2 {
- font-size: 1.5em;
+ font-size: @fontSizeH2;
}
h3 {
- font-size: 1.2em;
+ font-size: @fontSizeH3;
font-weight: bold;
}
diff --git a/less/iconsNew.less b/less/iconsNew.less
index 9277c8a..0651d0c 100644
--- a/less/iconsNew.less
+++ b/less/iconsNew.less
@@ -5,32 +5,12 @@
// FIXME: BEGIN: Find svg versions of all of these and add to icons folder
// UI set
-.mw-ui-icon-talk {
- .m-background-image('images/pagemenu/talk.png');
-}
-
-.mw-ui-icon-watch {
- .m-background-image-svg-quick('images/icons/watch');
-}
-
-.mw-ui-icon-edit {
- .m-background-image('images/pagemenu/edit-locked.png');
-}
-
-.mw-ui-icon-edit-enabled {
- .m-background-image('images/pagemenu/edit.png');
-}
-
.mw-ui-icon-arrow-down {
.m-background-image('images/show.png');
}
.mw-ui-icon-arrow-up {
.m-background-image('images/hide.png');
-}
-
-.mw-ui-icon-watched {
- .m-background-image-svg-quick('images/icons/watched');
}
// Menu set
@@ -87,14 +67,6 @@
// Uploads set
-.mw-ui-icon-addimage {
- .m-background-image('images/pagemenu/upload-locked.png');
-}
-
-.mw-ui-icon-addimage-enabled {
- .m-background-image('images/pagemenu/upload.png');
-}
-
.mw-ui-icon-photo {
.m-background-image('images/camera.png');
}
@@ -175,6 +147,35 @@
.m-background-image('images/ajax-loader.gif');
}
+// Page action set
+.mw-ui-icon-talk {
+ .m-background-image-svg-quick('images/icons/talk');
+}
+
+.mw-ui-icon-watch {
+ .m-background-image-svg-quick('images/icons/watch');
+}
+
+.mw-ui-icon-edit {
+ .m-background-image-svg-quick('images/icons/editLocked');
+}
+
+.mw-ui-icon-edit-enabled {
+ .m-background-image-svg-quick('images/icons/edit');
+}
+
+.mw-ui-icon-watched {
+ .m-background-image-svg-quick('images/icons/watched');
+}
+
+.mw-ui-icon-addimage {
+ .m-background-image-svg-quick('images/icons/uploadLocked');
+}
+
+.mw-ui-icon-addimage-enabled {
+ .m-background-image-svg-quick('images/icons/upload');
+}
+
// FIXME: Find better workaround for this
span.mw-ui-icon {
// a block inside an inline element is never a good idea - effects line
height of mobile diff bytesadded class
@@ -183,6 +184,11 @@
// FIXME: Upstream to mediawiki ui
.mw-ui-icon {
+ // FIXME: Needed for page actions, ensures <a> tags can give icon height
+ * {
+ display: block;
+ }
+
&:before {
background-position: 50% 50%;
height: 100%;
diff --git a/less/images/icons/edit.svg b/less/images/icons/edit.svg
new file mode 100644
index 0000000..b041b1e
--- /dev/null
+++ b/less/images/icons/edit.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 -410 2048 2048" width="24"
height="24">
+ <g id="g4">
+ <path d="M307.05 1073.838q32.507 22.505 97.522
87.519l1255.274-1135.249q-33.757-60.013-101.272-82.518zm-135.029-51.261l1391.554-1247.773q156.284
26.256 276.31 155.034 120.026 128.778 128.778 287.563l-1392.805
1252.775-515.112 55.012z" id="path6" fill="#777"/>
+ </g>
+</svg>
diff --git a/less/images/icons/editLocked.svg b/less/images/icons/editLocked.svg
new file mode 100644
index 0000000..511f4af
--- /dev/null
+++ b/less/images/icons/editLocked.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 -410 2048 2048" width="24"
height="24" fill="#777">
+ <g id="g4">
+ <path d="M1670.264-159.319q-108.757 0-108.757 124.824l1.236
109.993h216.278l-1.236-109.993q1.236-124.824-107.521-124.824zm0-144.597q102.577
0 171.787 77.86 69.209 77.86 69.209
190.324v111.229h108.757v484.462h-699.504v-484.462h109.993v-112.464q0-112.464
69.209-189.089 69.209-76.624 170.551-77.86zm-469.632 984.992h170.551l-795.902
716.807-510.416 55.614 108.757-498.057 1027.011-918.254v164.371l-892.301
805.789q32.132 22.245 96.398 86.511l795.902-719.278v306.496z" id="path6"
fill="#777"/>
+ </g>
+</svg>
diff --git a/less/images/icons/talk.svg b/less/images/icons/talk.svg
new file mode 100644
index 0000000..71a2f0f
--- /dev/null
+++ b/less/images/icons/talk.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 -410 2389.3333 2048"
width="28" height="24">
+ <g id="g4">
+ <path d="M810.916 313.59h1345.285v921.255l234.731
262.495h-1431.101q-103.483
0-137.557-93.388-11.358-31.55-11.358-55.528v-1034.835zm-566.635-503.535h1347.809v384.908h-901.063v798.842h-682.739l235.993-263.757v-919.993z"
id="path6" fill="#777"/>
+ </g>
+</svg>
diff --git a/less/images/icons/upload.svg b/less/images/icons/upload.svg
new file mode 100644
index 0000000..50df291
--- /dev/null
+++ b/less/images/icons/upload.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 -410 2389.3333 2048"
width="28" height="24">
+ <g id="g4">
+ <path
d="M1848.16-352.484h209.285v328.003h331.674v200.718h-331.674v341.466h-209.285v-341.466h-329.226v-200.718h329.226v-328.003zm-630.303
1506.608l-450.391-472.421-72.209 30.597-476.093 621.736
1611.863-1.224-368.391-324.33zm-1200.636
385.525v-1561.683h1371.98v326.779h329.226v329.226h330.45v905.679h-2031.657z"
id="path6" fill="#777"/>
+ </g>
+</svg>
diff --git a/less/images/icons/uploadLocked.svg
b/less/images/icons/uploadLocked.svg
new file mode 100644
index 0000000..3917e63
--- /dev/null
+++ b/less/images/icons/uploadLocked.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 -410 2390.5 2047.9999"
width="28" height="24">
+ <g id="g4">
+ <path d="M2157.676-3.692q0-123.588-106.458-123.588t-106.458
123.588v108.905h212.915v-108.905zm-106.458-265.533q77.091-1.223 138.273 47.722
107.681 85.656 100.34
291.229v35.486h106.458v477.224h-690.141v-477.224h102.787q-1.223-138.273
20.802-208.021 22.026-69.749 83.208-118.694 61.183-48.946
138.273-47.722zm-215.363 1509.987v-1.223l-368.32-323.044-244.73
144.391-450.305-471.106-73.42 29.367-476.001 621.615h1612.774zm-1814.677
206.798v-1561.381h1687.417q-18.355 45.276-19.578
94.221h-107.681v725.627h472.33v741.534h-2032.487z" id="path6" fill="#777"/>
+ </g>
+</svg>
diff --git a/less/minerva.less/minerva.variables.less
b/less/minerva.less/minerva.variables.less
index a6b5896..897ad9e 100644
--- a/less/minerva.less/minerva.variables.less
+++ b/less/minerva.less/minerva.variables.less
@@ -10,6 +10,11 @@
@menuWidth: 240px;
@rightDrawerWidth: 60%;
+// Headings
+@fontSizeH1: 1.7em;
+@fontSizeH2: 1.5em;
+@fontSizeH3: 1.2em;
+
// Content
@contentMargin: 16px;
diff --git a/less/pageactions.less b/less/pageactions.less
index 91af63f..319a919 100644
--- a/less/pageactions.less
+++ b/less/pageactions.less
@@ -19,6 +19,13 @@
border-bottom: dotted 1px @colorGray12;
}
+// FIXME: Make default when mw-ui-icon in stable
+.alpha {
+ #page-actions {
+ font-size: 1.2em;
+ }
+}
+
#page-actions {
@verticalMargin: 8px;
// FIXME: Use a gray defined in variables e.g. @grayMediumLight
@@ -57,15 +64,6 @@
width: 40px;
background-position: 50% 0;
margin: 0 16px 0 0;
- }
-
- // FIXME: Remove this when these are all svgs
- &.mw-ui-icon-edit,
- &.mw-ui-icon-edit-enabled,
- &.mw-ui-icon-addimage,
- &.mw-ui-icon-talk,
- &.mw-ui-icon-addimage-enabled {
- font-size: 1.3em;
}
}
}
diff --git a/less/ui.less b/less/ui.less
index 05c28ec..db402e1 100644
--- a/less/ui.less
+++ b/less/ui.less
@@ -149,6 +149,26 @@
}
.content {
+ // Correct icon sizes of edit icon when using mw-ui-icon.
+ h1 {
+ // FIXME: Make less specific when mw-ui-icon default.
+ .mw-ui-icon.edit-page {
+ font-size: 1 / @fontSizeH1;
+ }
+ }
+
+ h2 {
+ .mw-ui-icon.edit-page {
+ font-size: 1 / @fontSizeH2;
+ }
+ }
+
+ h3 {
+ .mw-ui-icon.edit-page {
+ font-size: 1 / @fontSizeH3;
+ }
+ }
+
.edit-page {
display: none;
position: absolute;
--
To view, visit https://gerrit.wikimedia.org/r/173215
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I0f53dc032fc7d682f7c51409840d1d6baeb36d91
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: Awjrichards <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
