Make theme dev tool more robust
This commit is contained in:
parent
66cf017d73
commit
23af9df3f2
@ -4,6 +4,9 @@
|
|||||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||||
|
|
||||||
|
error_reporting(E_WARNING);
|
||||||
|
ini_set('display_errors', 'On');
|
||||||
|
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@ -166,6 +169,173 @@
|
|||||||
flex: 0 0 calc(50% - 10px);
|
flex: 0 0 calc(50% - 10px);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style>
|
||||||
|
.theme_bin {
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme_bin label input[type=radio] {
|
||||||
|
visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme_bin label input[type=radio] + .theme {
|
||||||
|
cursor: pointer;
|
||||||
|
border: 0px solid transparent;
|
||||||
|
margin: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme_bin label input[type=radio]:checked + .theme {
|
||||||
|
border: 3px solid rgba(0,0,0,.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme_bin label .theme .theme_colors {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 5rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<?php
|
||||||
|
$error = "";
|
||||||
|
if (json_decode($_POST['vars']) === null) {
|
||||||
|
$error .= "Invalid JSON for color variables!";
|
||||||
|
}
|
||||||
|
if (json_decode($_POST['meta']) === null) {
|
||||||
|
if ($error != "") {
|
||||||
|
$error .= "<br />";
|
||||||
|
}
|
||||||
|
$error .= "Invalid JSON for metadata!";
|
||||||
|
}
|
||||||
|
if ($error != "") {
|
||||||
|
?>
|
||||||
|
<div class="alert alert-danger"><b>Error:</b><br /><?php echo $error; ?></div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<h4>Theme menu preview:</h4>
|
||||||
|
<div class="theme_bin">
|
||||||
|
<label>
|
||||||
|
<style>
|
||||||
|
#theme_blue {
|
||||||
|
background: #083045;
|
||||||
|
color: #eef0f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#themecolors_blue {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#284a5c,
|
||||||
|
#284a5c 0%,
|
||||||
|
#284a5c 33.333333333333%,
|
||||||
|
#bc9e52 33.333333333333%,
|
||||||
|
#bc9e52 66.666666666667%,
|
||||||
|
#ff9e01 66.666666666667%,
|
||||||
|
#ff9e01 100% );
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<input type="radio" name="style" value="blue" />
|
||||||
|
<div class="card theme" id="theme_blue">
|
||||||
|
<div class="theme_colors" id="themecolors_blue">
|
||||||
|
</div>
|
||||||
|
<div class="card-body m-0 p-1">
|
||||||
|
Blue </div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<?php
|
||||||
|
$info = json_decode($_POST['meta'], TRUE);
|
||||||
|
$s = 1;
|
||||||
|
$colorvars = json_decode($_POST['vars'], TRUE);
|
||||||
|
$themecsscolors = "";
|
||||||
|
$totalcolors = count($info['colors']);
|
||||||
|
for ($i = 0; $i < $totalcolors; $i++) {
|
||||||
|
if ($i == 0) {
|
||||||
|
$themecsscolors = $info['colors'][$i] . ",\n";
|
||||||
|
}
|
||||||
|
$themecsscolors .= $info['colors'][$i] . " " . (($i) / $totalcolors * 100) . "%,\n";
|
||||||
|
$themecsscolors .= $info['colors'][$i] . " " . (($i + 1) / $totalcolors * 100) . "%";
|
||||||
|
if ($i != $totalcolors - 1) {
|
||||||
|
$themecsscolors .= ",\n";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<label>
|
||||||
|
<style>
|
||||||
|
#theme_<?php echo $s; ?> {
|
||||||
|
background: <?php echo $colorvars['background']; ?>;
|
||||||
|
color: <?php echo $colorvars['text']; ?>;
|
||||||
|
}
|
||||||
|
|
||||||
|
#themecolors_<?php echo $s; ?> {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
<?php echo $themecsscolors; ?>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<input type="radio" name="style" value="<?php echo $s; ?>" checked />
|
||||||
|
<div class="card theme" id="theme_<?php echo $s; ?>">
|
||||||
|
<div class="theme_colors" id="themecolors_<?php echo $s; ?>">
|
||||||
|
</div>
|
||||||
|
<div class="card-body m-0 p-1">
|
||||||
|
<?php echo $info['name']; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<style>
|
||||||
|
#theme_plain {
|
||||||
|
background: #ffffff;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#themecolors_plain {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#000000,
|
||||||
|
#000000 0%,
|
||||||
|
#000000 33.333333333333%,
|
||||||
|
#ffffff 33.333333333333%,
|
||||||
|
#ffffff 66.666666666667%,
|
||||||
|
#2196F3 66.666666666667%,
|
||||||
|
#2196F3 100% );
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<input type="radio" name="style" value="plain" />
|
||||||
|
<div class="card theme" id="theme_plain">
|
||||||
|
<div class="theme_colors" id="themecolors_plain">
|
||||||
|
</div>
|
||||||
|
<div class="card-body m-0 p-1">
|
||||||
|
Plain </div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<style>
|
||||||
|
#theme_sepia {
|
||||||
|
background: #d4c69f;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#themecolors_sepia {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#bc7652,
|
||||||
|
#bc7652 0%,
|
||||||
|
#bc7652 33.333333333333%,
|
||||||
|
#ffe46f 33.333333333333%,
|
||||||
|
#ffe46f 66.666666666667%,
|
||||||
|
#ff9e01 66.666666666667%,
|
||||||
|
#ff9e01 100% );
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<input type="radio" name="style" value="sepia" />
|
||||||
|
<div class="card theme" id="theme_sepia">
|
||||||
|
<div class="theme_colors" id="themecolors_sepia">
|
||||||
|
</div>
|
||||||
|
<div class="card-body m-0 p-1">
|
||||||
|
Sepia </div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<h4>Theme preview:</h4>
|
||||||
<div class="pub-content">
|
<div class="pub-content">
|
||||||
<div class="page-safe-line">
|
<div class="page-safe-line">
|
||||||
<div class="bottom"></div>
|
<div class="bottom"></div>
|
||||||
|
|||||||
@ -43,7 +43,7 @@ background-color: var(--background);</textarea>
|
|||||||
<label>Metadata (used for generating theme picker UI):</label>
|
<label>Metadata (used for generating theme picker UI):</label>
|
||||||
<textarea name="meta" id="meta" placeholder="JSON metadata" class="form-control" rows="4">
|
<textarea name="meta" id="meta" placeholder="JSON metadata" class="form-control" rows="4">
|
||||||
{
|
{
|
||||||
"name": "Theme Name",
|
"name": "My Theme",
|
||||||
"colors": ["#ff0000", "#00ff00", "#0000ff"]
|
"colors": ["#ff0000", "#00ff00", "#0000ff"]
|
||||||
}
|
}
|
||||||
</textarea>
|
</textarea>
|
||||||
@ -51,7 +51,7 @@ background-color: var(--background);</textarea>
|
|||||||
<input type="submit" class="btn btn-block btn-primary" value="Reload Preview" />
|
<input type="submit" class="btn btn-block btn-primary" value="Reload Preview" />
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<iframe id="preview" name="preview" src="doc.php">
|
<iframe id="preview" name="preview" src="about:blank">
|
||||||
|
|
||||||
</iframe>
|
</iframe>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user