From 91dd5c38df05ebb9247df4611703beffa6d08b0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Mon, 4 Mar 2019 12:04:08 +0100 Subject: White icons fix for preview, fix 927 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- css/ContactDetailsAvatar.scss | 6 +++--- css/icons.scss | 15 ++++++++++++++ img/delete.svg | 1 + img/download.svg | 1 + img/upload.svg | 1 + package-lock.json | 23 +++++++++++++++++++--- package.json | 1 + .../ContactDetails/ContactDetailsAvatar.vue | 6 +++--- webpack.common.js | 5 +---- 9 files changed, 46 insertions(+), 13 deletions(-) create mode 100644 img/delete.svg create mode 100644 img/download.svg create mode 100644 img/upload.svg diff --git a/css/ContactDetailsAvatar.scss b/css/ContactDetailsAvatar.scss index b8d1ec8e..c754abea 100644 --- a/css/ContactDetailsAvatar.scss +++ b/css/ContactDetailsAvatar.scss @@ -53,7 +53,7 @@ background-position: center; cursor: pointer; } - label.icon-upload-white { + label.icon-upload-force-white { opacity: .5; z-index: 2; position: absolute; @@ -65,7 +65,7 @@ opacity: .7; } } - &__photo + label.icon-upload-white { + &__photo + label.icon-upload-force-white { opacity: 0; } &__options { @@ -98,7 +98,7 @@ background-size: contain; margin: 50px; } - label.icon-upload-white { + label.icon-upload-force-white { position: relative; } .contact-header-avatar__options { diff --git a/css/icons.scss b/css/icons.scss index 41cc93b3..60cb2b32 100644 --- a/css/icons.scss +++ b/css/icons.scss @@ -39,3 +39,18 @@ .icon-up { @include icon-color('up', 'contacts', $color-black, 1); } + +.icon-delete-force-white { + // using #fffffe to trick the accessibility dark theme icon invert + @include icon-color('delete', 'contacts', '#fffffe', 1); +} + +.icon-download-force-white { + // using #fffffe to trick the accessibility dark theme icon invert + @include icon-color('download', 'contacts', '#fffffe', 1); +} + +.icon-upload-force-white { + // using #fffffe to trick the accessibility dark theme icon invert + @include icon-color('upload', 'contacts', '#fffffe', 1); +} \ No newline at end of file diff --git a/img/delete.svg b/img/delete.svg new file mode 100644 index 00000000..53f0b020 --- /dev/null +++ b/img/delete.svg @@ -0,0 +1 @@ + diff --git a/img/download.svg b/img/download.svg new file mode 100644 index 00000000..dd2389b2 --- /dev/null +++ b/img/download.svg @@ -0,0 +1 @@ + diff --git a/img/upload.svg b/img/upload.svg new file mode 100644 index 00000000..92ca7920 --- /dev/null +++ b/img/upload.svg @@ -0,0 +1 @@ + diff --git a/package-lock.json b/package-lock.json index 24ec12d9..3bb5eff6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2035,8 +2035,8 @@ "dev": true }, "cdav-library": { - "version": "github:nextcloud/cdav-library#99f28e82d5948f95deb408e72af80b6045fcaa4f", - "from": "github:nextcloud/cdav-library#99f28e82d5948f95deb408e72af80b6045fcaa4f", + "version": "github:nextcloud/cdav-library#3f4610b33555555a9d6d0cc1b723277b29caa608", + "from": "github:nextcloud/cdav-library", "requires": { "@babel/polyfill": "^7.2.5" } @@ -6357,6 +6357,12 @@ "brorand": "^1.0.1" } }, + "mime": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.0.tgz", + "integrity": "sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w==", + "dev": true + }, "mime-db": { "version": "1.37.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz", @@ -7105,7 +7111,7 @@ }, "p-is-promise": { "version": "2.0.0", - "resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-2.0.0.tgz", + "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.0.0.tgz", "integrity": "sha512-pzQPhYMCAgLAKPWD2jC3Se9fEfrD9npNos0y150EeqZll7akhEgGhTW/slB6lHku8AvYGiJ+YJ5hfHKePPgFWg==", "dev": true }, @@ -10043,6 +10049,17 @@ } } }, + "url-loader": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-1.1.2.tgz", + "integrity": "sha512-dXHkKmw8FhPqu8asTc1puBfe3TehOCo2+RmOOev5suNCIYBcT626kxiWg1NBVkwc4rO8BGa7gP70W7VXuqHrjg==", + "dev": true, + "requires": { + "loader-utils": "^1.1.0", + "mime": "^2.0.3", + "schema-utils": "^1.0.0" + } + }, "use": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", diff --git a/package.json b/package.json index 6cceeaf1..143da93a 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ "stylelint-config-recommended-scss": "^3.2.0", "stylelint-scss": "^3.5.4", "stylelint-webpack-plugin": "^0.10.5", + "url-loader": "^1.1.2", "vue-loader": "^15.7.0", "vue-template-compiler": "^2.6.8", "webpack": "^4.29.6", diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue index fccbd25f..54636f17 100644 --- a/src/components/ContactDetails/ContactDetailsAvatar.vue +++ b/src/components/ContactDetails/ContactDetailsAvatar.vue @@ -32,9 +32,9 @@