Skip to content

Svg color api #9984

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MorrisJobke merged 19 commits into from
Jul 19, 2018
Merged

Svg color api #9984

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
84e90e2
Svg color api
skjnldsv Jun 25, 2018
98a0113
Svg from app
skjnldsv Jun 26, 2018
29ff7ef
Svg icon api sass function and upgrade of all styles
skjnldsv Jun 29, 2018
ccd70a4
use built in response cacheFor function
skjnldsv Jun 29, 2018
09f591f
Dark theme fixes
skjnldsv Jun 29, 2018
d904293
autoloader bump
skjnldsv Jun 29, 2018
8977c71
Mixin scss icon api
skjnldsv Jul 3, 2018
9e58859
Fixed icons detection and caching
skjnldsv Jul 4, 2018
a24cad1
Fix accessibility invert
skjnldsv Jul 4, 2018
cd6f00a
Only dark
skjnldsv Jul 4, 2018
59db525
Autoloader bump
skjnldsv Jul 4, 2018
14bc9ff
Fixed tests
skjnldsv Jul 4, 2018
dccfed8
Add versionning to icon svg color api function
skjnldsv Jul 9, 2018
6194681
Fixed svg generator regex && added missing icons
skjnldsv Jul 9, 2018
6ed8c19
Use proper URL prefix for icons
juliusknorr Jul 10, 2018
9159ed3
Fix icon url regex
juliusknorr Jul 18, 2018
bfc6fc8
Fix settings icon fetching
juliusknorr Jul 18, 2018
37a4d2b
Php code bump
skjnldsv Jul 19, 2018
9d94cc1
Fix unit tests
rullzer Jul 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Mixin scss icon api 
Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>
  • Loading branch information
@skjnldsv @juliusknorr
skjnldsv authored and juliusknorr committed Jul 19, 2018
commit 8977c71f8842f19077fdd0bfe27a4f48f2bc4726
6 changes: 1 addition & 5 deletions apps/accessibility/css/themedark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,6 @@ $color-box-shadow: rgba(darken($color-main-background, 70%), 0.5);
$color-border: lighten($color-main-background, 7%);
$color-border-dark: lighten($color-main-background, 14%);

// invert svg icons colors
$color-white: #000;
$color-black: #fff;

#app-navigation > ul > li > a:first-child,
#app-navigation > ul > li > ul > li > a:first-child,
#expanddiv a {
Expand Down Expand Up @@ -53,4 +49,4 @@ $color-black: #fff;
[class^='icon-'], [class*=' icon-'] {
filter: invert(100%);
Copy link
Member

@juliusknorr juliusknorr Jul 10, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we get rid of this invert rule as well?

Copy link
Member Author

@skjnldsv skjnldsv Jul 10, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, header needs to use the proper urls
Or we need to exclude the variable invert for the header icons :)

Copy link
Member

@juliusknorr juliusknorr Jul 10, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I'd say we should exclude those. Their color anyway depends on the theming app color so we should keep that and not invert it.

Copy link
Member Author

@skjnldsv skjnldsv Jul 10, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hum, since we're changing the global variables, I'm not sure we can ignore them :/

Copy link
Member

@juliusknorr juliusknorr Jul 10, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about just setting the icon for the header with $color-primary-text instead of $color-white? Then they should not be inverted, if I get the code right.

Copy link
Member

@juliusknorr juliusknorr Jul 10, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we would have the regular .icon-contacts with $color-white and a header .icon-contacts with $color-primary-text. Yes this will be some duplication, but the icons where this is used are quite limited, so it would be ok i think.

Copy link
Member Author

@skjnldsv skjnldsv Jul 10, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@juliushaertl Of course!!! Great thinking! 👍 🤗

}
}
}
1 change: 1 addition & 0 deletions apps/accessibility/lib/Controller/AccessibilityController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
use OCP\IURLGenerator;
use OCP\IUserManager;
use OCP\IUserSession;
use OC\Template\SCSSCacher;

class AccessibilityController extends Controller {

Expand Down
2 changes: 1 addition & 1 deletion apps/encryption/css/settings-personal.scss
View file
Open in desktop
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: icon-color('app', 'encryption', $color-black);
@include icon-color('app', 'encryption', $color-black);
}
16 changes: 8 additions & 8 deletions apps/files/css/files.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,26 +84,26 @@

