diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-03-04 12:04:08 +0100 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-03-04 12:04:08 +0100 |
commit | 91dd5c38df05ebb9247df4611703beffa6d08b0e (patch) | |
tree | b0ed7e95daf2b8acfa811efc6c58e41cfc1b9f8b | |
parent | 8110491a437ad002d0519737f9a2ac65b87dd5bf (diff) |
White icons fix for preview, fix 927
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
-rw-r--r-- | css/ContactDetailsAvatar.scss | 6 | ||||
-rw-r--r-- | css/icons.scss | 15 | ||||
-rw-r--r-- | img/delete.svg | 1 | ||||
-rw-r--r-- | img/download.svg | 1 | ||||
-rw-r--r-- | img/upload.svg | 1 | ||||
-rw-r--r-- | package-lock.json | 23 | ||||
-rw-r--r-- | package.json | 1 | ||||
-rw-r--r-- | src/components/ContactDetails/ContactDetailsAvatar.vue | 6 | ||||
-rw-r--r-- | webpack.common.js | 5 |
9 files changed, 46 insertions, 13 deletions
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 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 16 16" width="16" height="16"><path d="M6.5 1L6 2H3c-.554 0-1 .446-1 1v1h12V3c0-.554-.446-1-1-1h-3l-.5-1zM3 5l.875 9c.06.55.573 1 1.125 1h6c.552 0 1.064-.45 1.125-1L13 5z"/></svg> 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 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 16 16" width="16" height="16"><path d="M6 1h4v7h5l-7 7-7-7h5z"/></svg> 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 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 16 16" width="16" height="16"><path d="M8 1L2 7h4v4h4V7h4zM2 13v2h12v-2z"/></svg> 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 @@ <input id="contact-avatar-upload" type="file" class="hidden" accept="image/*" @change="processFile"> <label v-if="!contact.addressbook.readOnly" v-tooltip.auto="t('contacts', 'Upload a new picture')" - for="contact-avatar-upload" class="icon-upload-white" @click="processFile" /> - <div v-if="maximizeAvatar && !contact.addressbook.readOnly" class="icon-delete-white" @click="removePhoto" /> - <a v-if="maximizeAvatar" :href="contact.url + '?photo'" class="icon-download-white" /> + for="contact-avatar-upload" class="icon-upload-force-white" @click="processFile" /> + <div v-if="maximizeAvatar && !contact.addressbook.readOnly" class="icon-delete-force-white" @click="removePhoto" /> + <a v-if="maximizeAvatar" :href="contact.url + '?photo'" class="icon-download-force-white" /> </div> </div> </div> diff --git a/webpack.common.js b/webpack.common.js index e88d7132..5320f430 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -37,10 +37,7 @@ module.exports = { }, { test: /\.(png|jpg|gif|svg)$/, - loader: 'file-loader', - options: { - name: '[name].[ext]?[hash]' - } + loader: 'url-loader' } ] }, |