Skip to content

Y
yii2
Commit 421ebeee by Carsten Brandt
Options

refactored debug toolbar assets

also fixed problems with display on small screens. fixes #1747
parent ff444c3e
Showing with 27 additions and 137 deletions
extensions/yii/debug/DebugAsset.php
...@@ -17,6 +17,7 @@ class DebugAsset extends AssetBundle ...@@ -17,6 +17,7 @@ class DebugAsset extends AssetBundle
public $sourcePath = '@yii/debug/assets'; public $sourcePath = '@yii/debug/assets';
public $css = [ public $css = [
'main.css', 'main.css',
'toolbar.css',
]; ];
public $depends = [ public $depends = [
'yii\web\YiiAsset', 'yii\web\YiiAsset',
......
extensions/yii/debug/Module.php
...@@ -95,8 +95,8 @@ class Module extends \yii\base\Module ...@@ -95,8 +95,8 @@ class Module extends \yii\base\Module
echo '<div id="yii-debug-toolbar" data-url="' . $url . '" style="display:none"></div>'; echo '<div id="yii-debug-toolbar" data-url="' . $url . '" style="display:none"></div>';
/** @var View $view */ /** @var View $view */
$view = $event->sender; $view = $event->sender;
echo '<style>' . $view->renderPhpFile(__DIR__ . '/views/default/toolbar.css') . '</style>'; echo '<style>' . $view->renderPhpFile(__DIR__ . '/assets/toolbar.css') . '</style>';
echo '<script>' . $view->renderPhpFile(__DIR__ . '/views/default/toolbar.js') . '</script>'; echo '<script>' . $view->renderPhpFile(__DIR__ . '/assets/toolbar.js') . '</script>';
} }
protected function checkAccess() protected function checkAccess()
......
extensions/yii/debug/assets/main.css
body {
padding-top: 60px;
}
#yii-debug-toolbar {
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0 0 20px 0;
padding: 0;
z-index: 1000000;
font: 11px Verdana, Arial, sans-serif;
text-align: left;
height: 40px;
border-bottom: 1px solid #e4e4e4;
background: rgb(237,237,237);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUzJSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,237,237,1)), color-stop(53%,rgba(246,246,246,1)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 );
}
.yii-debug-toolbar-block {
float: left;
margin: 0;
border-right: 1px solid #e4e4e4;
padding: 4px 8px;
line-height: 32px;
}
.yii-debug-toolbar-block.title {
font-size: 1.4em;
}
.yii-debug-toolbar-block a {
text-decoration: none;
color: black;
}
.yii-debug-toolbar-block span {
}
.yii-debug-toolbar-block img {
vertical-align: middle;
}
#yii-debug-toolbar .label {
display: inline-block;
padding: 2px 4px;
font-size: 11.844px;
font-weight: normal;
line-height: 14px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
background-color: #999999;
}
#yii-debug-toolbar .label {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#yii-debug-toolbar .label:empty {
display: none;
}
#yii-debug-toolbar a.label:hover,
#yii-debug-toolbar a.label:focus {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
#yii-debug-toolbar .label-important {
background-color: #b94a48;
}
#yii-debug-toolbar .label-important[href] {
background-color: #953b39;
}
#yii-debug-toolbar .label-warning,
#yii-debug-toolbar .badge-warning {
background-color: #f89406;
}
#yii-debug-toolbar .label-warning[href] {
background-color: #c67605;
}
#yii-debug-toolbar .label-success {
background-color: #468847;
}
#yii-debug-toolbar .label-success[href] {
background-color: #356635;
}
#yii-debug-toolbar .label-info {
background-color: #3a87ad;
}
#yii-debug-toolbar .label-info[href] {
background-color: #2d6987;
}
#yii-debug-toolbar .label-inverse,
#yii-debug-toolbar .badge-inverse {
background-color: #333333;
}
#yii-debug-toolbar .label-inverse[href],
#yii-debug-toolbar .badge-inverse[href] {
background-color: #1a1a1a;
}
span.indent { span.indent {
color: #ccc; color: #ccc;
} }
......
extensions/yii/debug/views/default/toolbar.css → extensions/yii/debug/assets/toolbar.css
#yii-debug-toolbar { #yii-debug-toolbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0; padding: 0;
z-index: 1000000;
font: 11px Verdana, Arial, sans-serif; font: 11px Verdana, Arial, sans-serif;
text-align: left; text-align: left;
min-height: 40px; min-height: 40px;
border-top: 1px solid #ccc; overflow: auto;
background: rgb(237,237,237); background: rgb(237,237,237);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUzJSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUzJSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%); background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%);
...@@ -21,6 +15,21 @@ ...@@ -21,6 +15,21 @@
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 );
} }
.yii-debug-toolbar-top {
border-bottom: 1px solid #e4e4e4;
margin: 0 0 20px 0;
}
.yii-debug-toolbar-bottom {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1000000;
margin: 0;
border-top: 1px solid #ccc;
}
.yii-debug-toolbar-block { .yii-debug-toolbar-block {
float: left; float: left;
margin: 0; margin: 0;
...@@ -28,6 +37,7 @@ ...@@ -28,6 +37,7 @@
padding: 4px 8px; padding: 4px 8px;
line-height: 32px; line-height: 32px;
height: 40px; height: 40px;
white-space: nowrap;
} }
.yii-debug-toolbar-block a { .yii-debug-toolbar-block a {
......
extensions/yii/debug/controllers/DefaultController.php
...@@ -75,6 +75,7 @@ class DefaultController extends Controller ...@@ -75,6 +75,7 @@ class DefaultController extends Controller
return $this->renderPartial('toolbar', [ return $this->renderPartial('toolbar', [
'tag' => $tag, 'tag' => $tag,
'panels' => $this->module->panels, 'panels' => $this->module->panels,
'position' => 'bottom',
]); ]);
} }
......
extensions/yii/debug/views/default/index.php
...@@ -14,7 +14,7 @@ use yii\data\ArrayDataProvider; ...@@ -14,7 +14,7 @@ use yii\data\ArrayDataProvider;
$this->title = 'Yii Debugger'; $this->title = 'Yii Debugger';
?> ?>
<div class="default-index"> <div class="default-index">
<div id="yii-debug-toolbar"> <div id="yii-debug-toolbar" class="yii-debug-toolbar-top">
<div class="yii-debug-toolbar-block title"> <div class="yii-debug-toolbar-block title">
Yii Debugger Yii Debugger
</div> </div>
......
extensions/yii/debug/views/default/toolbar.php
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
* @var \yii\web\View $this * @var \yii\web\View $this
* @var \yii\debug\Panel[] $panels * @var \yii\debug\Panel[] $panels
* @var string $tag * @var string $tag
* @var string $position
*/ */
use yii\debug\panels\ConfigPanel; use yii\debug\panels\ConfigPanel;
...@@ -24,7 +25,7 @@ EOD; ...@@ -24,7 +25,7 @@ EOD;
$url = $panels['request']->getUrl(); $url = $panels['request']->getUrl();
?> ?>
<div id="yii-debug-toolbar"> <div id="yii-debug-toolbar" class="yii-debug-toolbar-<?= $position ?>">
<?php foreach ($panels as $panel): ?> <?php foreach ($panels as $panel): ?>
<?= $panel->getSummary() ?> <?= $panel->getSummary() ?>
<?php endforeach; ?> <?php endforeach; ?>
......
extensions/yii/debug/views/default/view.php
...@@ -16,7 +16,7 @@ use yii\helpers\Html; ...@@ -16,7 +16,7 @@ use yii\helpers\Html;
$this->title = 'Yii Debugger'; $this->title = 'Yii Debugger';
?> ?>
<div class="default-view"> <div class="default-view">
<div id="yii-debug-toolbar"> <div id="yii-debug-toolbar" class="yii-debug-toolbar-top">
<div class="yii-debug-toolbar-block title"> <div class="yii-debug-toolbar-block title">
<?= Html::a('Yii Debugger', ['index'], ['title' => 'Back to main debug page']) ?> <?= Html::a('Yii Debugger', ['index'], ['title' => 'Back to main debug page']) ?>
</div> </div>
......
extensions/yii/debug/views/layouts/main.php
...@@ -7,9 +7,9 @@ use yii\helpers\Html; ...@@ -7,9 +7,9 @@ use yii\helpers\Html;
yii\debug\DebugAsset::register($this); yii\debug\DebugAsset::register($this);
?> ?>
<?php $this->beginPage() ?>
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<?php $this->beginPage() ?>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
...@@ -21,5 +21,5 @@ yii\debug\DebugAsset::register($this); ...@@ -21,5 +21,5 @@ yii\debug\DebugAsset::register($this);
<?= $content ?> <?= $content ?>
<?php $this->endBody() ?> <?php $this->endBody() ?>
</body> </body>
<?php $this->endPage() ?>
</html> </html>
<?php $this->endPage() ?>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment