Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/173215
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/.DS_Store
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
11 files changed, 101 insertions(+), 40 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/15/173215/1
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 0073f83..4e29d35 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');
}
@@ -171,6 +143,35 @@
.m-background-image-svg-quick( 'images/icons/cite' );
}
+// 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
@@ -179,6 +180,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/.DS_Store b/less/images/.DS_Store
new file mode 100644
index 0000000..5008ddf
--- /dev/null
+++ b/less/images/.DS_Store
Binary files differ
diff --git a/less/images/icons/edit.svg b/less/images/icons/edit.svg
new file mode 100644
index 0000000..246a0d0
--- /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="M277.092 1075.257q34.28 23.732 102.84
92.292l1323.731-1197.16q-35.598-63.286-106.795-87.018zm-142.393-54.057l1467.443-1315.821q164.807
27.688 291.379 163.489 126.572 135.801 135.801 303.245l-1468.762
1321.095-543.204 58.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..687af81
--- /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="M1673.649-153.543q-113.101 0-113.101 129.81l1.285
114.387h224.918l-1.285-114.387q1.285-129.81-111.816-129.81zm0-150.373q106.675 0
178.649 80.97t71.974
197.927v115.672h113.101v503.815h-727.447v-503.815h114.387v-116.957q0-116.957
71.974-196.642t177.364-80.97zm-488.392 1024.339h177.364l-827.696
745.441-530.805 57.836 113.101-517.953 1068.037-954.935v170.937l-927.945
837.978q33.416 23.134 100.249 89.967l827.696-748.011v318.74z" 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 a0f06f0..14ab6ec 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
@@ -30,6 +37,8 @@
// Needed for non-JavaScript users
position: relative;
cursor: pointer;
+ // override hlist rule
+ margin-right: 0;
// FIXME: use .cloaked class
// file inputs are notoriously difficult to style
@@ -55,15 +64,6 @@
width: 40px;
background-position: 50% 0;
margin: 0 16px 0 0;
- }
-
- &.mw-ui-icon {
- font-size: 1.3em;
- margin-right: 0;
- // FIXME: remove this once other icons are also SVGs,
they looks smaller because they are PNGs
- &.watch-this-article {
- font-size: 1.1em;
- }
}
}
}
diff --git a/less/ui.less b/less/ui.less
index 54adf68..19b5ce2 100644
--- a/less/ui.less
+++ b/less/ui.less
@@ -147,6 +147,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: newchange
Gerrit-Change-Id: I0f53dc032fc7d682f7c51409840d1d6baeb36d91
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
