From 308e1c0ed29f790f1b0e38b9f520709ad713d08b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Sat, 23 Sep 2017 18:12:59 +0200
Subject: [PATCH] Icons & default classes Changed categories order same as app
 store
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 core/css/icons.scss                   | 54 +++++++++++++++++++++++++++
 core/img/actions/close.svg            |  5 ++-
 core/img/categories/auth.svg          |  1 +
 core/img/categories/bundles.svg       |  1 +
 core/img/categories/customization.svg |  1 +
 core/img/categories/files.svg         |  1 +
 core/img/categories/integration.svg   |  1 +
 core/img/categories/monitoring.svg    |  1 +
 core/img/categories/multimedia.svg    |  1 +
 core/img/categories/office.svg        |  1 +
 core/img/categories/organization.svg  |  1 +
 core/img/categories/social.svg        |  1 +
 settings/js/apps.js                   |  8 ++--
 settings/templates/apps.php           |  4 +-
 14 files changed, 74 insertions(+), 7 deletions(-)
 create mode 100644 core/img/categories/auth.svg
 create mode 100644 core/img/categories/bundles.svg
 create mode 100644 core/img/categories/customization.svg
 create mode 100644 core/img/categories/files.svg
 create mode 100644 core/img/categories/integration.svg
 create mode 100644 core/img/categories/monitoring.svg
 create mode 100644 core/img/categories/multimedia.svg
 create mode 100644 core/img/categories/office.svg
 create mode 100644 core/img/categories/organization.svg
 create mode 100644 core/img/categories/social.svg

