Skip to content

Commit

Permalink
fixed file list mime icons
Browse files Browse the repository at this point in the history
  • Loading branch information
memurats committed May 16, 2024
1 parent ae9e839 commit ff36db8
Show file tree
Hide file tree
Showing 7 changed files with 201 additions and 64 deletions.
42 changes: 35 additions & 7 deletions css/apps/files.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
border: none;
height: 44px;
margin-top: 0.2rem;
max-width: unset;
max-height: unset;
width: 44px;

svg {
Expand Down Expand Up @@ -342,9 +344,20 @@ table.files-filestable {
margin-left: 24px;
z-index: 100;

.material-design-icon.folder-icon {
background-image: var(--icon-mime-folder-dark);
.material-design-icon {
@include thumbnail-icons();

&.folder-icon {
background-image: var(--icon-mime-folder-dark);
}

&.link-icon {
background-image: var(--icon-mime-folder-shared-dark);
}

&.key-icon {
background-image: var(--icon-mime-folder-encrypted-dark);
}
}
}

Expand Down Expand Up @@ -487,12 +500,27 @@ table.files-filestable {
}

.files-list__row-icon {
.material-design-icon.folder-icon {
background-image: var(--icon-mime-folder-dark);

.material-design-icon {
@include thumbnail-icons();

width: calc(100% - 2* 14px);
height: calc(100% - 2* 14px);
margin: 0;
max-width: calc(100% - 2 * 14px);
max-height: calc(100% - 2 * 14px);
width: calc(100% - 2 * 14px);
height: calc(100% - 2 * 14px);
position: absolute;

&.folder-icon {
background-image: var(--icon-mime-folder-dark);
}

&.link-icon {
background-image: var(--icon-mime-folder-shared-dark);
}

&.key-icon {
background-image: var(--icon-mime-folder-encrypted-dark);
}
}

.files-list__row-icon-favorite {
Expand Down
105 changes: 53 additions & 52 deletions css/components/ncusermenu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,75 +3,76 @@

#user-menu {

.user-menu {
.header-menu__wrapper {

&__nav {
ul {

ul {
li.menu-entry {

li.menu-entry {
&#profile {
display: none;
}

&:hover span,
&:hover a {
// Style user menu colors for Darkmode
@media (prefers-color-scheme: dark) {
color: var(--nmc-color-text-and-icon-primary-standard);
background-color: transparent;
&::after {
filter: var(--nmc-color-icon)
}
&:hover span,
&:hover a {
// Style user menu colors for Darkmode
@media (prefers-color-scheme: dark) {
color: var(--nmc-color-text-and-icon-primary-standard);
background-color: transparent;
&::after {
filter: var(--nmc-color-icon)
}

}

a {
padding-left: 48px;

&::after {
content: "";
display: block;
position: absolute;
top: 0px;
left: 2px;
height: 100%;
width: 44px;
background-repeat: no-repeat;
background-position: center;
background-size: 24px 24px;
}
}

img {
display: none;
}
a {
padding-left: 48px;

&::after {
content: "";
display: block;
position: absolute;
top: 0px;
left: 2px;
height: 100%;
width: 44px;
background-repeat: no-repeat;
background-position: center;
background-size: 24px 24px;
}

&#settings>a::after {
background-image: var(--icon-settings-dark);
img {
display: none;
}
}

&#help>a::after {
background-image: var(--icon-help-dark);
}
&#settings>a::after {
background-image: var(--icon-settings-dark);
}

&#customer_center>a::after {
background-image: var(--icon-customercenter-dark);
}
&#help>a::after {
background-image: var(--icon-help-dark);
}

&#admin_settings>a::after {
background-image: var(--icon-admin-dark);
}
&#customer_center>a::after {
background-image: var(--icon-customercenter-dark);
}

&#core_apps>a::after {
background-image: var(--icon-add-dark);
}
&#admin_settings>a::after {
background-image: var(--icon-admin-dark);
}

&#core_users>a::after {
background-image: var(--icon-users-dark);
}
&#core_apps>a::after {
background-image: var(--icon-add-dark);
}

&#logout>a::after {
background-image: var(--icon-logout-dark);
}
&#core_users>a::after {
background-image: var(--icon-users-dark);
}

&#logout>a::after {
background-image: var(--icon-logout-dark);
}
}
}
Expand Down
9 changes: 5 additions & 4 deletions css/v25/ncappnavigation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@
*/

#app-navigation:not(.vue) {
#app-navigation-caption-personal, #app-navigation-caption-administration {
padding: 0 4rem;
}

.app-navigation-caption {
padding: 2.5rem 1.5rem 1.5rem;

}

