Svg icon api sass function and upgrade of all styles

Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>

apps/accessibility/css/themedark.scss

@@ -37,9 +37,6 @@ $color-border-dark: lighten($color-main-background, 14%);
 		}
 	}
 }
-.federation-menu .icon-federation-menu {
-	filter: invert(100%);
-}
 .bubble,
 .app-navigation-entry-menu,
 .popovermenu,

apps/encryption/css/settings-personal.css → apps/encryption/css/settings-personal.scss

@@ -11,5 +11,5 @@
 
 /* icons for sidebar */
 .nav-icon-basic-encryption-module {
-	background-image: url('../img/app.svg?v=1');
+	background-image: icon-color('app', 'encryption', $color-black);
 }

apps/files/css/files.scss

@@ -84,27 +84,26 @@
 
 /* icons for sidebar */
 .nav-icon-files {
-	background-image: url('../img/folder.svg?v=1');
+	background-image: icon-color(folder, 'files', $color-black);
 }
 .nav-icon-recent {
-	background-image: url('../img/recent.svg?v=1');
+	background-image: icon-color(recent, 'files', $color-black);
 }
 .nav-icon-favorites {
-	background-image: url('../img/star.svg?v=1');
+	background-image: icon-color(star, 'files', $color-black);
 }
 .nav-icon-sharingin,
-.nav-icon-sharingout,
-.nav-icon-shareoverview {
-	background-image: url('../img/share.svg?v=1');
+.nav-icon-sharingout {
+	background-image: icon-color(share, 'files', $color-black);
 }
 .nav-icon-sharinglinks {
-	background-image: url('../img/public.svg?v=1');
+	background-image: icon-color(public, 'files', $color-black);
 }
 .nav-icon-extstoragemounts {
-	background-image: url('../img/external.svg?v=1');
+	background-image: icon-color(external, 'files', $color-black);
 }
 .nav-icon-trashbin {
-	background-image: url('../img/delete.svg?v=1');
+	background-image: icon-color(delete, 'files', $color-black);
 }
 .nav-icon-deletedshares {
 	background-image: url('../img/unshare.svg?v=1');

apps/files_external/css/settings.scss

@@ -122,5 +122,5 @@ td.mountPoint, td.backend { width:160px; }
 }
 
 .nav-icon-external-storage {
-	background-image: url('../img/app-dark.svg?v=1');
+	background-image: icon-color('app-dark', 'files_external', $color-black);
 }

core/Controller/SvgController.php

@@ -55,12 +55,13 @@ public function __construct(string $appName,
 	 *
 	 * Generate svg from filename with the requested color
 	 *
+	 * @param string $folder
 	 * @param string $fileName
 	 * @param string $color
 	 * @return DataDisplayResponse|NotFoundException
 	 */
-	public function getSvgFromCore(string $fileName, string $color = 'ffffff') {
-		$path = $this->serverRoot . "/core/img/actions/$fileName.svg";
+	public function getSvgFromCore(string $folder, string $fileName, string $color = 'ffffff') {
+		$path = $this->serverRoot . "/core/img/$folder/$fileName.svg";
 		return $this->getSvg($path, $color);
 	}
 
@@ -70,11 +71,18 @@ public function getSvgFromCore(string $fileName, string $color = 'ffffff') {
 	 *
 	 * Generate svg from filename with the requested color
 	 *
+	 * @param string $app
 	 * @param string $fileName
 	 * @param string $color
 	 * @return DataDisplayResponse|NotFoundException
 	 */
 	public function getSvgFromApp(string $app, string $fileName, string $color = 'ffffff') {
+
+		if ($app === 'settings') {
+			$path = $this->serverRoot . "/settings/img/$fileName.svg";
+			return $this->getSvg($path, $color);
+		}
+
 		$appPath = \OC_App::getAppWebPath($app);
 		if (!$appPath) {
 			return new NotFoundResponse();

core/css/functions.scss

@@ -0,0 +1,43 @@
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ ([email protected])
+ *
+ * @author John Molakvoæ (skjnldsv) <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/**
+ * SVG COLOR API
+ * 
+ * @param string $icon the icon filename
+ * @param string $dir the icon folder within /core/img if $core or app name
+ * @param string $color the desired color in hexadecimal
+ * @param bool [$core] search icon in core
+ *
+ * @returns string the url to the svg api endpoint
+ */
+ @function icon-color($icon, $dir, $color, $core: false) {
+	// remove # from color
+	$index: str-index($color, '#');
+	@if $index {
+		$color: str-slice($color, 2);
+	}
+	@if $core {
+		@return url('#{$webroot}/svg/core/#{$dir}/#{$icon}/#{$color}?v=1');
+	}
+	@return url('#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=1');
+}

core/css/header.scss

@@ -322,7 +322,6 @@ nav[role='navigation'] {
 }
 
 /* Apps management */
-
 #apps {
 	max-height: calc(100vh - 100px);
 	overflow: auto;
@@ -336,7 +335,6 @@ nav[role='navigation'] {
 }
 
 /* USER MENU -----------------------------------------------------------------*/
-
 #settings {
 	display: inline-block;
 	height: 100%;
@@ -405,6 +403,7 @@ nav[role='navigation'] {
 	}
 }
 
+/* Settings menu */
 #expanddiv {
 	&.menu {
 		right: 17px;
@@ -438,6 +437,7 @@ nav[role='navigation'] {
 	}
 }
 
+/* Apps menu */
 #appmenu {
 	display: inline-block;
 	width: auto;
@@ -585,3 +585,57 @@ nav[role='navigation'] {
 		top: 50px;
 	}
 }
+
+/* SEARCHBOX --------------------------------------------------------------- */
+.searchbox {
+	position: relative;
+	display: flex;
+	align-items: center;
+	input[type='search'] {
+		position: relative;
+		font-size: 1.2em;
+		padding: 3px;
+		padding-left: 25px;
+		padding-right: 20px;
+		background-color: transparent;
+		color: var(--color-primary-text);
+		border: 0;
+		border-radius: var(--border-radius);
+		height: 34px;
+		width: 0;
+		cursor: pointer;
+		-webkit-transition: all 100ms;
+		transition: all 100ms;
+		opacity: .6;
+		&:focus, &:active, &:valid {
+			background-position-x: 6px;
+			color: var(--color-primary-text);
+			width: 155px;
+			cursor: text;
+			background-color: var(--color-primary) !important;
+			border: 1px solid var(--color-primary-text-dark) !important;
+		}
+		&:hover, &:focus, &:active {
+			opacity: 1;
+		}
+		& ~ .icon-close-white {
+			display: inline;
+			position: absolute;
+			width: 30px;
+			height: 100%;
+			right: 0;
+			top: 0;
+			margin: 0;
+			&, &:focus, &:active, &:hover {
+				border: none;
+				background-color: transparent;
+			}
+		}
+		&:not(:valid) ~ .icon-close-white {
+			display: none;
+		}
+		&::-webkit-search-cancel-button {
+			-webkit-appearance: none;
+		}
+	}
+}