diff --git a/core/css/icons.scss b/core/css/icons.scss
index 38b4590e43f..7c47a3e12c8 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -488,3 +488,57 @@ img, object, video, button, textarea, input, select {
 .icon-picture {
 	background-image: url('../img/places/picture.svg?v=1');
 }
+
+/* APP CATEGORIES ------------------------------------------------------------------- */
+.icon-category-installed {
+	background-image: url('../img/actions/user.svg?v=1');
+}
+.icon-category-enabled {
+	background-image: url('../img/actions/checkmark.svg?v=1');
+}
+.icon-category-disabled {
+	background-image: url('../img/actions/close.svg?v=1');
+}
+.icon-category-app-bundles {
+	background-image: url('../img/categories/bundles.svg?v=1');
+}
+
+.icon-category-files {
+	background-image: url('../img/categories/files.svg?v=1');
+}
+
+.icon-category-social {
+	background-image: url('../img/categories/social.svg?v=1');
+}
+
+.icon-category-office {
+	background-image: url('../img/categories/office.svg?v=1');
+}
+
+.icon-category-auth {
+	background-image: url('../img/categories/auth.svg?v=1');
+}
+
+.icon-category-monitoring {
+	background-image: url('../img/categories/monitoring.svg?v=1');
+}
+
+.icon-category-multimedia {
+	background-image: url('../img/categories/multimedia.svg?v=1');
+}
+
+.icon-category-organization {
+	background-image: url('../img/categories/organization.svg?v=1');
+}
+
+.icon-category-customization {
+	background-image: url('../img/categories/customization.svg?v=1');
+}
+
+.icon-category-integration {
+	background-image: url('../img/categories/integration.svg?v=1');
+}
+
+.icon-category-tools {
+	background-image: url('../img/actions/settings-dark.svg?v=1');
+}
diff --git a/core/img/actions/close.svg b/core/img/actions/close.svg
index 012c34844ca..c58fe6379f3 100644
--- a/core/img/actions/close.svg
+++ b/core/img/actions/close.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><defs><filter id="a" height="1.599" width="1.601" y="-.3" x="-.3" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="1.239"/></filter></defs><path filter="url(#a)" stroke="#fff" stroke-width="2" d="M12.95 11.536l-1.414 1.414L8 9.414 4.465 12.95 3.05 11.536 6.586 8 3.05 4.464 4.465 3.05 8 6.586l3.516-3.555 1.434 1.434L9.414 8z" fill="#fff"/><path d="M12.95 11.536l-1.414 1.414L8 9.414 4.465 12.95 3.05 11.536 6.586 8 3.05 4.464 4.465 3.05 8 6.586l3.516-3.555 1.434 1.434L9.414 8z"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1">
+ <path d="m12.95 11.536l-1.414 1.414-3.536-3.536-3.535 3.536-1.415-1.414 3.536-3.536-3.536-3.536 1.415-1.414 3.535 3.536 3.516-3.555 1.434 1.434-3.536 3.535z"/>
+</svg>
diff --git a/core/img/categories/auth.svg b/core/img/categories/auth.svg
new file mode 100644
index 00000000000..e770e396ab7
--- /dev/null
+++ b/core/img/categories/auth.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.1667,0,0,1.1667,-1.3333,-1.3333)"><path d="m10.213 2.1807-0.36662 0.63949-0.54909 0.95589-0.36327 0.63279h-0.00167l-0.5491 0.95589-1.1936 2.0775a3.3075 3.3075 0 0 0-3.4636 1.6021 3.3075 3.3075 0 0 0 1.2187 4.5149 3.3075 3.3075 0 0 0 4.5166-1.2187 3.3075 3.3075 0 0 0-0.91236-4.3107l1.1099-1.9319 0.95589 0.54909 0.54909-0.95589-0.95421-0.54909 0.36327-0.63279 1.592 0.91404 0.54909-0.95589-1.592-0.91404 0.36662-0.63949zm-3.7097 6.6761a1.8375 1.8375 0 0 1 1.0061 0.24274 1.8375 1.8375 0 0 1 0.67632 2.5077 1.8375 1.8375 0 0 1-2.5077 0.678 1.8375 1.8375 0 0 1-0.67799-2.5094 1.8375 1.8375 0 0 1 1.5033-0.91906z"/></g></svg>
diff --git a/core/img/categories/bundles.svg b/core/img/categories/bundles.svg
new file mode 100644
index 00000000000..4ad1413ae04
--- /dev/null
+++ b/core/img/categories/bundles.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.1667 0 0 1.1667 -1.3333 -1.3333)" stroke-width=".85714"><path d="m2.8571 5.3008v7.1992h10.286v-7.1992zm3.0857 1.6127h4.1143v1.2294h-4.1143z" style="paint-order:stroke fill markers"/><rect x="2" y="3.0714" width="12" height="1.6607" style="paint-order:stroke fill markers"/></g></svg>
diff --git a/core/img/categories/customization.svg b/core/img/categories/customization.svg
new file mode 100644
index 00000000000..7136e4d5550
--- /dev/null
+++ b/core/img/categories/customization.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" version="1" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.0085314 0 0 -.008521 .82084 12.998)"><path d="m1662 919c0-26-7.6667-61.333-23-106-31.333-89.333-86.167-161.83-164.5-217.5s-164.5-83.5-258.5-83.5c-123.33 0-228.83 43.833-316.5 131.5s-131.5 193.17-131.5 316.5c0 123.33 43.833 228.83 131.5 316.5s193.17 131.5 316.5 131.5c38.667 0 79.167-5.5 121.5-16.5s78.167-26.5 107.5-46.5c10.667-7.3333 16-16.667 16-28s-5.3333-20.667-16-28l-293-169v-224l193-107c285 165 251.71 146.08 285 165 10 0 17.833-3.3333 23.5-10s8.5-15 8.5-25z" stroke-width="117.29"/><path d="m743.61 746.2-710.38-743.34 256.18-245.49 702.6 734.86c-53.53 21.913-102.59 55.092-146.98 99.478-46.397 46.397-79.576 98.102-101.42 154.49z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="100" stroke-width="46.914" style="paint-order:stroke fill markers"/></g></svg>
diff --git a/core/img/categories/files.svg b/core/img/categories/files.svg
new file mode 100644
index 00000000000..8ed1bf118a7
--- /dev/null
+++ b/core/img/categories/files.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path d="M1.457 1.997c-.25 0-.46.21-.46.46v11.08c0 .26.202.46.46.46h13.08c.258 0 .46-.2.46-.46V4.46c0-.25-.21-.463-.46-.463h-6.54l-2-2z" /></svg>
\ No newline at end of file
diff --git a/core/img/categories/integration.svg b/core/img/categories/integration.svg
new file mode 100644
index 00000000000..b2cbc9531c0
--- /dev/null
+++ b/core/img/categories/integration.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" version="1" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.4075 1.3342 -1.3389 1.3956 12.131 -13.318)"><g transform="translate(0 .48095)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="100" stroke-width=".20654"><rect transform="scale(-1)" x="-5.2903" y="-7.9703" width=".42984" height="2.6766" style="paint-order:fill markers stroke"/><rect transform="scale(-1)" x="-7.2463" y="-7.9703" width=".42984" height="2.6766" style="paint-order:fill markers stroke"/></g><g transform="translate(.010456)" stroke-width=".51634"><path d="m3.9961 7.6562a2.0702 2.3734 0 0 0-0.023438 0.3457 2.0702 2.3734 0 0 0 2.0703 2.373 2.0702 2.3734 0 0 0 2.0703-2.373 2.0702 2.3734 0 0 0-0.023437-0.3457z" style="paint-order:fill markers stroke"/><rect x="5.6561" y="9.2458" width=".7737" height="4.7258" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="100" stroke-width=".20654" style="paint-order:fill markers stroke"/></g></g></svg>
diff --git a/core/img/categories/monitoring.svg b/core/img/categories/monitoring.svg
new file mode 100644
index 00000000000..d672b660bac
--- /dev/null
+++ b/core/img/categories/monitoring.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" version="1.0" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="m3.9963 16h4.7819l4.4208-8.9881 5.73 16.236 4.237-7.244 4.839-4e-3" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="100" stroke-width="4"/></svg>
diff --git a/core/img/categories/multimedia.svg b/core/img/categories/multimedia.svg
new file mode 100644
index 00000000000..3ea1ed2e540
--- /dev/null
+++ b/core/img/categories/multimedia.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path d="M1.344 2A.445.445 0 0 0 1 2.438v11.124c0 .23.212.44.438.44h13.125a.457.457 0 0 0 .437-.44V2.61c0-.337-.264-.61-.515-.61zM2 3h12v5l-1-1-3 4-3-3-4 4H2zm2.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z" /></svg>
\ No newline at end of file
diff --git a/core/img/categories/office.svg b/core/img/categories/office.svg
new file mode 100644
index 00000000000..0cb37f3b265
--- /dev/null
+++ b/core/img/categories/office.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path d="M2.35 1.002A.45.45 0 0 0 2 1.44V14.56c0 .232.206.44.432.44H13.57a.452.452 0 0 0 .432-.438V4.42a.458.458 0 0 0-.055-.192l-3.312-3.2a.427.427 0 0 0-.135-.026H2.43a.424.424 0 0 0-.08 0zM4 3h6v1H4V3zm0 3h5v1H4V6zm0 3h8v1H4V9zm0 3h4v1H4v-1z" /></svg>
\ No newline at end of file
diff --git a/core/img/categories/organization.svg b/core/img/categories/organization.svg
new file mode 100644
index 00000000000..10bc79fa063
--- /dev/null
+++ b/core/img/categories/organization.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><rect rx=".5" ry=".5" height="4" width="4" y="1" x="1"/><rect rx=".5" ry=".5" height="1" width="9" y="2" x="6"/><rect rx=".5" ry=".5" height="4" width="4" y="6" x="1"/><rect rx=".5" ry=".5" height="1" width="9" y="7" x="6"/><rect rx=".5" ry=".5" height="4" width="4" y="11" x="1"/><rect rx=".5" ry=".5" height="1" width="9" y="12" x="6"/></svg>
\ No newline at end of file
diff --git a/core/img/categories/social.svg b/core/img/categories/social.svg
new file mode 100644
index 00000000000..7953cd06878
--- /dev/null
+++ b/core/img/categories/social.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path d="M4.616 3.333c-.978 0-1.807.714-1.807 1.637.006.29.032.65.206 1.41v.02l.02.02c.055.16.136.25.244.375s.235.272.357.396l.038.038c.024.105.053.22.075.32.058.27.052.462.038.527-.42.148-.943.323-1.412.527-.263.114-.5.217-.696.34-.195.12-.39.213-.452.488v.038c-.06.565-.155 1.396-.226 1.957a.31.31 0 0 0 .15.3c.852.46 2.16.646 3.464.64 1.303-.004 2.6-.2 3.425-.64a.31.31 0 0 0 .15-.3c-.02-.176-.05-.57-.074-.96-.025-.39-.046-.772-.075-.997a.304.304 0 0 0-.075-.15c-.26-.313-.652-.505-1.11-.697-.417-.175-.907-.358-1.392-.564-.028-.06-.055-.236 0-.508.014-.073.037-.15.056-.226.045-.05.08-.093.13-.15.11-.123.224-.252.32-.377.097-.124.176-.23.227-.376l.018-.02c.197-.794.197-1.125.207-1.41v-.02c0-.923-.83-1.638-1.806-1.638zM9.784 1.83c-1.426 0-2.635 1.042-2.635 2.387.01.425.048.95.3 2.058v.027l.03.028c.08.233.2.366.355.548.157.182.344.397.522.577l.055.055c.035.153.078.318.11.466.084.394.075.673.054.768-.612.215-1.374.47-2.058.768-.383.167-.73.316-1.015.494-.284.178-.566.313-.658.714a.335.335 0 0 0 0 .055c-.09.824-.226 2.035-.33 2.853a.45.45 0 0 0 .22.44c1.24.67 3.148.94 5.048.932s3.792-.293 4.994-.933a.45.45 0 0 0 .22-.44 29.58 29.58 0 0 1-.11-1.398c-.036-.57-.067-1.127-.11-1.456a.442.442 0 0 0-.11-.22c-.38-.455-.952-.733-1.62-1.014-.607-.257-1.32-.523-2.03-.823-.04-.09-.078-.345 0-.74.022-.107.055-.22.083-.33.067-.075.12-.136.192-.22.158-.18.327-.367.467-.55.14-.18.254-.335.328-.547l.028-.028c.286-1.157.286-1.64.3-2.058v-.027c0-1.345-1.208-2.387-2.633-2.387z" /></svg>
\ No newline at end of file
diff --git a/settings/js/apps.js b/settings/js/apps.js
index 258b0f4adcc..b400572a542 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -40,10 +40,10 @@ OC.Settings.Apps = OC.Settings.Apps || {
 			this._loadCategoriesCall.abort();
 		}
 
