Merge pull request #771 from nextcloud/theming-fixes

Theming: Fix missing color usage
This commit is contained in:
Roeland Jago Douma 2016-08-26 15:02:21 +02:00 committed by GitHub
commit 53725d4d15
5 changed files with 146 additions and 17 deletions

View File

@ -24,6 +24,7 @@
*/ */
use OCA\FederatedFileSharing\AppInfo\Application; use OCA\FederatedFileSharing\AppInfo\Application;
use OCA\Theming\Template;
\OC_Util::checkLoggedIn(); \OC_Util::checkLoggedIn();
@ -40,15 +41,32 @@ if (count($matches) > 0 && $matches[1] <= 9) {
$cloudID = \OC::$server->getUserSession()->getUser()->getCloudId(); $cloudID = \OC::$server->getUserSession()->getUser()->getCloudId();
$url = 'https://nextcloud.com/federation#' . $cloudID; $url = 'https://nextcloud.com/federation#' . $cloudID;
$ownCloudLogoPath = \OC::$server->getURLGenerator()->imagePath('core', 'logo-icon.svg'); $logoPath = \OC::$server->getURLGenerator()->imagePath('core', 'logo-icon.svg');
$theme = \OC::$server->getThemingDefaults();
$color = $theme->getMailHeaderColor();
$textColor = "#ffffff";
if(\OC::$server->getAppManager()->isEnabledForUser("theming")) {
$logoPath = $theme->getLogo();
try {
$util = \OC::$server->query("\OCA\Theming\Util");
if($util->invertTextColor($color)) {
$textColor = "#000000";
}
} catch (OCP\AppFramework\QueryException $e) {
}
}
$tmpl = new OCP\Template('federatedfilesharing', 'settings-personal'); $tmpl = new OCP\Template('federatedfilesharing', 'settings-personal');
$tmpl->assign('outgoingServer2serverShareEnabled', $federatedShareProvider->isOutgoingServer2serverShareEnabled()); $tmpl->assign('outgoingServer2serverShareEnabled', $federatedShareProvider->isOutgoingServer2serverShareEnabled());
$tmpl->assign('message_with_URL', $l->t('Share with me through my #Nextcloud Federated Cloud ID, see %s', [$url])); $tmpl->assign('message_with_URL', $l->t('Share with me through my #Nextcloud Federated Cloud ID, see %s', [$url]));
$tmpl->assign('message_without_URL', $l->t('Share with me through my #Nextcloud Federated Cloud ID', [$cloudID])); $tmpl->assign('message_without_URL', $l->t('Share with me through my #Nextcloud Federated Cloud ID', [$cloudID]));
$tmpl->assign('owncloud_logo_path', $ownCloudLogoPath); $tmpl->assign('logoPath', $logoPath);
$tmpl->assign('reference', $url); $tmpl->assign('reference', $url);
$tmpl->assign('cloudId', $cloudID); $tmpl->assign('cloudId', $cloudID);
$tmpl->assign('showShareIT', !$isIE8); $tmpl->assign('showShareIT', !$isIE8);
$tmpl->assign('color', $color);
$tmpl->assign('textColor', $textColor);
return $tmpl->fetchPage(); return $tmpl->fetchPage();

View File

@ -55,22 +55,17 @@ if ($_['showShareIT']) {
<div class="hidden" id="oca-files-sharing-add-to-your-website-expanded"> <div class="hidden" id="oca-files-sharing-add-to-your-website-expanded">
<p style="margin: 10px 0"> <p style="margin: 10px 0">
<a target="_blank" rel="noreferrer" href="<?php p($_['reference']); ?>" <a target="_blank" rel="noreferrer" href="<?php p($_['reference']); ?>"
style="padding:10px;background-color:#0082c9;color:#fff;border-radius:3px;padding-left:4px;"> style="padding:10px;background-color:<?php p($_['color']); ?>;color:<?php p($_['textColor']); ?>;border-radius:3px;padding-left:4px;">
<img src="<?php p($_['owncloud_logo_path']); ?>" <span style="background-image:url(<?php p(\OC::$server->getURLGenerator()->getAbsoluteURL($_['logoPath'])); ?>);width:50px;height:30px;position:relative;top:8px;background-size:contain;display:inline-block;background-repeat:no-repeat; background-position: center center;"></span>
style="width:50px;position:relative;top:8px;">
<?php p($l->t('Share with me via Nextcloud')); ?> <?php p($l->t('Share with me via Nextcloud')); ?>
</a> </a>
</p> </p>
<p> <p>
<?php p($l->t('HTML Code:')); ?> <?php p($l->t('HTML Code:')); ?>
<xmp><a target="_blank" rel="noreferrer" href="<?php p($_['reference']); ?>" <xmp><a target="_blank" rel="noreferrer" href="<?php p($_['reference']); ?>" style="padding:10px;background-color:<?php p($_['color']); ?>;color:<?php p($_['textColor']); ?>;border-radius:3px;padding-left:4px;">
style="padding:10px;background-color:#0082c9;color:#fff;border-radius:3px;padding-left:4px;"> <span style="background-image:url(<?php p(\OC::$server->getURLGenerator()->getAbsoluteURL($_['logoPath'])); ?>);width:50px;height:30px;position:relative;top:8px;background-size:contain;display:inline-block;background-repeat:no-repeat; background-position: center center;"></span>
<img src="<?php p(\OC::$server->getURLGenerator()->getAbsoluteURL($_['owncloud_logo_path'])); ?>" <?php p($l->t('Share with me via Nextcloud')); ?></a></xmp>
style="width:50px;position:relative;top:8px;">
<?php p($l->t('Share with me via Nextcloud')); ?>
</a></xmp>
</p> </p>
</div> </div>
<?php } ?> <?php } ?>

