Skip to content

Commit 29ff7ef

Browse files
skjnldsvjuliusknorr
skjnldsv
authored and
juliusknorr
committed
Svg icon api sass function and upgrade of all styles
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
1 parent 98a0113 commit 29ff7ef

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+324
-263
lines changed

‎apps/accessibility/css/themedark.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,6 @@ $color-border-dark: lighten($color-main-background, 14%);
3737
}
3838
}
3939
}
40-
.federation-menu .icon-federation-menu {
41-
filter: invert(100%);
42-
}
4340
.bubble,
4441
.app-navigation-entry-menu,
4542
.popovermenu,

apps/encryption/css/settings-personal.css renamed to apps/encryption/css/settings-personal.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@
1111

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

‎apps/files/css/files.scss‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -84,27 +84,26 @@
8484

8585
/* icons for sidebar */
8686
.nav-icon-files {
87-
background-image: url('../img/folder.svg?v=1');
87+
background-image: icon-color(folder, 'files', $color-black);
8888
}
8989
.nav-icon-recent {
90-
background-image: url('../img/recent.svg?v=1');
90+
background-image: icon-color(recent, 'files', $color-black);
9191
}
9292
.nav-icon-favorites {
93-
background-image: url('../img/star.svg?v=1');
93+
background-image: icon-color(star, 'files', $color-black);
9494
}
9595
.nav-icon-sharingin,
96-
.nav-icon-sharingout,
97-
.nav-icon-shareoverview {
98-
background-image: url('../img/share.svg?v=1');
96+
.nav-icon-sharingout {
97+
background-image: icon-color(share, 'files', $color-black);
9998
}
10099
.nav-icon-sharinglinks {
101-
background-image: url('../img/public.svg?v=1');
100+
background-image: icon-color(public, 'files', $color-black);
102101
}
103102
.nav-icon-extstoragemounts {
104-
background-image: url('../img/external.svg?v=1');
103+
background-image: icon-color(external, 'files', $color-black);
105104
}
106105
.nav-icon-trashbin {
107-
background-image: url('../img/delete.svg?v=1');
106+
background-image: icon-color(delete, 'files', $color-black);
108107
}
109108
.nav-icon-deletedshares {
110109
background-image: url('../img/unshare.svg?v=1');

‎apps/files_external/css/settings.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,5 +122,5 @@ td.mountPoint, td.backend { width:160px; }
122122
}
123123

124124
.nav-icon-external-storage {
125-
background-image: url('../img/app-dark.svg?v=1');
125+
background-image: icon-color('app-dark', 'files_external', $color-black);
126126
}

‎core/Controller/SvgController.php‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,13 @@ public function __construct(string $appName,
5555
*
5656
* Generate svg from filename with the requested color
5757
*
58+
* @param string $folder
5859
* @param string $fileName
5960
* @param string $color
6061
* @return DataDisplayResponse|NotFoundException
6162
*/
62-
public function getSvgFromCore(string $fileName, string $color = 'ffffff') {
63-
$path = $this->serverRoot . "/core/img/actions/$fileName.svg";
63+
public function getSvgFromCore(string $folder, string $fileName, string $color = 'ffffff') {
64+
$path = $this->serverRoot . "/core/img/$folder/$fileName.svg";
6465
return $this->getSvg($path, $color);
6566
}
6667

@@ -70,11 +71,18 @@ public function getSvgFromCore(string $fileName, string $color = 'ffffff') {
7071
*
7172
* Generate svg from filename with the requested color
7273
*
74+
* @param string $app
7375
* @param string $fileName
7476
* @param string $color
7577
* @return DataDisplayResponse|NotFoundException
7678
*/
7779
public function getSvgFromApp(string $app, string $fileName, string $color = 'ffffff') {
80+
81+
if ($app === 'settings') {
82+
$path = $this->serverRoot . "/settings/img/$fileName.svg";
83+
return $this->getSvg($path, $color);
84+
}
85+
7886
$appPath = \OC_App::getAppWebPath($app);
7987
if (!$appPath) {
8088
return new NotFoundResponse();

‎core/css/functions.scss‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
3+
*
4+
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
5+
*
6+
* @license GNU AGPL version 3 or any later version
7+
*
8+
* This program is free software: you can redistribute it and/or modify
9+
* it under the terms of the GNU Affero General Public License as
10+
* published by the Free Software Foundation, either version 3 of the
11+
* License, or (at your option) any later version.
12+
*
13+
* This program is distributed in the hope that it will be useful,
14+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
15+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16+
* GNU Affero General Public License for more details.
17+
*
18+
* You should have received a copy of the GNU Affero General Public License
19+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
20+
*
21+
*/
22+
23+
/**
24+
* SVG COLOR API
25+
*
26+
* @param string $icon the icon filename
27+
* @param string $dir the icon folder within /core/img if $core or app name
28+
* @param string $color the desired color in hexadecimal
29+
* @param bool [$core] search icon in core
30+
*
31+
* @returns string the url to the svg api endpoint
32+
*/
33+
@function icon-color($icon, $dir, $color, $core: false) {
34+
// remove # from color
35+
$index: str-index($color, '#');
36+
@if $index {
37+
$color: str-slice($color, 2);
38+
}
39+
@if $core {
40+
@return url('#{$webroot}/svg/core/#{$dir}/#{$icon}/#{$color}?v=1');
41+
}
42+
@return url('#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=1');
43+
}

‎core/css/header.scss‎

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -322,7 +322,6 @@ nav[role='navigation'] {
322322
}
323323

324324
/* Apps management */
325-
326325
#apps {
327326
max-height: calc(100vh - 100px);
328327
overflow: auto;
@@ -336,7 +335,6 @@ nav[role='navigation'] {
336335
}
337336

338337
/* USER MENU -----------------------------------------------------------------*/
339-
340338
#settings {
341339
display: inline-block;
342340
height: 100%;
@@ -405,6 +403,7 @@ nav[role='navigation'] {
405403
}
406404
}
407405

406+
/* Settings menu */
408407
#expanddiv {
409408
&.menu {
410409
right: 17px;
@@ -438,6 +437,7 @@ nav[role='navigation'] {
438437
}
439438
}
440439

440+
/* Apps menu */
441441
#appmenu {
442442
display: inline-block;
443443
width: auto;
@@ -585,3 +585,57 @@ nav[role='navigation'] {
585585
top: 50px;
586586
}
587587
}
588+
589+
/* SEARCHBOX --------------------------------------------------------------- */
590+
.searchbox {
591+
position: relative;
592+
display: flex;
593+
align-items: center;
594+
input[type='search'] {
595+
position: relative;
596+
font-size: 1.2em;
597+
padding: 3px;
598+
padding-left: 25px;
599+
padding-right: 20px;
600+
background-color: transparent;
601+
color: var(--color-primary-text);
602+
border: 0;
603+
border-radius: var(--border-radius);
604+
height: 34px;
605+
width: 0;
606+
cursor: pointer;
607+
-webkit-transition: all 100ms;
608+
transition: all 100ms;
609+
opacity: .6;
610+
&:focus, &:active, &:valid {
611+
background-position-x: 6px;
612+
color: var(--color-primary-text);
613+
width: 155px;
614+
cursor: text;
615+
background-color: var(--color-primary) !important;
616+
border: 1px solid var(--color-primary-text-dark) !important;
617+
}
618+
&:hover, &:focus, &:active {
619+
opacity: 1;
620+
}
621+
& ~ .icon-close-white {
622+
display: inline;
623+
position: absolute;
624+
width: 30px;
625+
height: 100%;
626+
right: 0;
627+
top: 0;
628+
margin: 0;
629+
&, &:focus, &:active, &:hover {
630+
border: none;
631+
background-color: transparent;
632+
}
633+
}
634+
&:not(:valid) ~ .icon-close-white {
635+
display: none;
636+
}
637+
&::-webkit-search-cancel-button {
638+
-webkit-appearance: none;
639+
}
640+
}
641+
}

0 commit comments

Comments
 (0)