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

Add colorful theme selection buttons (replace dropdown)

Browse Source
This commit is contained in:
Skylar Ittner 2018-02-07 19:07:59 -07:00
parent 97d31aa549
commit 4bedecccfd
3 changed files with 101 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pages.php
View File

@ -23,6 +23,9 @@ define("PAGES", [
"editpub" => [
"title" => "edit publication",
"navbar" => false,
"styles" => [
"static/css/themeselector.css"
],
"scripts" => [
"static/js/editpub.js"
],

106
pages/editpub.php
View File

@ -1,5 +1,4 @@
<?php
/* This Source Code Form is subject to the terms of the Mozilla Public
* 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/. */
@ -50,23 +49,23 @@ if (!is_empty($VARS['id'])) {
<form role="form" action="action.php" method="POST">
<div class="card border-deep-purple">
<h3 class="card-header text-deep-purple">
<?php
if ($cloning) {
?>
<i class="fas fa-edit"></i> <?php lang2("cloning publication", ['opub' => htmlspecialchars($pubdata['name']), 'npub' => "<span id=\"name_title\">" . htmlspecialchars($pubdata['name']) . "</span>"]); ?>
<?php
} else if ($editing) {
?>
<i class="fas fa-edit"></i> <?php lang2("editing publication", ['pub' => "<span id=\"name_title\">" . htmlspecialchars($pubdata['name']) . "</span>"]); ?>
<?php
} else {
?>
<i class="fas fa-edit"></i> <?php lang("adding publication"); ?>
<?php
}
<h3 class="card-header text-deep-purple">
<?php
if ($cloning) {
?>
</h3>
<i class="fas fa-edit"></i> <?php lang2("cloning publication", ['opub' => htmlspecialchars($pubdata['name']), 'npub' => "<span id=\"name_title\">" . htmlspecialchars($pubdata['name']) . "</span>"]); ?>
<?php
} else if ($editing) {
?>
<i class="fas fa-edit"></i> <?php lang2("editing publication", ['pub' => "<span id=\"name_title\">" . htmlspecialchars($pubdata['name']) . "</span>"]); ?>
<?php
} else {
?>
<i class="fas fa-edit"></i> <?php lang("adding publication"); ?>
<?php
}
?>
</h3>
<div class="card-body">
<div class="form-group">
<label for="name"><i class="fa fa-font"></i> <?php lang("name"); ?></label>
@ -75,28 +74,57 @@ if (!is_empty($VARS['id'])) {
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-6 col-md-4">
<div class="form-group">
<label for="style"><i class="fas fa-star"></i> <?php lang('theme'); ?></label>
<select name="style" class="form-control" required>
<?php
$themedir = __DIR__ . "/../themes/";
$styles = array_diff(scandir($themedir), array('..', '.'));//$database->select("pub_styles", ['styleid', 'stylename']);
foreach ($styles as $s) {
if (!file_exists($themedir . "$s/info.json")) {
continue;
}
$info = json_decode(file_get_contents($themedir . "$s/info.json"), TRUE);
$ss = $pubdata["style"] == $s ? " selected" : "";
echo "<option value=\"$s\"$ss>" . $info['name'] . "</option>\n";
}
?>
</select>
</div>
</div>
<div class="col-12 col-sm-6 col-md-8">
<div class="form-group">
<label for="style"><i class="fas fa-star"></i> <?php lang('theme'); ?></label>
<div class="theme_bin border-deep-purple">
<?php
$themedir = __DIR__ . "/../themes/";
$styles = array_diff(scandir($themedir), array('..', '.'));
foreach ($styles as $s) {
if (!file_exists($themedir . "$s/info.json")) {
continue;
}
$info = json_decode(file_get_contents($themedir . "$s/info.json"), TRUE);
$ss = $pubdata["style"] == $s ? " checked" : "";
$colorvars = json_decode(file_get_contents($themedir . "$s/vars.json"), 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 nonce="<?php echo $SECURE_NONCE; ?>">
#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; ?>" <?php echo $ss; ?> />
<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>
<?php } ?>
</div>
</div>
</div>
@ -124,7 +152,7 @@ if (!is_empty($VARS['id'])) {
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<label for="landscape"><i class="fas fa-repeat"></i> <?php lang('page orientation'); ?></label>
<label for="landscape"><i class="fas fa-sync"></i> <?php lang('page orientation'); ?></label>
<select name="landscape" class="form-control" required>
<option value="0"<?php echo $pubdata["landscape"] == 0 ? " selected" : "" ?>><?php lang("portrait"); ?></option>
<option value="1"<?php echo $pubdata["landscape"] == 1 ? " selected" : "" ?>><?php lang("landscape"); ?></option>

31
static/css/themeselector.css Normal file
View File

@ -0,0 +1,31 @@
/*
This Source Code Form is subject to the terms of the Mozilla Public
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/.
*/
.theme_bin {
max-height: 100px;
overflow-y: scroll;
border-width: 2px;
padding: 5px;
}
.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: 5rem;
height: 2rem;
}