View File

@ -286,6 +286,29 @@ class ThemingController extends Controller {
$responseCss .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . $responseCss .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton($elementColor).'\');' . 'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton($elementColor).'\');' .
"}\n"; "}\n";
$responseCss .= '.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary,' .
'.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active,' .
'.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,' .
'.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,' .
'.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {' .
'border: 1px solid '.$elementColor.';'.
'background-color: '.$elementColor.';'.
'opacity: 0.8' .
"}\n" .
'.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,' .
'.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {' .
'border: 1px solid '.$elementColor.';'.
'background-color: '.$elementColor.';'.
'opacity: 1.0;' .
"}\n";
$responseCss .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
$responseCss .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
'border: 1px solid ' . $color . ';' .
'color: ' . $elementColor . ';' .
"}\n";
$responseCss .= '.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {' .
'color: ' . $elementColor . ';' .
"}\n";
$responseCss .= ' $responseCss .= '
#firstrunwizard .firstrunwizard-header { #firstrunwizard .firstrunwizard-header {
background-color: ' . $color . '; background-color: ' . $color . ';
@ -328,6 +351,7 @@ class ThemingController extends Controller {
$responseCss .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n"; $responseCss .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n";
$responseCss .= '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . "\n"; $responseCss .= '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . "\n";
$responseCss .= '.nc-theming-contrast {color: #000000}' . "\n"; $responseCss .= '.nc-theming-contrast {color: #000000}' . "\n";
$responseCss .= '.ui-widget-header { color: #000000; }' . "\n";
} else { } else {
$responseCss .= '.nc-theming-contrast {color: #ffffff}' . "\n"; $responseCss .= '.nc-theming-contrast {color: #ffffff}' . "\n";
} }

View File

