Public/pics
2
2
Fork 2
Code Issues 6 Pull Requests 2 Releases Wiki Activity

EditAssetForm: replace widget class with generic content box

Browse Source
This commit is contained in:
Aaron van Geffen 2023-03-11 14:31:44 +01:00
parent a6fd8d2764
commit 5bb8c020bd
4 changed files with 27 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/css/admin.css
View File

@ -74,30 +74,6 @@ body {
} }
/* Admin widgets
------------------*/
.widget {
background: #fff;
padding: 25px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.widget h3 {
margin: 0 0 1em;
font: 400 18px "Raleway", sans-serif;
}
.widget p, .errormsg p {
margin: 0;
}
.widget ul {
margin: 0;
list-style: none;
padding: 0;
}
.widget li {
line-height: 1.7em;
}
/* Edit icon on tiled grids /* Edit icon on tiled grids
-----------------------------*/ -----------------------------*/
.tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama { .tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama {
@ -134,7 +110,7 @@ body {
color: #fff; color: #fff;
} }
#crop_editor input[type=number] { #crop_editor input[type=number] {
width: 50px; width: 75px;
background: #555; background: #555;
color: #fff; color: #fff;
} }

10
public/js/crop_editor.js
View File

@ -3,7 +3,7 @@ class CropEditor {
this.opt = opt; this.opt = opt;
this.edit_crop_button = document.createElement("span"); this.edit_crop_button = document.createElement("span");
this.edit_crop_button.className = "btn"; this.edit_crop_button.className = "btn btn-light";
this.edit_crop_button.textContent = "Edit crop"; this.edit_crop_button.textContent = "Edit crop";
this.edit_crop_button.addEventListener('click', this.show.bind(this)); this.edit_crop_button.addEventListener('click', this.show.bind(this));
@ -34,6 +34,7 @@ class CropEditor {
this.position.appendChild(source_x_label); this.position.appendChild(source_x_label);
this.source_x = document.createElement("input"); this.source_x = document.createElement("input");
this.source_x.className = 'form-control d-inline';
this.source_x.type = 'number'; this.source_x.type = 'number';
this.source_x.addEventListener("change", this.positionBoundary.bind(this)); this.source_x.addEventListener("change", this.positionBoundary.bind(this));
this.source_x.addEventListener("keyup", this.positionBoundary.bind(this)); this.source_x.addEventListener("keyup", this.positionBoundary.bind(this));
@ -43,6 +44,7 @@ class CropEditor {
this.position.appendChild(source_y_label); this.position.appendChild(source_y_label);
this.source_y = document.createElement("input"); this.source_y = document.createElement("input");
this.source_y.className = 'form-control d-inline';
this.source_y.type = 'number'; this.source_y.type = 'number';
this.source_y.addEventListener("change", this.positionBoundary.bind(this)); this.source_y.addEventListener("change", this.positionBoundary.bind(this));
this.source_y.addEventListener("keyup", this.positionBoundary.bind(this)); this.source_y.addEventListener("keyup", this.positionBoundary.bind(this));
@ -52,6 +54,7 @@ class CropEditor {
this.position.appendChild(crop_width_label); this.position.appendChild(crop_width_label);
this.crop_width = document.createElement("input"); this.crop_width = document.createElement("input");
this.crop_width.className = 'form-control d-inline';
this.crop_width.type = 'number'; this.crop_width.type = 'number';
this.crop_width.addEventListener("change", this.positionBoundary.bind(this)); this.crop_width.addEventListener("change", this.positionBoundary.bind(this));
this.crop_width.addEventListener("keyup", this.positionBoundary.bind(this)); this.crop_width.addEventListener("keyup", this.positionBoundary.bind(this));
@ -61,6 +64,7 @@ class CropEditor {
this.position.appendChild(crop_height_label); this.position.appendChild(crop_height_label);
this.crop_height = document.createElement("input"); this.crop_height = document.createElement("input");
this.crop_height.className = 'form-control d-inline';
this.crop_height.type = 'number'; this.crop_height.type = 'number';
this.crop_height.addEventListener("change", this.positionBoundary.bind(this)); this.crop_height.addEventListener("change", this.positionBoundary.bind(this));
this.crop_height.addEventListener("keyup", this.positionBoundary.bind(this)); this.crop_height.addEventListener("keyup", this.positionBoundary.bind(this));
@ -78,13 +82,13 @@ class CropEditor {
this.crop_constrain_label.appendChild(this.crop_constrain_text); this.crop_constrain_label.appendChild(this.crop_constrain_text);
this.save_button = document.createElement("span"); this.save_button = document.createElement("span");
this.save_button.className = "btn"; this.save_button.className = "btn btn-light";
this.save_button.textContent = "Save"; this.save_button.textContent = "Save";
this.save_button.addEventListener('click', this.save.bind(this)); this.save_button.addEventListener('click', this.save.bind(this));
this.position.appendChild(this.save_button); this.position.appendChild(this.save_button);
this.abort_button = document.createElement("span"); this.abort_button = document.createElement("span");
this.abort_button.className = "btn btn-red"; this.abort_button.className = "btn btn-danger";
this.abort_button.textContent = "Abort"; this.abort_button.textContent = "Abort";
this.abort_button.addEventListener('click', this.hide.bind(this)); this.abort_button.addEventListener('click', this.hide.bind(this));
this.position.appendChild(this.abort_button); this.position.appendChild(this.abort_button);

6
templates/DummyBox.php
View File

@ -8,9 +8,9 @@
class DummyBox extends SubTemplate class DummyBox extends SubTemplate
{ {
private $_class; protected $_class;
private $_content; protected $_content;
private $_title; protected $_title;
public function __construct($title = '', $content = '', $class = '') public function __construct($title = '', $content = '', $class = '')
{ {

30
templates/EditAssetForm.php
View File

@ -6,7 +6,7 @@
* Kabuki CMS (C) 2013-2015, Aaron van Geffen * Kabuki CMS (C) 2013-2015, Aaron van Geffen
*****************************************************************************/ *****************************************************************************/
class EditAssetForm extends SubTemplate class EditAssetForm extends Template
{ {
private $asset; private $asset;
private $thumbs; private $thumbs;
@ -17,14 +17,14 @@ class EditAssetForm extends SubTemplate
$this->thumbs = $thumbs; $this->thumbs = $thumbs;
} }
protected function html_content() public function html_main()
{ {
echo ' echo '
<form id="asset_form" action="" method="post" enctype="multipart/form-data"> <form id="asset_form" action="" method="post" enctype="multipart/form-data">
<div class="boxed_content" style="margin-bottom: 2%"> <div class="content-box">
<div style="float: right"> <div style="float: right">
<a class="btn btn-red" href="', BASEURL, '/', $this->asset->getSlug(), '?delete_confirmed">Delete asset</a> <a class="btn btn-danger" href="', BASEURL, '/', $this->asset->getSlug(), '?delete_confirmed">Delete asset</a>
<input type="submit" value="Save asset data"> <input class="btn btn-primary" type="submit" value="Save asset data">
</div> </div>
<h2>Edit asset \'', $this->asset->getTitle(), '\' (', $this->asset->getFilename(), ')</h2> <h2>Edit asset \'', $this->asset->getTitle(), '\' (', $this->asset->getFilename(), ')</h2>
</div>'; </div>';
@ -32,14 +32,15 @@ class EditAssetForm extends SubTemplate
$this->section_replace(); $this->section_replace();
echo ' echo '
<div style="float: left; width: 60%; margin-right: 2%">'; <div class="row">
<div class="col-md-8">';
$this->section_key_info(); $this->section_key_info();
$this->section_asset_meta(); $this->section_asset_meta();
echo ' echo '
</div> </div>
<div style="float: left; width: 38%;">'; <div class="col-md-4">';
if (!empty($this->thumbs)) if (!empty($this->thumbs))
$this->section_thumbnails(); $this->section_thumbnails();
@ -47,11 +48,12 @@ class EditAssetForm extends SubTemplate
$this->section_linked_tags(); $this->section_linked_tags();
echo ' echo '
</div>'; </div>';
$this->section_crop_editor(); $this->section_crop_editor();
echo ' echo '
</div>
</form>'; </form>';
} }
@ -59,7 +61,7 @@ class EditAssetForm extends SubTemplate
{ {
$date_captured = $this->asset->getDateCaptured(); $date_captured = $this->asset->getDateCaptured();
echo ' echo '
<div class="widget key_info"> <div class="content-box key_info">
<h3>Key info</h3> <h3>Key info</h3>
<dl> <dl>
<dt>Title</dt> <dt>Title</dt>
@ -81,7 +83,7 @@ class EditAssetForm extends SubTemplate
protected function section_linked_tags() protected function section_linked_tags()
{ {
echo ' echo '
<div class="widget linked_tags" style="margin-top: 2%"> <div class="content-box linked_tags">
<h3>Linked tags</h3> <h3>Linked tags</h3>
<ul id="tag_list">'; <ul id="tag_list">';
@ -134,7 +136,7 @@ class EditAssetForm extends SubTemplate
protected function section_thumbnails() protected function section_thumbnails()
{ {
echo ' echo '
<div class="widget linked_thumbs"> <div class="content-box linked_thumbs">
<h3>Thumbnails</h3> <h3>Thumbnails</h3>
View: <select id="thumbnail_src">'; View: <select id="thumbnail_src">';
@ -218,7 +220,7 @@ class EditAssetForm extends SubTemplate
protected function section_asset_meta() protected function section_asset_meta()
{ {
echo ' echo '
<div class="widget asset_meta" style="margin-top: 2%"> <div class="content-box asset_meta" style="margin-top: 2%">
<h3>Asset meta data</h3> <h3>Asset meta data</h3>
<ul>'; <ul>';
@ -246,7 +248,7 @@ class EditAssetForm extends SubTemplate
protected function section_replace() protected function section_replace()
{ {
echo ' echo '
<div class="widget replace_asset" style="margin-bottom: 2%; display: block"> <div class="content-box replace_asset" style="margin-bottom: 2%; display: block">
<h3>Replace asset</h3> <h3>Replace asset</h3>
File: <input type="file" name="replacement"> File: <input type="file" name="replacement">
Target: <select name="replacement_target"> Target: <select name="replacement_target">