Skip to content

Simplified Nextcloud logo icon #2 #5407

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 2 commits into from
Jul 4, 2017
Merged

Simplified Nextcloud logo icon #2 #5407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3470d0a
Simplified Nextcloud logo icon
pixelipo Jun 7, 2017
02dd7f5
Revert background-size as requested, issue will be fixed separately
Jun 30, 2017
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
2 changes: 1 addition & 1 deletion apps/federatedfilesharing/lib/Settings/Personal.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ public function getForm() {
'outgoingServer2serverShareEnabled' => $this->federatedShareProvider->isOutgoingServer2serverShareEnabled(),
'message_with_URL' => $this->l->t('Share with me through my #Nextcloud Federated Cloud ID, see %s', [$url]),
'message_without_URL' => $this->l->t('Share with me through my #Nextcloud Federated Cloud ID', [$cloudID]),
'logoPath' => $this->urlGenerator->imagePath('core', 'logo-icon.svg'),
'logoPath' => $this->urlGenerator->imagePath('core', 'logo.svg'),
'reference' => $url,
'cloudId' => $cloudID,
'color' => $this->defaults->getColorPrimary(),
Expand Down
2 changes: 1 addition & 1 deletion apps/files_sharing/templates/public.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
<div id="header-left">
<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
title="" id="nextcloud">
<div class="logo-icon svg"></div>
<div class="logo logo-icon svg"></div>
<h1 class="header-appname">
<?php p($theme->getName()); ?>
</h1>
Expand Down
3 changes: 1 addition & 2 deletions apps/theming/css/theming.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,7 @@
}

/* override styles for login screen in guest.css */
#header .logo,
#header .logo-icon {
#header .logo {
background-image: url(#{$image-logo});
@if $theming-logo-mime != '' {
background-size: contain;
Expand Down
4 changes: 2 additions & 2 deletions apps/theming/js/settings-admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ function preview(setting, value) {
if (value !== '') {
previewImageLogo.src = OC.generateUrl('/apps/theming/logo') + "?v" + timestamp;
} else {
previewImageLogo.src = OC.getRootPath() + '/core/img/logo-icon.svg?v' + timestamp;
previewImageLogo.src = OC.getRootPath() + '/core/img/logo.svg?v' + timestamp;
}
}

Expand Down Expand Up @@ -232,5 +232,5 @@ $(document).ready(function () {
OC.msg.finishedSaving('#theming_settings_msg', response);
});
});

});
6 changes: 3 additions & 3 deletions core/css/guest.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,12 @@ h3 {
padding-top: 100px;
}
#header .logo {
background-image: url('../img/logo-icon.svg?v=1');
background-image: url('../img/logo.svg?v=1');
background-repeat: no-repeat;
background-size: 175px;
background-position: center;
width: 252px;
min-height: 120px;
width: 256px;
min-height: 128px;
max-height: 200px;
margin: 0 auto;
}
Expand Down
22 changes: 9 additions & 13 deletions core/css/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,29 +100,25 @@

#header {
.logo {
background-image: url('#{$image-logo}');
display: inline-flex;
background-image: url($image-logo);
background-repeat: no-repeat;
background-size: 175px;
background-size: contain;
background-position: center;
width: 252px;
Copy link
Contributor Author

@pixelipo pixelipo Jun 14, 2017

Choose a reason for hiding this comment

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

As mentioned in #5288 if we want to limit the width of the logo to 175px, why not just make the container smaller? No need to check mime-type here

Copy link
Member

@juliusknorr juliusknorr Jun 14, 2017

Choose a reason for hiding this comment

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

The problem is that themed logos should use all of the space that is available, while the default logo should just have its default size.

Copy link
Contributor Author

@pixelipo pixelipo Jun 15, 2017

Choose a reason for hiding this comment

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

Ok, I see your point. I can make adjustments.
But in that case, can I ask why is the width set to 252px? parent div, .header, is 300px wide (probably in order to fit into smallest supported mobile width), while the form elements (inputs and submit) are 269px wide. Seems arbitrary...

Copy link
Member

@juliusknorr juliusknorr Jun 17, 2017

Choose a reason for hiding this comment

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

Maybe @jancborchardt has an idea about that?

height: 120px;
width: 256px;
height: 128px;
margin: 0 auto;
&.logo-icon {
width: 62px;
height: 34px;

img {
opacity: 0;
max-width: 100%;
max-height: 200px;
}
}
.logo-icon {
/* display logo so appname can be shown next to it */
display: inline-block;
background-image: url($image-logo);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 62px;
height: 34px;

}
.header-appname-container {
display: none;
Expand Down
1 change: 0 additions & 1 deletion core/img/logo-icon.svg
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion core/img/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion core/templates/layout.user.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<div id="header-left">
<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
id="nextcloud" tabindex="1">
<div class="logo-icon">
<div class="logo logo-icon">
<h1 class="hidden-visually">
<?php p($theme->getName()); ?>
</h1>
Expand Down
5 changes: 2 additions & 3 deletions themes/example/core/css/server.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,10 @@ button.primary:focus,
/* use logos from theme */
#header .logo {
background-image: url('../img/logo.svg');
width: 250px;
height: 121px;
width: 256px;
height: 128px;
}
#header .logo-icon {
background-image: url('../img/logo-icon.svg');
width: 62px;
height: 34px;
}