Compare commits

...

3 Commits

Author SHA1 Message Date
5d8720baa9
fix: c98a893fb6
All checks were successful
continuous-integration/drone/push Build is passing
2023-02-28 17:38:35 +08:00
a08a94304f
refactor(blog-editor): ui improvements 2023-02-28 17:32:22 +08:00
691b0a0dcb
fix: page header msg tot 2023-02-28 17:31:54 +08:00
8 changed files with 60 additions and 57 deletions

View File

@ -333,10 +333,10 @@ $comments_pag = new Paginator([
</ul> </ul>
<?php if ($replies) : ?> <?php if ($replies) : ?>
<div id="replies-<?= $comment['id'] ?>" class="rounded bg-secondary-subtle mt-2 border"></div> <div id="replies-<?= $comment['id'] ?>" class="rounded bg-secondary-subtle mt-2 border"></div>
<script>
showCommentReplies('<?= $comment['id'] ?>', <?= $replies_json ?>);
</script>
<?php endif ?> <?php endif ?>
<script>
showCommentReplies('<?= $comment['id'] ?>', <?= $replies_json ?>);
</script>
</div> </div>
</div> </div>
</div> </div>

View File

@ -189,6 +189,7 @@ class UOJBlogEditor {
echoUOJPageHeader('博客预览', [ echoUOJPageHeader('博客预览', [
'ShowPageHeader' => false, 'ShowPageHeader' => false,
'REQUIRE_LIB' => $req_lib, 'REQUIRE_LIB' => $req_lib,
'PageBodyClass' => 'py-3',
]); ]);
echo '<article class="markdown-body">'; echo '<article class="markdown-body">';

View File

@ -1,8 +1,10 @@
<div class="navbar navbar-light navbar-expand-md bg-body shadow-sm mb-4" role="navigation"> <div class="navbar navbar-light navbar-expand-md bg-body shadow-sm
<?php if (!isset($disable_navbar_margin_bottom)) : ?>
mb-4
<?php endif ?>
" role="navigation">
<div class="container"> <div class="container">
<a class="navbar-brand fw-normal" href="<?= HTML::blog_url(UOJUserBlog::id(), '/') ?>">
<a class="navbar-brand" href="<?= HTML::blog_url(UOJUserBlog::id(), '/') ?>">
<img src="<?= HTML::avatar_addr(UOJUserBlog::user(), 48) ?>" alt="Logo" width="24" height="24" class="d-inline-block align-text-top uoj-user-avatar" /> <img src="<?= HTML::avatar_addr(UOJUserBlog::user(), 48) ?>" alt="Logo" width="24" height="24" class="d-inline-block align-text-top uoj-user-avatar" />
<?= UOJUserBlog::id() ?> <?= UOJUserBlog::id() ?>
</a> </a>

View File

@ -1,9 +1,3 @@
<?php
$new_user_msg_num = DB::selectCount("select count(*) from user_msg where receiver = '" . Auth::id() . "' and read_time is null");
$new_system_msg_num = DB::selectCount("select count(*) from user_system_msg where receiver = '" . Auth::id() . "' and read_time is null");
$new_msg_tot = $new_user_msg_num + $new_system_msg_num;
?>
<div class="navbar navbar-light navbar-expand-md bg-body shadow-sm <div class="navbar navbar-light navbar-expand-md bg-body shadow-sm
<?php if (!isset($disable_navbar_margin_bottom)) : ?> <?php if (!isset($disable_navbar_margin_bottom)) : ?>
mb-4 mb-4

View File

@ -1,4 +1,3 @@
<!-- Made with 💖 by Baoshuo ( https://baoshuo.ren ) -->
<?php <?php
if (!isset($PageMainTitle)) { if (!isset($PageMainTitle)) {
$PageMainTitle = UOJConfig::$data['profile']['oj-name']; $PageMainTitle = UOJConfig::$data['profile']['oj-name'];
@ -12,7 +11,12 @@ if (!isset($ShowPageHeader)) {
if (!isset($PageContainerClass)) { if (!isset($PageContainerClass)) {
$PageContainerClass = 'container'; $PageContainerClass = 'container';
} }
$new_user_msg_num = DB::selectCount("select count(*) from user_msg where receiver = '" . Auth::id() . "' and read_time is null");
$new_system_msg_num = DB::selectCount("select count(*) from user_system_msg where receiver = '" . Auth::id() . "' and read_time is null");
$new_msg_tot = $new_user_msg_num + $new_system_msg_num;
?> ?>
<!-- Made with 💖 by Baoshuo ( https://baoshuo.ren ) -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="<?= UOJLocale::locale() ?>"> <html lang="<?= UOJLocale::locale() ?>">
@ -243,7 +247,11 @@ if (!isset($PageContainerClass)) {
<body class="d-flex flex-column min-vh-100 <body class="d-flex flex-column min-vh-100
<?php if ($ShowPageHeader) : ?> <?php if ($ShowPageHeader) : ?>
bg-body-tertiary bg-body-tertiary
<?php endif ?>"> <?php endif ?>
<?php if (isset($PageBodyClass)) : ?>
<?= $PageBodyClass ?>
<?php endif ?>
">
<?php if ($ShowPageHeader) : ?> <?php if ($ShowPageHeader) : ?>
<?php uojIncludeView($PageNav, array('REQUIRE_LIB' => $REQUIRE_LIB)) ?> <?php uojIncludeView($PageNav, array('REQUIRE_LIB' => $REQUIRE_LIB)) ?>
<?php endif ?> <?php endif ?>

View File

@ -1,16 +1,3 @@
.blog-content-md-editor {
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.blog-content-md-editor-toolbar {
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1)));
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
padding: 5px 5px 5px 5px;
}
.blog-content-md-editor-in { .blog-content-md-editor-in {
width: 100%; width: 100%;
height: 500px; height: 500px;

View File

@ -22,13 +22,17 @@ function blog_editor_init(name, editor_config) {
var preview_btn = $('<button type="button" class="btn btn-secondary btn-sm"><i class="bi bi-eye"></i></button>'); var preview_btn = $('<button type="button" class="btn btn-secondary btn-sm"><i class="bi bi-eye"></i></button>');
var bold_btn = $('<button type="button" class="btn btn-secondary btn-sm ml-2"><i class="bi bi-type-bold"></i></button>'); var bold_btn = $('<button type="button" class="btn btn-secondary btn-sm ml-2"><i class="bi bi-type-bold"></i></button>');
var italic_btn = $('<button type="button" class="btn btn-secondary btn-sm"><i class="bi bi-type-italic"></i></button>'); var italic_btn = $('<button type="button" class="btn btn-secondary btn-sm"><i class="bi bi-type-italic"></i></button>');
var strike_btn = $('<button type="button" class="btn btn-secondary btn-sm"><i class="bi bi-type-strikethrough"></i></button>');
var divider_btn = $('<button type="button" class="btn btn-secondary btn-sm"><i class="bi bi-dash"></i></button>');
bootstrap.Tooltip.jQueryInterface.call(save_btn, { container: 'body', title: '保存 (Ctrl-S)' }); bootstrap.Tooltip.jQueryInterface.call(save_btn, { container: 'body', title: '保存 (Ctrl-S)' });
bootstrap.Tooltip.jQueryInterface.call(preview_btn, { container: 'body', title: '预览 (Ctrl-D)' }); bootstrap.Tooltip.jQueryInterface.call(preview_btn, { container: 'body', title: '预览 (Ctrl-D)' });
bootstrap.Tooltip.jQueryInterface.call(bold_btn, { container: 'body', title: '粗体 (Ctrl-B)' }); bootstrap.Tooltip.jQueryInterface.call(bold_btn, { container: 'body', title: '粗体 (Ctrl-B)' });
bootstrap.Tooltip.jQueryInterface.call(italic_btn, { container: 'body', title: '斜体 (Ctrl-I)' }); bootstrap.Tooltip.jQueryInterface.call(italic_btn, { container: 'body', title: '斜体 (Ctrl-I)' });
bootstrap.Tooltip.jQueryInterface.call(strike_btn, { container: 'body', title: '删除线 (Alt-S)' });
bootstrap.Tooltip.jQueryInterface.call(divider_btn, { container: 'body', title: '分割线 (Alt-D)' });
var all_btn = [save_btn, preview_btn, bold_btn, italic_btn]; var all_btn = [save_btn, preview_btn, bold_btn, italic_btn, strike_btn, divider_btn];
// init toolbar // init toolbar
var toolbar = $('<div class="btn-toolbar"></div>'); var toolbar = $('<div class="btn-toolbar"></div>');
@ -39,6 +43,8 @@ function blog_editor_init(name, editor_config) {
toolbar.append($('<div class="btn-group"></div>') toolbar.append($('<div class="btn-group"></div>')
.append(bold_btn) .append(bold_btn)
.append(italic_btn) .append(italic_btn)
.append(strike_btn)
.append(divider_btn)
); );
function set_saved(val) { function set_saved(val) {
@ -81,11 +87,11 @@ function blog_editor_init(name, editor_config) {
// init editor // init editor
if (input_content_md[0]) { if (input_content_md[0]) {
div_container_editor.empty(); div_container_editor.empty();
div_container_editor.wrap('<div class="blog-content-md-editor"></div>'); div_container_editor.wrap('<div class="blog-content-md-editor border rounded" />');
var blog_contend_md_editor = div_container_editor.parent(); var blog_contend_md_editor = div_container_editor.parent();
blog_contend_md_editor.prepend($('<div class="blog-content-md-editor-toolbar"></div>').append(toolbar)); blog_contend_md_editor.prepend($('<div class="blog-content-md-editor-toolbar bg-secondary-subtle px-2 py-1 border-bottom rounded-top" />').append(toolbar));
div_container_editor.wrap('<div class="blog-content-md-editor-in border"></div>'); div_container_editor.wrap('<div class="blog-content-md-editor-in rounded-bottom overflow-hidden" />');
div_container_editor.append($('<div class="border d-flex justify-content-center align-items-center" style="width: 100%; height: 500px;" />').append('<div class="spinner-border text-muted" style="width: 3rem; height: 3rem;" />')); div_container_editor.append($('<div class="d-flex justify-content-center align-items-center" style="width: 100%; height: 500px;" />').append('<div class="spinner-border text-muted" style="width: 3rem; height: 3rem;" />'));
require_monaco({ require_monaco({
markdown: true, markdown: true,
@ -122,6 +128,16 @@ function blog_editor_init(name, editor_config) {
monaco_editor_instance.focus(); monaco_editor_instance.focus();
}); });
strike_btn.click(function() {
monaco_editor_instance.trigger('', 'markdown.extension.editing.toggleStrikethrough');
monaco_editor_instance.focus();
});
divider_btn.click(function() {
monaco_editor_instance.trigger('keyboard', 'type', { text: "\n---\n" });
monaco_editor_instance.focus();
});
monaco_editor_instance.addAction({ monaco_editor_instance.addAction({
id: 'save', id: 'save',
label: 'Save', label: 'Save',
@ -136,15 +152,28 @@ function blog_editor_init(name, editor_config) {
}); });
monaco_editor_instance.addAction({ monaco_editor_instance.addAction({
id: 'italic', id: 'preview',
label: 'Italic', label: 'Preview',
keybindings: [ keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI, monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyD,
], ],
precondition: null, precondition: null,
keybindingContext: null, keybindingContext: null,
run: function(ed) { run: function(ed) {
italic_btn.click(); preview_btn.click();
},
});
monaco_editor_instance.addAction({
id: 'divider',
label: 'Divider',
keybindings: [
monaco.KeyMod.Alt | monaco.KeyCode.KeyD,
],
precondition: null,
keybindingContext: null,
run: function(ed) {
divider_btn.click();
}, },
}); });

View File

@ -667,24 +667,6 @@ function get_monaco_mode(lang) {
} }
// auto save // auto save
function autosave_locally(interval, name, target) {
if (typeof(Storage) === "undefined") {
console.log('autosave_locally: Sorry! No Web Storage support..');
return;
}
var url = window.location.href;
var hp = url.indexOf('#');
var uri = hp == -1 ? url : url.substr(0, hp);
var full_name = name + '@' + uri;
target.val(localStorage.getItem(full_name));
var save = function() {
localStorage.setItem(full_name, target.val());
setTimeout(save, interval);
};
setTimeout(save, interval);
}
function autosave_locally_monaco(interval, name, monaco_instance) { function autosave_locally_monaco(interval, name, monaco_instance) {
if (typeof(Storage) === "undefined") { if (typeof(Storage) === "undefined") {
console.log('autosave_locally_monaco: Sorry! No Web Storage support..'); console.log('autosave_locally_monaco: Sorry! No Web Storage support..');
@ -762,7 +744,7 @@ $.fn.source_code_form_group = function(name, text, langs_options_html) {
monaco_editor_instance = monaco.editor.create(div_editor[0], { monaco_editor_instance = monaco.editor.create(div_editor[0], {
language: mode, language: mode,
automaticLayout: true, automaticLayout: true,
fontSize: "14px", fontSize: "16px",
}); });
$('#' + spinner_id).css('display', 'none !important'); $('#' + spinner_id).css('display', 'none !important');