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
public $sourcePath = '@yii/debug/assets';
public $css = [
'main.css',
'toolbar.css',
];
public $depends = [
'yii\web\YiiAsset',
......
extensions/yii/debug/Module.php
......@@ -95,8 +95,8 @@ class Module extends \yii\base\Module
echo '<div id="yii-debug-toolbar" data-url="' . $url . '" style="display:none"></div>';
/** @var View $view */
$view = $event->sender;
echo '<style>' . $view->renderPhpFile(__DIR__ . '/views/default/toolbar.css') . '</style>';
echo '<script>' . $view->renderPhpFile(__DIR__ . '/views/default/toolbar.js') . '</script>';
echo '<style>' . $view->renderPhpFile(__DIR__ . '/assets/toolbar.css') . '</style>';
echo '<script>' . $view->renderPhpFile(__DIR__ . '/assets/toolbar.js') . '</script>';
}
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 {
color: #ccc;
}
......
extensions/yii/debug/views/default/toolbar.css → extensions/yii/debug/assets/toolbar.css
#yii-debug-toolbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
z-index: 1000000;
font: 11px Verdana, Arial, sans-serif;
text-align: left;
min-height: 40px;
border-top: 1px solid #ccc;
overflow: auto;
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%);
......@@ -21,6 +15,21 @@
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 {
float: left;
margin: 0;
......@@ -28,6 +37,7 @@
padding: 4px 8px;
line-height: 32px;
height: 40px;
white-space: nowrap;
}
.yii-debug-toolbar-block a {
......
extensions/yii/debug/controllers/DefaultController.php
......@@ -75,6 +75,7 @@ class DefaultController extends Controller
return $this->renderPartial('toolbar', [
'tag' => $tag,
'panels' => $this->module->panels,
'position' => 'bottom',
]);
}
......
extensions/yii/debug/views/default/index.php
......@@ -14,7 +14,7 @@ use yii\data\ArrayDataProvider;
$this->title = 'Yii Debugger';
?>
<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">
Yii Debugger
</div>
......
extensions/yii/debug/views/default/toolbar.php
......@@ -3,6 +3,7 @@
* @var \yii\web\View $this
* @var \yii\debug\Panel[] $panels
* @var string $tag
* @var string $position
*/
use yii\debug\panels\ConfigPanel;
......@@ -24,7 +25,7 @@ EOD;
$url = $panels['request']->getUrl();
?>
<div id="yii-debug-toolbar">
<div id="yii-debug-toolbar" class="yii-debug-toolbar-<?= $position ?>">
<?php foreach ($panels as $panel): ?>
<?= $panel->getSummary() ?>
<?php endforeach; ?>
......
extensions/yii/debug/views/default/view.php
......@@ -16,7 +16,7 @@ use yii\helpers\Html;
$this->title = 'Yii Debugger';
?>
<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">
<?= Html::a('Yii Debugger', ['index'], ['title' => 'Back to main debug page']) ?>
</div>
......
extensions/yii/debug/views/layouts/main.php
......@@ -7,9 +7,9 @@ use yii\helpers\Html;
yii\debug\DebugAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html>
<?php $this->beginPage() ?>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
......@@ -21,5 +21,5 @@ yii\debug\DebugAsset::register($this);
<?= $content ?>
<?php $this->endBody() ?>
</body>
<?php $this->endPage() ?>
</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