jenkins-bot has submitted this change and it was merged.
Change subject: Show MapPin icon next to all <maplinks> links
......................................................................
Show MapPin icon next to all <maplinks> links
* VW maplinks with counter are not impacted by this change.
* Provides an optional CSS class .no-icon to hide the icon easily.
Bug: T145176
Change-Id: I29c3fcac94afcf862fb8da46f371a19abe1057a1
---
M extension.json
A styles/images/COPYING
A styles/images/mapPin-progressive.png
A styles/images/mapPin-progressive.svg
M styles/kartographer.less
M styles/leaflet-overrides.less
A styles/link.less
7 files changed, 164 insertions(+), 47 deletions(-)
Approvals:
MaxSem: Looks good to me, approved
Yurik: Looks good to me, but someone else must approve
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index e505f93..6b2729d 100644
--- a/extension.json
+++ b/extension.json
@@ -55,6 +55,7 @@
"ext.kartographer.style": {
"styles": [
"styles/kartographer.less",
+ "styles/link.less",
"styles/dialog.less",
"styles/control-attribution.less",
"styles/control-scale.less",
diff --git a/styles/images/COPYING b/styles/images/COPYING
new file mode 100644
index 0000000..beb4377
--- /dev/null
+++ b/styles/images/COPYING
@@ -0,0 +1,8 @@
+=== mapPin-progressive.svg ===
+This icon file was copied from OOjs UI repository after the build process
generated the progressive
+icons.
+The master version is:
https://github.com/wikimedia/oojs-ui/blob/master/src/themes/mediawiki/images/icons/mapPin.svg
+
+=== mapPin-progressive.png ===
+Same as above, copied from OOjs UI repository after the build process
generated the progressive
+icons.
diff --git a/styles/images/mapPin-progressive.png
b/styles/images/mapPin-progressive.png
new file mode 100644
index 0000000..c1676e6
--- /dev/null
+++ b/styles/images/mapPin-progressive.png
Binary files differ
diff --git a/styles/images/mapPin-progressive.svg
b/styles/images/mapPin-progressive.svg
new file mode 100644
index 0000000..a9631cc
--- /dev/null
+++ b/styles/images/mapPin-progressive.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24"><style>* { fill: #36c }</style>
+ <path d="M19 12c0-3.9-3.1-7-7-7s-7 3.1-7 7c0 1.4.4 2.6 1.1 3.7L12
23l5.9-7.3c.7-1.1 1.1-2.3 1.1-3.7zm-7 4c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4
4-1.8 4-4 4z"/>
+</svg>
diff --git a/styles/kartographer.less b/styles/kartographer.less
index 9300ae0..2ff1141 100644
--- a/styles/kartographer.less
+++ b/styles/kartographer.less
@@ -1,4 +1,39 @@
-@import 'mediawiki.ui/variables';
+/**
+ * CSS Classes Definitions
+ *
+ * .mw-kartographer-maplink:
+ * Represents a <maplink> element as output by the Parser.
+ * May or may not be an interactive link yet (meanwhile JS gets loaded).
+ *
+ * .mw-kartographer-map
+ * Represents a <mapframe> element as output by the Parser.
+ * May or may not be an interactive map yet (meanwhile JS gets loaded)
+ *
+ * .mw-kartographer-link
+ * Represents an interactive map link.
+ * The class is added when the element becomes an interactive link.
+ * May or may not be a <maplink> or <mapframe> (if created via Developer
API)
+ *
+ * .mw-kartographer-interactive
+ * Represents an interactive map.
+ * The class is added when the element becomes an interactive map.
+ *
+ * .mw-kartographer-mapDialog-map
+ * Represents an interactive map within a full screen map dialog.
+ *
+ * .mw-kartographer-static
+ * Represents an interactive map that was made static afterward because the
+ * viewport is too small.
+ *
+ * In practice:
+ *
+ * - <maplink> will have .mw-kartographer-maplink first,
+ * .mw-kartographer-link then.
+ *
+ * - <mapframe> will have .mw-kartographer-map first,
+ * .mw-kartographer-link then, if displaying static
snapshot.
+ * .mw-kartographer-interactive then, if directly
interactive.
+ */
.mw-kartographer-mapDialog-map {
position: absolute;
@@ -12,34 +47,6 @@
.mw-kartographer-error {
display: inline-block;
background: #ffc0cb;
-}
-
-a.mw-kartographer-link {
- display: inline;
- cursor: pointer;
-}
-
-a.mw-kartographer-autostyled {
- display: inline-block;
- vertical-align: middle;
- position: relative;
- top: -0.08em;
- box-sizing: content-box;
- height: 0.85em;
- padding: 0.24em 0.42em;
- border-radius: 1px;
- color: #fff;
- font-weight: bold;
- font-size: 0.85em;
- line-height: 1;
- text-align: center;
-}
-a.mw-kartographer-autostyled:visited {
- color: #fff;
-}
-
-.leaflet-bar a {
- background-position: center center;
}
.mw-kartographer-static {
@@ -81,24 +88,6 @@
top: 10px;
right: 10px;
margin-right: 0;
-}
-
-.client-js .mw-kartographer-map {
- cursor: pointer;
-}
-
-.client-js .mw-kartographer-map:hover {
- .mw-kartographer-fullScreen {
- background-color: #fff;
- }
- .oo-ui-buttonElement-button {
- background-color: #fff;
- }
-}
-
-.client-js .mw-kartographer-maplink:not(.mw-kartographer-link) {
- pointer-events: none;
- cursor: default;
}
.mw-kartographer-container:not(.mw-kartographer-full) {
diff --git a/styles/leaflet-overrides.less b/styles/leaflet-overrides.less
index 64fecea..155a86f 100644
--- a/styles/leaflet-overrides.less
+++ b/styles/leaflet-overrides.less
@@ -1,3 +1,7 @@
+.leaflet-bar a {
+ background-position: center center;
+}
+
.mw-kartographer-interactive {
z-index: 0;
diff --git a/styles/link.less b/styles/link.less
new file mode 100644
index 0000000..41c73b4
--- /dev/null
+++ b/styles/link.less
@@ -0,0 +1,111 @@
+@import 'mediawiki.ui/variables';
+@import 'mediawiki.mixins';
+
+/* stylelint-disable no-descending-specificity */
+.mw-kartographer-link,
+.mw-kartographer-maplink {
+ &::not(.mw-kartographer-map) {
+ display: inline;
+ }
+ cursor: pointer;
+}
+
+// The icon only applies to <a> types of `.mw-kartographer-link`
+.mw-kartographer-maplink,
+a.mw-kartographer-link {
+
+
&:not(.mw-kartographer-autostyled):not(.mw-kartographer-map):not(.no-icon) {
+ /**
+ * These two files were copied from OOjs UI repository after
the build process
+ * generated the progressive icons.
+ *
+ * See ./images/COPYING
+ *
+ * The master version of the icon is at:
+ *
https://github.com/wikimedia/oojs-ui/blob/master/src/themes/mediawiki/images/icons/mapPin.svg
+ */
+ .background-image-svg('images/mapPin-progressive.svg',
'images/mapPin-progressive.png');
+ background-position: left -3px;
+ background-repeat: no-repeat;
+ background-size: 18px 18px;
+ padding-left: 19px;
+ margin-left: 2px;
+ }
+
+ // One can display an iconless link by adding `class="no-icon"`
+ &.no-icon {
+ background: none;
+ padding-left: 0;
+ margin-left: 0;
+ }
+}
+
+.skin-minerva {
+ a.mw-kartographer-link,
+ .mw-kartographer-maplink {
+
+
&:not(.mw-kartographer-autostyled):not(.mw-kartographer-map):not(.no-icon) {
+ padding-left: 20px;
+ background-size: 20px 20px;
+ }
+
+ // One can display an iconless link by adding `class="no-icon"`
+ &.no-icon {
+ background: none;
+ padding-left: 0;
+ margin-left: 0;
+ }
+ }
+}
+
+.mw-kartographer-map:hover {
+ .mw-kartographer-fullScreen {
+ background-color: @colorWhite;
+ }
+ .oo-ui-buttonElement-button {
+ background-color: @colorWhite;
+ }
+}
+
+/**
+ * Applied only when JS is enabled.
+ */
+.client-js {
+ .mw-kartographer-map {
+ cursor: pointer;
+ }
+
+ .mw-kartographer-maplink:not(.mw-kartographer-link),
+ .mw-kartographer-map:not(.mw-kartographer-link) {
+ pointer-events: none;
+ cursor: default;
+ }
+}
+
+/**
+ * If `$wgKartographerUseMarkerStyle = true`.
+ */
+a.mw-kartographer-autostyled {
+ display: inline-block;
+
+ position: relative;
+ top: -0.08em;
+
+ box-sizing: content-box;
+ height: 0.85em;
+ border-radius: 1px;
+
+ margin-left: 0;
+ padding: 0.24em 0.42em;
+
+ color: @colorWhite;
+ font-size: 0.85em;
+ font-weight: bold;
+ line-height: 1;
+ text-align: center;
+ vertical-align: middle;
+}
+
+a.mw-kartographer-autostyled:visited {
+ color: @colorWhite;
+}
--
To view, visit https://gerrit.wikimedia.org/r/319247
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I29c3fcac94afcf862fb8da46f371a19abe1057a1
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/Kartographer
Gerrit-Branch: master
Gerrit-Owner: JGirault <[email protected]>
Gerrit-Reviewer: JGirault <[email protected]>
Gerrit-Reviewer: MaxSem <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: Yurik <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
