Business
/
NewsPen
2
0
Fork 0
Code Issues 4 Pull Requests Releases Wiki Activity

Make theme dev tool more robust

Browse Source
master
Skylar Ittner 6 years ago
parent 66cf017d73
commit 23af9df3f2
2 changed files with 172 additions and 2 deletions
Show Stats Download Patch File Download Diff File

170
style_dev/doc.php
Unescape Escape View File

@ -4,6 +4,9 @@
* 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/. */
error_reporting(E_WARNING);
ini_set('display_errors', 'On');
?>
<!DOCTYPE html>
<meta charset="utf-8">
@ -166,6 +169,173 @@
flex: 0 0 calc(50% - 10px);
}
</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="page-safe-line">
<div class="bottom"></div>

4
style_dev/index.php
Unescape Escape View File

@ -43,7 +43,7 @@ background-color: var(--background);</textarea>
<label>Metadata (used for generating theme picker UI):</label>
<textarea name="meta" id="meta" placeholder="JSON metadata" class="form-control" rows="4">
{
"name": "Theme Name",
"name": "My Theme",
"colors": ["#ff0000", "#00ff00", "#0000ff"]
}
</textarea>
@ -51,7 +51,7 @@ background-color: var(--background);</textarea>
<input type="submit" class="btn btn-block btn-primary" value="Reload Preview" />
</form>
</div>
<iframe id="preview" name="preview" src="doc.php">
<iframe id="preview" name="preview" src="about:blank">
</iframe>
<script>

Write Preview
Loading…
Cancel
Save