feat: Light mode default, auth, Posts rename, display scaling, TinyMCE improvements
This commit is contained in:
Jess Rogerson
+77
-10
@@ -35,7 +35,6 @@
|
||||
<div class="mb-3">
|
||||
<label asp-for="IcsSource" class="form-label">ICS Calendar Source</label>
|
||||
<input asp-for="IcsSource" class="form-control" placeholder="https://calendar.example.com/feed.ics" />
|
||||
<div class="form-text">Enter a URL to an .ics calendar feed, or upload an ICS file below.</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Or Upload ICS File</label>
|
||||
@@ -65,13 +64,12 @@
|
||||
<div class="mb-3">
|
||||
<label asp-for="BackgroundSize" class="form-label">Image Sizing</label>
|
||||
<select asp-for="BackgroundSize" class="form-select">
|
||||
<option value="cover">Cover — fill entire slide, crop if needed</option>
|
||||
<option value="contain">Contain — fit whole image, may show background</option>
|
||||
<option value="fill">Fill — stretch to fit exactly</option>
|
||||
<option value="scale-down">Scale Down — shrink to fit, never enlarge</option>
|
||||
<option value="cover">Cover — fill, crop if needed</option>
|
||||
<option value="contain">Contain — fit whole image</option>
|
||||
<option value="fill">Fill — stretch to fit</option>
|
||||
<option value="scale-down">Scale Down — shrink only</option>
|
||||
<option value="auto">Auto — original size</option>
|
||||
</select>
|
||||
<div class="form-text">How the background image fills the slide area.</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label asp-for="CustomCss" class="form-label">Custom CSS</label>
|
||||
@@ -104,19 +102,88 @@
|
||||
function initTinyMCE() {
|
||||
if (tinymce.get('contentEditor')) return;
|
||||
tinymce.init({
|
||||
selector: '#contentEditor', height: 500,
|
||||
selector: '#contentEditor',
|
||||
height: 500,
|
||||
license_key: 'gpl',
|
||||
menubar: 'file edit view insert format table',
|
||||
plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table help wordcount',
|
||||
toolbar: 'undo redo | blocks | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image media table | removeformat code fullscreen',
|
||||
toolbar: 'undo redo | blocks fontsize | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image media table | removeformat code fullscreen',
|
||||
font_size_formats: '8pt 10pt 12pt 14pt 16pt 18pt 20pt 24pt 28pt 32pt 36pt 48pt 64pt 72pt 96pt',
|
||||
images_upload_handler: function (blobInfo) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var fd = new FormData(); fd.append('file', blobInfo.blob(), blobInfo.filename());
|
||||
fetch('/api/upload', { method: 'POST', body: fd }).then(r => r.json()).then(d => resolve(d.location)).catch(e => reject(e));
|
||||
});
|
||||
},
|
||||
content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; color: #fff; background: #1a1a2e; }',
|
||||
skin: 'oxide-dark', content_css: 'dark', promotion: false, branding: false
|
||||
file_picker_types: 'image',
|
||||
file_picker_callback: function (cb, value, meta) {
|
||||
fetch('/api/listuploads').then(r => r.json()).then(function (files) {
|
||||
var input = document.createElement('input');
|
||||
input.type = 'file'; input.accept = 'image/*';
|
||||
|
||||
// If we have existing uploads, show a picker dialog
|
||||
if (files && files.length > 0) {
|
||||
var dialog = document.createElement('div');
|
||||
dialog.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:99999;display:flex;align-items:center;justify-content:center;';
|
||||
var panel = document.createElement('div');
|
||||
panel.style.cssText = 'background:#fff;border-radius:12px;padding:1.5em;max-width:700px;max-height:80vh;overflow-y:auto;width:90%;';
|
||||
panel.innerHTML = '<h4 style="margin:0 0 1em;color:#333;">Select Image or Upload New</h4>';
|
||||
|
||||
var grid = document.createElement('div');
|
||||
grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:1em;';
|
||||
|
||||
files.forEach(function (f) {
|
||||
var thumb = document.createElement('div');
|
||||
thumb.style.cssText = 'cursor:pointer;border:2px solid #ddd;border-radius:8px;overflow:hidden;aspect-ratio:1;background:#f0f0f0;';
|
||||
thumb.innerHTML = '<img src="' + f.value + '" style="width:100%;height:100%;object-fit:cover;" />';
|
||||
thumb.title = f.title;
|
||||
thumb.addEventListener('click', function () {
|
||||
cb(f.value, { title: f.title });
|
||||
document.body.removeChild(dialog);
|
||||
});
|
||||
thumb.addEventListener('mouseenter', function () { this.style.borderColor = '#3b6fd4'; });
|
||||
thumb.addEventListener('mouseleave', function () { this.style.borderColor = '#ddd'; });
|
||||
grid.appendChild(thumb);
|
||||
});
|
||||
|
||||
panel.appendChild(grid);
|
||||
|
||||
var uploadBtn = document.createElement('button');
|
||||
uploadBtn.textContent = 'Upload New Image';
|
||||
uploadBtn.style.cssText = 'background:#3b6fd4;color:#fff;border:none;padding:0.6em 1.5em;border-radius:6px;cursor:pointer;margin-right:0.5em;';
|
||||
uploadBtn.addEventListener('click', function () {
|
||||
document.body.removeChild(dialog);
|
||||
input.click();
|
||||
});
|
||||
|
||||
var cancelBtn = document.createElement('button');
|
||||
cancelBtn.textContent = 'Cancel';
|
||||
cancelBtn.style.cssText = 'background:#eee;color:#333;border:none;padding:0.6em 1.5em;border-radius:6px;cursor:pointer;';
|
||||
cancelBtn.addEventListener('click', function () { document.body.removeChild(dialog); });
|
||||
|
||||
panel.appendChild(uploadBtn);
|
||||
panel.appendChild(cancelBtn);
|
||||
dialog.appendChild(panel);
|
||||
dialog.addEventListener('click', function (e) { if (e.target === dialog) document.body.removeChild(dialog); });
|
||||
document.body.appendChild(dialog);
|
||||
} else {
|
||||
input.click();
|
||||
}
|
||||
|
||||
input.addEventListener('change', function () {
|
||||
if (!this.files[0]) return;
|
||||
var fd = new FormData(); fd.append('file', this.files[0]);
|
||||
fetch('/api/upload', { method: 'POST', body: fd })
|
||||
.then(r => r.json())
|
||||
.then(d => cb(d.location, { title: this.files[0].name }));
|
||||
});
|
||||
}).catch(function () { input.click(); });
|
||||
},
|
||||
content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; color: #000; background: #fff; }',
|
||||
skin: 'oxide',
|
||||
content_css: 'default',
|
||||
promotion: false,
|
||||
branding: false
|
||||
});
|
||||
}
|
||||
if (document.getElementById('slideType').value === '0') initTinyMCE();
|
||||
|
||||
@@ -65,13 +65,12 @@
|
||||
<div class="mb-3">
|
||||
<label asp-for="BackgroundSize" class="form-label">Image Sizing</label>
|
||||
<select asp-for="BackgroundSize" class="form-select">
|
||||
<option value="cover">Cover — fill entire slide, crop if needed</option>
|
||||
<option value="contain">Contain — fit whole image, may show background</option>
|
||||
<option value="fill">Fill — stretch to fit exactly</option>
|
||||
<option value="scale-down">Scale Down — shrink to fit, never enlarge</option>
|
||||
<option value="cover">Cover — fill, crop if needed</option>
|
||||
<option value="contain">Contain — fit whole image</option>
|
||||
<option value="fill">Fill — stretch to fit</option>
|
||||
<option value="scale-down">Scale Down — shrink only</option>
|
||||
<option value="auto">Auto — original size</option>
|
||||
</select>
|
||||
<div class="form-text">How the background image fills the slide area.</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label asp-for="CustomCss" class="form-label">Custom CSS</label>
|
||||
@@ -103,19 +102,68 @@
|
||||
function initTinyMCE() {
|
||||
if (tinymce.get('contentEditor')) return;
|
||||
tinymce.init({
|
||||
selector: '#contentEditor', height: 500,
|
||||
selector: '#contentEditor',
|
||||
height: 500,
|
||||
license_key: 'gpl',
|
||||
menubar: 'file edit view insert format table',
|
||||
plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table help wordcount',
|
||||
toolbar: 'undo redo | blocks | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image media table | removeformat code fullscreen',
|
||||
toolbar: 'undo redo | blocks fontsize | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image media table | removeformat code fullscreen',
|
||||
font_size_formats: '8pt 10pt 12pt 14pt 16pt 18pt 20pt 24pt 28pt 32pt 36pt 48pt 64pt 72pt 96pt',
|
||||
images_upload_handler: function (blobInfo) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var fd = new FormData(); fd.append('file', blobInfo.blob(), blobInfo.filename());
|
||||
fetch('/api/upload', { method: 'POST', body: fd }).then(r => r.json()).then(d => resolve(d.location)).catch(e => reject(e));
|
||||
});
|
||||
},
|
||||
content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; color: #fff; background: #1a1a2e; }',
|
||||
skin: 'oxide-dark', content_css: 'dark', promotion: false, branding: false
|
||||
file_picker_types: 'image',
|
||||
file_picker_callback: function (cb, value, meta) {
|
||||
fetch('/api/listuploads').then(r => r.json()).then(function (files) {
|
||||
var input = document.createElement('input');
|
||||
input.type = 'file'; input.accept = 'image/*';
|
||||
if (files && files.length > 0) {
|
||||
var dialog = document.createElement('div');
|
||||
dialog.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:99999;display:flex;align-items:center;justify-content:center;';
|
||||
var panel = document.createElement('div');
|
||||
panel.style.cssText = 'background:#fff;border-radius:12px;padding:1.5em;max-width:700px;max-height:80vh;overflow-y:auto;width:90%;';
|
||||
panel.innerHTML = '<h4 style="margin:0 0 1em;color:#333;">Select Image or Upload New</h4>';
|
||||
var grid = document.createElement('div');
|
||||
grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:1em;';
|
||||
files.forEach(function (f) {
|
||||
var thumb = document.createElement('div');
|
||||
thumb.style.cssText = 'cursor:pointer;border:2px solid #ddd;border-radius:8px;overflow:hidden;aspect-ratio:1;background:#f0f0f0;';
|
||||
thumb.innerHTML = '<img src="' + f.value + '" style="width:100%;height:100%;object-fit:cover;" />';
|
||||
thumb.title = f.title;
|
||||
thumb.addEventListener('click', function () { cb(f.value, { title: f.title }); document.body.removeChild(dialog); });
|
||||
thumb.addEventListener('mouseenter', function () { this.style.borderColor = '#3b6fd4'; });
|
||||
thumb.addEventListener('mouseleave', function () { this.style.borderColor = '#ddd'; });
|
||||
grid.appendChild(thumb);
|
||||
});
|
||||
panel.appendChild(grid);
|
||||
var uploadBtn = document.createElement('button');
|
||||
uploadBtn.textContent = 'Upload New Image';
|
||||
uploadBtn.style.cssText = 'background:#3b6fd4;color:#fff;border:none;padding:0.6em 1.5em;border-radius:6px;cursor:pointer;margin-right:0.5em;';
|
||||
uploadBtn.addEventListener('click', function () { document.body.removeChild(dialog); input.click(); });
|
||||
var cancelBtn = document.createElement('button');
|
||||
cancelBtn.textContent = 'Cancel';
|
||||
cancelBtn.style.cssText = 'background:#eee;color:#333;border:none;padding:0.6em 1.5em;border-radius:6px;cursor:pointer;';
|
||||
cancelBtn.addEventListener('click', function () { document.body.removeChild(dialog); });
|
||||
panel.appendChild(uploadBtn); panel.appendChild(cancelBtn);
|
||||
dialog.appendChild(panel);
|
||||
dialog.addEventListener('click', function (e) { if (e.target === dialog) document.body.removeChild(dialog); });
|
||||
document.body.appendChild(dialog);
|
||||
} else { input.click(); }
|
||||
input.addEventListener('change', function () {
|
||||
if (!this.files[0]) return;
|
||||
var fd = new FormData(); fd.append('file', this.files[0]);
|
||||
fetch('/api/upload', { method: 'POST', body: fd }).then(r => r.json()).then(d => cb(d.location, { title: this.files[0].name }));
|
||||
});
|
||||
}).catch(function () { input.click(); });
|
||||
},
|
||||
content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; color: #000; background: #fff; }',
|
||||
skin: 'oxide',
|
||||
content_css: 'default',
|
||||
promotion: false,
|
||||
branding: false
|
||||
});
|
||||
}
|
||||
if (document.getElementById('slideType').value === '0') initTinyMCE();
|
||||
|
||||
Reference in New Issue
Block a user