Skip to content

Commit

Permalink
Svg icon api sass function and upgrade of all styles
Browse files Browse the repository at this point in the history
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
  • Loading branch information
skjnldsv authored and juliusknorr committed Jul 19, 2018
1 parent 98a0113 commit 29ff7ef
Show file tree
Hide file tree
Showing 46 changed files with 324 additions and 263 deletions.
3 changes: 0 additions & 3 deletions apps/accessibility/css/themedark.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
17 changes: 8 additions & 9 deletions apps/files/css/files.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
2 changes: 1 addition & 1 deletion apps/files_external/css/settings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
12 changes: 10 additions & 2 deletions core/Controller/SvgController.php
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand All @@ -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();
Expand Down
43 changes: 43 additions & 0 deletions core/css/functions.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @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');
}
58 changes: 56 additions & 2 deletions core/css/header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,6 @@ nav[role='navigation'] {
}

/* Apps management */

#apps {
max-height: calc(100vh - 100px);
overflow: auto;
Expand All @@ -336,7 +335,6 @@ nav[role='navigation'] {
}

/* USER MENU -----------------------------------------------------------------*/

#settings {
display: inline-block;
height: 100%;
Expand Down Expand Up @@ -405,6 +403,7 @@ nav[role='navigation'] {
}
}

/* Settings menu */
#expanddiv {
&.menu {
right: 17px;
Expand Down Expand Up @@ -438,6 +437,7 @@ nav[role='navigation'] {
}
}

/* Apps menu */
#appmenu {
display: inline-block;
width: auto;
Expand Down Expand Up @@ -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;
}
}
}
Loading

0 comments on commit 29ff7ef

Please sign in to comment.