/* icons for sidebar */
.nav-icon-files {
background-image: icon-color(folder, 'files', $color-black);
@include icon-color(folder, 'files', $color-black);
}
.nav-icon-recent {
background-image: icon-color(recent, 'files', $color-black);
@include icon-color(recent, 'files', $color-black);
}
.nav-icon-favorites {
background-image: icon-color(star, 'files', $color-black);
@include icon-color(star, 'files', $color-black);
}
.nav-icon-sharingin,
.nav-icon-sharingout {
background-image: icon-color(share, 'files', $color-black);
@include icon-color(share, 'files', $color-black);
}
.nav-icon-sharinglinks {
background-image: icon-color(public, 'files', $color-black);
@include icon-color(public, 'files', $color-black);
}
.nav-icon-extstoragemounts {
background-image: icon-color(external, 'files', $color-black);
@include icon-color(external, 'files', $color-black);
}
.nav-icon-trashbin {
background-image: icon-color(delete, 'files', $color-black);
@include icon-color(delete, 'files', $color-black);
}
.nav-icon-deletedshares {
background-image: url('../img/unshare.svg?v=1');
Expand Down Expand Up @@ -667,7 +667,7 @@ table.dragshadow td.size {
background-image: none;
}
& .icon-starred {
background-image: url('../../../core/img/actions/starred.svg?v=1');
@include icon-color('star-dark', 'actions', 'FC0', true);
}
}

Expand Down
2 changes: 1 addition & 1 deletion apps/files/lib/Activity/Filter/FileChanges.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ public function getPriority() {
* @since 11.0.0
*/
public function getIcon() {
return $this->url->getAbsoluteURL($this->url->imagePath('core', 'places/files-dark.svg'));
return $this->url->getAbsoluteURL($this->url->imagePath('core', 'places/files.svg'));
}

/**
Expand Down
2 changes: 1 addition & 1 deletion apps/files_external/css/settings.scss
View file
Open in desktop
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: icon-color('app-dark', 'files_external', $color-black);
@include icon-color('app-dark', 'files_external', $color-black);
}
8 changes: 7 additions & 1 deletion core/Controller/SvgController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
use OCP\AppFramework\Utility\ITimeFactory;
use OCP\Files\NotFoundException;
use OCP\IRequest;
use OC\Template\IconsCacher;

class SvgController extends Controller {

Expand All @@ -40,13 +41,18 @@ class SvgController extends Controller {
/** @var ITimeFactory */
protected $timeFactory;

/** @var IconsCacher */
protected $iconsCacher;

public function __construct(string $appName,
IRequest $request,
ITimeFactory $timeFactory) {
ITimeFactory $timeFactory,
IconsCacher $iconsCacher) {
parent::__construct($appName, $request);

$this->serverRoot = \OC::$SERVERROOT;
$this->timeFactory = $timeFactory;
$this->iconsCacher = $iconsCacher;
}

/**
Expand Down
9 changes: 6 additions & 3 deletions core/css/functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,17 @@
*
* @returns string the url to the svg api endpoint
*/
@function icon-color($icon, $dir, $color, $core: false) {
@mixin icon-color($icon, $dir, $color, $core: false) {
// remove # from color
$index: str-index($color, '#');
@if $index {
$color: str-slice($color, 2);
}
$varName: "--icon-#{$icon}-#{$color}";
@if $core {
@return url('#{$webroot}/svg/core/#{$dir}/#{$icon}/#{$color}?v=1');
#{$varName}: url('#{$webroot}/svg/core/#{$dir}/#{$icon}/#{$color}?v=1');
Copy link
Member

@juliusknorr juliusknorr Jul 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't we have another parameter in the mixin for this so app developers can bump the number if they change the icons?

Copy link
Member Author

@skjnldsv skjnldsv Jul 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@juliushaertl I guess we could :)
Currently no one seems to use the version increment :/

Copy link
Member

@juliusknorr juliusknorr Jul 6, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At least for the core CSS we have some:

core/css/inputs.scss
245:				background-image: url('../img/actions/confirm-fade.svg?v=2') !important;

core/css/icons.scss
119:	background-image: url('../img/actions/audio.svg?v=2');
154:	background-image: url('../img/actions/clippy.svg?v=2');
170:	background-image: url('../img/actions/confirm.svg?v=2');
174:	background-image: url('../img/actions/confirm-fade.svg?v=2');
178:	background-image: url('../img/actions/confirm-white.svg?v=2');
451:	background-image: url('../img/actions/video.svg?v=2');

core/css/guest.css
632:	background-image: url('../img/actions/info-white.svg?v=2');
635:	background-image: url('../img/actions/confirm.svg?v=2');
638:	background-image: url('../img/actions/confirm-white.svg?v=2');

Also from my understanding we have no option to force reloading icons otherwise if they change.

Copy link
Member Author

@skjnldsv skjnldsv Jul 9, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Guest is out of the loop! I'll fix the others! Thanks a lot Julius :)

} @else {
#{$varName}: url('#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=1');
}
@return url('#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=1');
background-image: var(#{$varName});
}
Loading