From ffcdc96a0b920a9cecc428dba53978b4dc8c66cd Mon Sep 17 00:00:00 2001
From: Marin Treselj <marin@pixelipo.com>
Date: Tue, 11 Jul 2017 14:06:12 +0200
Subject: [PATCH] Proof of concept #5593 - inline SVG icon for icon-contacts
Signed-off-by: Marin Treselj <marin@pixelipo.com>
---
apps/theming/css/theming.scss | 4 ++--
core/css/icons.scss | 22 ++++++++++++++--------
core/img/places/contacts-dark.svg | 1 -
core/img/places/contacts.svg | 2 +-
core/templates/layout.user.php | 4 +++-
settings/js/federationsettingsview.js | 4 ++--
6 files changed, 22 insertions(+), 15 deletions(-)
delete mode 100644 core/img/places/contacts-dark.svg
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index 20b84d2a0d3..1f18cc068c2 100644
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -20,8 +20,8 @@
filter: invert(1);
filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}
- #contactsmenu .icon-contacts {
- background-image: url('../../../core/img/places/contacts-dark.svg');
+ #contactsmenu .icon-contacts svg path {
+ fill: #000;
}
#settings .icon-settings-white {
background-image: url('../../../core/img/actions/settings-dark.svg');
diff --git a/core/css/icons.scss b/core/css/icons.scss
index b2702a29950..e694d807ba5 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -18,6 +18,20 @@
background-position: center;
min-width: 16px;
min-height: 16px;
+ display: inline-flex;
+ align-self: center;
+ position: relative;
+}
+
+[class^='icon-'] svg,
+[class*=' icon-'] svg {
+ height: 16px;
+ width: 16px;
+ vertical-align: -3px; // counter default DOM offset
+}
+
+.icon-white svg path {
+ fill: $color-primary-text;
}
.icon-breadcrumb {
@@ -445,14 +459,6 @@ img, object, video, button, textarea, input, select {
background-image: url('../img/places/calendar-dark.svg?v=1');
}
-.icon-contacts {
- background-image: url('../img/places/contacts.svg?v=1');
-}
-
-.icon-contacts-dark {
- background-image: url('../img/places/contacts-dark.svg?v=1');
-}
-
.icon-files {
background-image: url('../img/places/files.svg?v=1');
}
diff --git a/core/img/places/contacts-dark.svg b/core/img/places/contacts-dark.svg
deleted file mode 100644
index 56ff262e91f..00000000000
--- a/core/img/places/contacts-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewbox="0 0 32 32"><path d="M9.24 6.67c-1.955 0-3.613 1.43-3.613 3.275.014.583.066 1.302.414 2.823v.037l.038.038c.112.32.275.503.49.753.215.25.47.544.715.79l.075.076c.048.21.107.436.15.64.117.54.105.922.076 1.053-.84.295-1.885.647-2.823 1.054-.526.228-1.002.433-1.392.677-.39.244-.777.43-.903.978a.473.473 0 0 0 0 .076c-.123 1.13-.31 2.793-.452 3.915a.618.618 0 0 0 .3.603c1.704.92 4.32 1.29 6.927 1.28 2.607-.01 5.202-.403 6.85-1.28a.618.618 0 0 0 .3-.603c-.044-.35-.1-1.14-.15-1.92-.05-.778-.09-1.543-.15-1.994a.607.607 0 0 0-.15-.3c-.524-.626-1.306-1.008-2.22-1.393-.836-.352-1.815-.717-2.786-1.13-.055-.12-.11-.473 0-1.016.03-.144.074-.3.113-.45l.263-.3c.216-.248.447-.506.64-.754.192-.25.35-.462.452-.753l.037-.038c.393-1.588.393-2.25.413-2.823v-.037c0-1.845-1.658-3.275-3.613-3.275zm10.336-3.005c-2.85 0-5.268 2.084-5.268 4.774.02.85.096 1.898.604 4.115v.055l.055.055c.162.466.4.733.713 1.097s.687.793 1.043 1.153c.04.042.068.068.11.11.07.306.155.636.22.932.168.788.15 1.346.11 1.537-1.226.43-2.75.942-4.117 1.536-.768.334-1.462.632-2.03.988-.57.356-1.134.625-1.317 1.427a.67.67 0 0 0 0 .11c-.18 1.648-.452 4.07-.66 5.707a.9.9 0 0 0 .44.878c2.48 1.34 6.295 1.88 10.096 1.865s7.584-.586 9.987-1.865a.9.9 0 0 0 .44-.878c-.067-.512-.148-1.665-.22-2.8-.072-1.133-.134-2.25-.22-2.907a.884.884 0 0 0-.22-.44c-.763-.91-1.903-1.468-3.237-2.03-1.217-.513-2.645-1.045-4.06-1.646-.08-.177-.16-.69 0-1.483.042-.212.108-.44.164-.658.133-.15.237-.272.384-.44.315-.36.652-.735.933-1.098.28-.362.51-.673.66-1.097l.053-.055c.574-2.315.574-3.28.604-4.116V8.44c0-2.69-2.418-4.775-5.268-4.775z"/></svg>
diff --git a/core/img/places/contacts.svg b/core/img/places/contacts.svg
index 4e6206db09c..56ff262e91f 100644
--- a/core/img/places/contacts.svg
+++ b/core/img/places/contacts.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewbox="0 0 32 32"><path d="M9.24 6.67c-1.955 0-3.613 1.43-3.613 3.275.014.583.066 1.302.414 2.823v.037l.038.038c.112.32.275.503.49.753.215.25.47.544.715.79l.075.076c.048.21.107.436.15.64.117.54.105.922.076 1.053-.84.295-1.885.647-2.823 1.054-.526.228-1.002.433-1.392.677-.39.244-.777.43-.903.978a.473.473 0 0 0 0 .076c-.123 1.13-.31 2.793-.452 3.915a.618.618 0 0 0 .3.603c1.704.92 4.32 1.29 6.927 1.28 2.607-.01 5.202-.403 6.85-1.28a.618.618 0 0 0 .3-.603c-.044-.35-.1-1.14-.15-1.92-.05-.778-.09-1.543-.15-1.994a.607.607 0 0 0-.15-.3c-.524-.626-1.306-1.008-2.22-1.393-.836-.352-1.815-.717-2.786-1.13-.055-.12-.11-.473 0-1.016.03-.144.074-.3.113-.45l.263-.3c.216-.248.447-.506.64-.754.192-.25.35-.462.452-.753l.037-.038c.393-1.588.393-2.25.413-2.823v-.037c0-1.845-1.658-3.275-3.613-3.275zm10.336-3.005c-2.85 0-5.268 2.084-5.268 4.774.02.85.096 1.898.604 4.115v.055l.055.055c.162.466.4.733.713 1.097s.687.793 1.043 1.153c.04.042.068.068.11.11.07.306.155.636.22.932.168.788.15 1.346.11 1.537-1.226.43-2.75.942-4.117 1.536-.768.334-1.462.632-2.03.988-.57.356-1.134.625-1.317 1.427a.67.67 0 0 0 0 .11c-.18 1.648-.452 4.07-.66 5.707a.9.9 0 0 0 .44.878c2.48 1.34 6.295 1.88 10.096 1.865s7.584-.586 9.987-1.865a.9.9 0 0 0 .44-.878c-.067-.512-.148-1.665-.22-2.8-.072-1.133-.134-2.25-.22-2.907a.884.884 0 0 0-.22-.44c-.763-.91-1.903-1.468-3.237-2.03-1.217-.513-2.645-1.045-4.06-1.646-.08-.177-.16-.69 0-1.483.042-.212.108-.44.164-.658.133-.15.237-.272.384-.44.315-.36.652-.735.933-1.098.28-.362.51-.673.66-1.097l.053-.055c.574-2.315.574-3.28.604-4.116V8.44c0-2.69-2.418-4.775-5.268-4.775z" fill="#fff"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewbox="0 0 32 32"><path d="M9.24 6.67c-1.955 0-3.613 1.43-3.613 3.275.014.583.066 1.302.414 2.823v.037l.038.038c.112.32.275.503.49.753.215.25.47.544.715.79l.075.076c.048.21.107.436.15.64.117.54.105.922.076 1.053-.84.295-1.885.647-2.823 1.054-.526.228-1.002.433-1.392.677-.39.244-.777.43-.903.978a.473.473 0 0 0 0 .076c-.123 1.13-.31 2.793-.452 3.915a.618.618 0 0 0 .3.603c1.704.92 4.32 1.29 6.927 1.28 2.607-.01 5.202-.403 6.85-1.28a.618.618 0 0 0 .3-.603c-.044-.35-.1-1.14-.15-1.92-.05-.778-.09-1.543-.15-1.994a.607.607 0 0 0-.15-.3c-.524-.626-1.306-1.008-2.22-1.393-.836-.352-1.815-.717-2.786-1.13-.055-.12-.11-.473 0-1.016.03-.144.074-.3.113-.45l.263-.3c.216-.248.447-.506.64-.754.192-.25.35-.462.452-.753l.037-.038c.393-1.588.393-2.25.413-2.823v-.037c0-1.845-1.658-3.275-3.613-3.275zm10.336-3.005c-2.85 0-5.268 2.084-5.268 4.774.02.85.096 1.898.604 4.115v.055l.055.055c.162.466.4.733.713 1.097s.687.793 1.043 1.153c.04.042.068.068.11.11.07.306.155.636.22.932.168.788.15 1.346.11 1.537-1.226.43-2.75.942-4.117 1.536-.768.334-1.462.632-2.03.988-.57.356-1.134.625-1.317 1.427a.67.67 0 0 0 0 .11c-.18 1.648-.452 4.07-.66 5.707a.9.9 0 0 0 .44.878c2.48 1.34 6.295 1.88 10.096 1.865s7.584-.586 9.987-1.865a.9.9 0 0 0 .44-.878c-.067-.512-.148-1.665-.22-2.8-.072-1.133-.134-2.25-.22-2.907a.884.884 0 0 0-.22-.44c-.763-.91-1.903-1.468-3.237-2.03-1.217-.513-2.645-1.045-4.06-1.646-.08-.177-.16-.69 0-1.483.042-.212.108-.44.164-.658.133-.15.237-.272.384-.44.315-.36.652-.735.933-1.098.28-.362.51-.673.66-1.097l.053-.055c.574-2.315.574-3.28.604-4.116V8.44c0-2.69-2.418-4.775-5.268-4.775z"/></svg>
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 6b9db9389ba..b3bb553d668 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -107,7 +107,9 @@
<button class="icon-close-white" type="reset"></button>
</form>
<div id="contactsmenu">
- <div class="icon-contacts menutoggle"></div>
+ <div class="icon-contacts icon-white menutoggle">
+ <?php include('core/img/places/contacts.svg'); ?>
+ </div>
<div class="menu"></div>
</div>
<div id="settings">
diff --git a/settings/js/federationsettingsview.js b/settings/js/federationsettingsview.js
index 1a0a3dcb4d1..d58098257bd 100644
--- a/settings/js/federationsettingsview.js
+++ b/settings/js/federationsettingsview.js
@@ -181,14 +181,14 @@
_setFieldScopeIcon: function(field, scope) {
var $icon = this.$('#' + field + 'form > h2 > span');
$icon.removeClass('icon-password');
- $icon.removeClass('icon-contacts-dark');
+ $icon.removeClass('icon-contacts');
$icon.removeClass('icon-link');
switch (scope) {
case 'private':
$icon.addClass('icon-password');
break;
case 'contacts':
- $icon.addClass('icon-contacts-dark');
+ $icon.addClass('icon-contacts');
break;
case 'public':
$icon.addClass('icon-link');
--
GitLab