From ffcdc96a0b920a9cecc428dba53978b4dc8c66cd Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Tue, 11 Jul 2017 14:06:12 +0200 Subject: Proof of concept #5593 - inline SVG icon for icon-contacts Signed-off-by: Marin Treselj --- 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 @@ - 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 @@ - + 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 @@
-
+
+ +
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'); -- cgit v1.2.3