@ -383,7 +383,29 @@ class ThemingControllerTest extends TestCase {
$expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . $expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton($color).'\');' . 'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton($color).'\');' .
"}\n"; "}\n";
$expectedData .= '.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary,' .
'.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active,' .
'.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,' .
'.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,' .
'.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {' .
'border: 1px solid '.$color .';'.
'background-color: '.$color.';'.
'opacity: 0.8' .
"}\n" .
'.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,' .
'.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {' .
'border: 1px solid '.$color.';'.
'background-color: '.$color.';'.
'opacity: 1.0;' .
"}\n";
$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
'border: 1px solid ' . $color . ';' .
'color: ' . $color . ';' .
"}\n";
$expectedData .= '.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {' .
'color: ' . $color . ';' .
"}\n";
$expectedData .= ' $expectedData .= '
#firstrunwizard .firstrunwizard-header { #firstrunwizard .firstrunwizard-header {
background-color: ' . $color . '; background-color: ' . $color . ';
@ -406,6 +428,7 @@ class ThemingControllerTest extends TestCase {
public function testGetStylesheetWithOnlyColorInvert() { public function testGetStylesheetWithOnlyColorInvert() {
$color = '#fff'; $color = '#fff';
$elementColor = '#555555';
$this->config $this->config
->expects($this->at(0)) ->expects($this->at(0))
@ -442,7 +465,29 @@ class ThemingControllerTest extends TestCase {
$expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . $expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton('#555555').'\');' . 'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton('#555555').'\');' .
"}\n"; "}\n";
$expectedData .= '.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary,' .
'.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active,' .
'.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,' .
'.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,' .
'.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {' .
'border: 1px solid #555555;'.
'background-color: #555555;'.
'opacity: 0.8' .
"}\n" .
'.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,' .
'.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {' .
'border: 1px solid #555555;'.
'background-color: #555555;'.
'opacity: 1.0;' .
"}\n";
$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
'border: 1px solid ' . $color . ';' .
'color: ' . $elementColor . ';' .
"}\n";
$expectedData .= '.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {' .
'color: ' . $elementColor . ';' .
"}\n";
$expectedData .= ' $expectedData .= '
#firstrunwizard .firstrunwizard-header { #firstrunwizard .firstrunwizard-header {
background-color: ' . $color . '; background-color: ' . $color . ';
@ -458,6 +503,7 @@ class ThemingControllerTest extends TestCase {
$expectedData .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n"; $expectedData .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n";
$expectedData .= '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . "\n"; $expectedData .= '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . "\n";
$expectedData .= '.nc-theming-contrast {color: #000000}' . "\n"; $expectedData .= '.nc-theming-contrast {color: #000000}' . "\n";
$expectedData .= '.ui-widget-header { color: #000000; }' . "\n";
$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css'); $expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');
@ -585,6 +631,29 @@ class ThemingControllerTest extends TestCase {
$expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . $expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton($color).'\');' . 'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton($color).'\');' .
"}\n"; "}\n";
$expectedData .= '.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary,' .
'.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active,' .
'.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,' .
'.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,' .
'.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {' .
'border: 1px solid '.$color .';'.
'background-color: '.$color.';'.
'opacity: 0.8' .
"}\n" .
'.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,' .
'.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {' .
'border: 1px solid '.$color.';'.
'background-color: '.$color.';'.
'opacity: 1.0;' .
"}\n";
$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
'border: 1px solid ' . $color . ';' .
'color: ' . $color . ';' .
"}\n";
$expectedData .= '.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {' .
'color: ' . $color . ';' .
"}\n";
$expectedData .= ' $expectedData .= '
#firstrunwizard .firstrunwizard-header { #firstrunwizard .firstrunwizard-header {
background-color: ' . $color . '; background-color: ' . $color . ';
@ -624,6 +693,7 @@ class ThemingControllerTest extends TestCase {
public function testGetStylesheetWithAllCombinedInverted() { public function testGetStylesheetWithAllCombinedInverted() {
$color = '#fff'; $color = '#fff';
$elementColor = '#555555';
$this->config $this->config
->expects($this->at(0)) ->expects($this->at(0))
@ -646,7 +716,6 @@ class ThemingControllerTest extends TestCase {
->with('theming', 'backgroundMime', '') ->with('theming', 'backgroundMime', '')
->willReturn('image/png'); ->willReturn('image/png');
$expectedData = sprintf( $expectedData = sprintf(
'#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}' . "\n", '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}' . "\n",
$color); $color);
@ -661,6 +730,29 @@ class ThemingControllerTest extends TestCase {
$expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . $expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton('#555555').'\');' . 'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton('#555555').'\');' .
"}\n"; "}\n";
$expectedData .= '.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary,' .
'.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active,' .
'.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,' .
'.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,' .
'.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {' .
'border: 1px solid #555555;'.
'background-color: #555555;'.
'opacity: 0.8' .
"}\n" .
'.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,' .
'.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {' .
'border: 1px solid #555555;'.
'background-color: #555555;'.
'opacity: 1.0;' .
"}\n";
$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
'border: 1px solid ' . $color . ';' .
'color: ' . $elementColor . ';' .
"}\n";
$expectedData .= '.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {' .
'color: ' . $elementColor . ';' .
"}\n";
$expectedData .= ' $expectedData .= '
#firstrunwizard .firstrunwizard-header { #firstrunwizard .firstrunwizard-header {
background-color: ' . $color . '; background-color: ' . $color . ';
@ -694,8 +786,9 @@ class ThemingControllerTest extends TestCase {
$expectedData .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n"; $expectedData .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n";
$expectedData .= '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . "\n"; $expectedData .= '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . "\n";
$expectedData .= '.nc-theming-contrast {color: #000000}' . "\n"; $expectedData .= '.nc-theming-contrast {color: #000000}' . "\n";
$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css'); $expectedData .= '.ui-widget-header { color: #000000; }' . "\n";
$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');
$expected->cacheFor(3600); $expected->cacheFor(3600);
$expected->addHeader('Expires', date(\DateTime::RFC2822, 123)); $expected->addHeader('Expires', date(\DateTime::RFC2822, 123));
@$this->assertEquals($expected, $this->themingController->getStylesheet()); @$this->assertEquals($expected, $this->themingController->getStylesheet());

View File

@ -1356,7 +1356,6 @@ class Server extends ServerContainer implements IServerContainer {
} }
/** /**
* @internal Not public by intention.
* @return \OC_Defaults * @return \OC_Defaults
*/ */
public function getThemingDefaults() { public function getThemingDefaults() {