summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--css/ContactDetailsAvatar.scss6
-rw-r--r--css/icons.scss15
-rw-r--r--img/delete.svg1
-rw-r--r--img/download.svg1
-rw-r--r--img/upload.svg1
-rw-r--r--package-lock.json23
-rw-r--r--package.json1
-rw-r--r--src/components/ContactDetails/ContactDetailsAvatar.vue6
-rw-r--r--webpack.common.js5
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'
}
]
},