-		var categories = [
-			{displayName: t('settings', 'Enabled apps'), ident: 'enabled', id: '0'},
-			{displayName: t('settings', 'Disabled apps'), ident: 'disabled', id: '1'},
-			{displayName: t('settings', 'Your apps'), ident: 'installed', id: '2'}
+		var categories = [,
+			{displayName: t('settings', 'Your apps'), ident: 'installed', id: '0'},
+			{displayName: t('settings', 'Enabled apps'), ident: 'enabled', id: '1',},
+			{displayName: t('settings', 'Disabled apps'), ident: 'disabled', id: '2'}
 		];
 
 		var source   = $("#categories-template").html();
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index e32a524f78a..91a73fcbe56 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -18,13 +18,13 @@ script(
 <script id="categories-template" type="text/x-handlebars-template">
 {{#each this}}
 	<li id="app-category-{{ident}}" data-category-id="{{ident}}" tabindex="0">
-		<a href="#">{{displayName}}</a>
+		<a href="#" class="icon-category-{{ident}}">{{displayName}}</a>
 	</li>
 {{/each}}
 
 <?php if($_['appstoreEnabled']): ?>
 	<li>
-		<a class="app-external" target="_blank" rel="noreferrer" href="https://docs.nextcloud.org/server/12/developer_manual/"><?php p($l->t('Developer documentation'));?> ↗</a>
+		<a class="app-external icon-info" target="_blank" rel="noreferrer" href="https://docs.nextcloud.org/server/12/developer_manual/"><?php p($l->t('Developer documentation'));?> ↗</a>
 	</li>
 <?php endif; ?>
 </script>