&>nav {
// hide scrollbar which appears due to incorrect container height
Expand Down Expand Up @@ -168,7 +169,7 @@

#app-navigation:not(.vue) {

&>ul>li {
&>nav>ul>li {
display: none;
}
}
Expand Down
21 changes: 21 additions & 0 deletions lib/AppInfo/Application.php
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
use OC\AppFramework\DependencyInjection\DIContainer;
use OC\L10N\Factory;
use OC\NavigationManager;
use OC\Preview\MimeIconProvider;
use OC\Search\SearchComposer;
use OC\Template\JSCombiner;
use OC\Template\JSResourceLocator;
Expand All @@ -22,6 +23,7 @@
use OCA\NMCTheme\L10N\FactoryDecorator;
use OCA\NMCTheme\Listener\BeforeTemplateRenderedListener;
use OCA\NMCTheme\NavigationManagerDecorator;
use OCA\NMCTheme\MimeIconProviderDecorator;
use OCA\NMCTheme\Search\SearchComposerDecorator;
use OCA\NMCTheme\Service\NMCFilesService;
use OCA\NMCTheme\Service\NMCThemesService;
Expand All @@ -47,6 +49,7 @@
use OCP\Files\IMimeTypeDetector;
use OCP\IConfig;
use OCP\INavigationManager;
use OCP\Preview\IMimeIconProvider;

// FIXME: required private accesses; we have to find better ways
// when integrating upstream
Expand Down Expand Up @@ -127,6 +130,21 @@ protected function registerJSResourceLocatorExtension(IRegistrationContext $cont
}


/**
* Decorate the IMimeIconProvider.
*/
protected function registerMimeIconProviderDecorator(IRegistrationContext $context) {
$this->getContainer()->getServer()->registerService(IMimeIconProvider::class, function (ContainerInterface $c) {
return new MimeIconProviderDecorator(
$c->get(IConfig::class),
$this->getContainer()->getServer()->query(MimeIconProvider::class),
$c->get(IMimeTypeDetector::class),
$c->get(IURLGenerator::class),
);
});
}


/**
* Decorate the INavigationManager.
*/
Expand Down Expand Up @@ -221,6 +239,9 @@ public function register(IRegistrationContext $context): void {
// intercept requests for favicons to enforce own behavior
$this->registerURLGeneratorDecorator($context);

// intercept requests for main navigation elements
$this->registerMimeIconProviderDecorator($context);

// intercept requests for main navigation elements
$this->registerNavigationManagerDecorator($context);

Expand Down
80 changes: 80 additions & 0 deletions lib/MimeIconProviderDecorator.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<?php

declare(strict_types=1);

/**
* @copyright Copyright (c) 2023 T-Systems International
*
* @author Bernd Rederlechner <[email protected]>
*
* SPDX-License-Identifier: AGPL-3.0-or-later
*/

namespace OCA\NMCTheme;

use OCP\IConfig;
use OCP\Files\IMimeTypeDetector;
use OCP\IURLGenerator;
use OCP\Preview\IMimeIconProvider;

class MimeIconProviderDecorator implements IMimeIconProvider {

protected IConfig $config;
protected IMimeIconProvider $decorated;
protected IMimeTypeDetector $mimetypeDetector;
protected IURLGenerator $urlGenerator;

public function __construct(IConfig $config, IMimeIconProvider $decorated, IMimeTypeDetector $mimetypeDetector, IURLGenerator $urlGenerator) {
$this->config = $config;
$this->decorated = $decorated;
$this->mimetypeDetector = $mimetypeDetector;
$this->urlGenerator = $urlGenerator;
}

public function getMimeIconUrl(string $mime): null|string {
if (!$mime) {
return null;
}

// Fetch all the aliases
$aliases = $this->mimetypeDetector->getAllAliases();

// Remove comments
$aliases = array_filter($aliases, static function ($key) {
return !($key === '' || $key[0] === '_');
}, ARRAY_FILTER_USE_KEY);

// Map all the aliases recursively
foreach ($aliases as $alias => $value) {
if ($alias === $mime) {
$mime = $value;
}
}

$fileName = str_replace('/', '-', $mime);

if ($url = $this->searchfileName($fileName)) {
return $url;
}

$mimeType = explode('/', $mime)[0];

if ($url = $this->searchfileName($mimeType)) {
return $url;
}

return null;
}

private function searchfileName(string $fileName): null|string {

// always return nmctheme style icons
$path = "/customapps/nmctheme/img/filetypes/$fileName.svg";

if (file_exists(\OC::$SERVERROOT . $path)) {
return $this->urlGenerator->getAbsoluteURL($path);
}

return null;
}
}
7 changes: 7 additions & 0 deletions src/icons.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,13 @@ const icons = {
user: path.join(__dirname, '../img', 'actions', 'user.svg'),
folder: path.join(__dirname, '../img', 'actions', 'folder.svg'),
'mime-folder': path.join(__dirname, '../img', 'filetypes', 'folder.svg'),
'mime-folder-audio': path.join(__dirname, '../img', 'filetypes', 'folder-audio.svg'),
'mime-folder-encrypted': path.join(__dirname, '../img', 'filetypes', 'folder-encrypted.svg'),
'mime-folder-photo': path.join(__dirname, '../img', 'filetypes', 'folder-photo.svg'),
'mime-folder-public': path.join(__dirname, '../img', 'filetypes', 'folder-public.svg'),
'mime-folder-regular': path.join(__dirname, '../img', 'filetypes', 'folder-regular.svg'),
'mime-folder-shared': path.join(__dirname, '../img', 'filetypes', 'folder-shared.svg'),
'mime-folder-video': path.join(__dirname, '../img', 'filetypes', 'folder-video.svg'),
files: path.join(__dirname, '../img', 'places', 'files.svg'),
history: path.join(__dirname, '../img', 'actions', 'history.svg'),
tag: path.join(__dirname, '../img', 'actions', 'tag.svg'),
Expand Down
1 change: 0 additions & 1 deletion src/nmcheader.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ window.addEventListener('DOMContentLoaded', function() {
userMenu.prepend(menuElements)
}

// @ts-expect-error no typescript support for extend
const View = Vue.extend(UserMenu)
new View({ propsData: { menuItems } }).$mount('#nmcsettings-menu')
})

0 comments on commit ff36db8

Please sign in to comment.