fix: c98a893fb6

refactor(blog-editor): ui improvements
fix: page header msg tot
2024-11-23 21:38:41 +00:00 · 2023-02-28 17:38:35 +08:00 · 2023-02-28 17:32:22 +08:00 · 2023-02-28 17:31:54 +08:00
8 changed files with 60 additions and 57 deletions
--- a/web/app/controllers/subdomain/blog/blog.php
+++ b/web/app/controllers/subdomain/blog/blog.php
@ -333,10 +333,10 @@ $comments_pag = new Paginator([
 						</ul>
 						<?php if ($replies) : ?>
 							<div id="replies-<?= $comment['id'] ?>" class="rounded bg-secondary-subtle mt-2 border"></div>
+						<?php endif ?>
 						<script>
 							showCommentReplies('<?= $comment['id'] ?>', <?= $replies_json ?>);
 						</script>
-						<?php endif ?>
 					</div>
 				</div>
 			</div>
--- a/web/app/models/UOJBlogEditor.php
+++ b/web/app/models/UOJBlogEditor.php
@ -189,6 +189,7 @@ class UOJBlogEditor {
 				echoUOJPageHeader('博客预览', [
 					'ShowPageHeader' => false,
 					'REQUIRE_LIB' => $req_lib,
+					'PageBodyClass' => 'py-3',
 				]);

 				echo '<article class="markdown-body">';
--- a/web/app/views/blog-nav.php
+++ b/web/app/views/blog-nav.php
@ -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">
-
-		<a class="navbar-brand" href="<?= HTML::blog_url(UOJUserBlog::id(), '/') ?>">
+		<a class="navbar-brand fw-normal" 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" />
 			<?= UOJUserBlog::id() ?>
 		</a>
--- a/web/app/views/main-nav.php
+++ b/web/app/views/main-nav.php
@ -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
 <?php if (!isset($disable_navbar_margin_bottom)) : ?>
 mb-4
--- a/web/app/views/page-header.php
+++ b/web/app/views/page-header.php
@ -1,4 +1,3 @@
-<!-- Made with 💖 by Baoshuo ( https://baoshuo.ren ) -->
 <?php
 if (!isset($PageMainTitle)) {
 	$PageMainTitle = UOJConfig::$data['profile']['oj-name'];
@ -12,7 +11,12 @@ if (!isset($ShowPageHeader)) {
 if (!isset($PageContainerClass)) {
 	$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>
 <html lang="<?= UOJLocale::locale() ?>">

@ -243,7 +247,11 @@ if (!isset($PageContainerClass)) {
 <body class="d-flex flex-column min-vh-100
 	<?php if ($ShowPageHeader) : ?>
 		bg-body-tertiary
-	<?php endif ?>">
+	<?php endif ?>
+	<?php if (isset($PageBodyClass)) : ?>
+		<?= $PageBodyClass ?>
+	<?php endif ?>
+	">
 	<?php if ($ShowPageHeader) : ?>
 		<?php uojIncludeView($PageNav, array('REQUIRE_LIB' => $REQUIRE_LIB)) ?>
 	<?php endif ?>
--- a/web/css/blog-editor.css
+++ b/web/css/blog-editor.css
@ -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 {
 	width: 100%;
 	height: 500px;
--- a/web/js/blog-editor/blog-editor.js
+++ b/web/js/blog-editor/blog-editor.js
@ -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 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 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(preview_btn, { container: 'body', title: '预览 (Ctrl-D)'	});
 	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(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
 	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>')
 		.append(bold_btn)
 		.append(italic_btn)
+		.append(strike_btn)
+		.append(divider_btn)
 	);
 	
 	function set_saved(val) {
@ -81,11 +87,11 @@ function blog_editor_init(name, editor_config) {
 	// init editor
 	if (input_content_md[0]) {
 		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();
-		blog_contend_md_editor.prepend($('<div class="blog-content-md-editor-toolbar"></div>').append(toolbar));
-		div_container_editor.wrap('<div class="blog-content-md-editor-in border"></div>');
-		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;" />'));
+		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 rounded-bottom overflow-hidden" />');
+		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({
 			markdown: true,
@ -122,6 +128,16 @@ function blog_editor_init(name, editor_config) {
 				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({
 				id: 'save',
 				label: 'Save',
@ -136,15 +152,28 @@ function blog_editor_init(name, editor_config) {
 			});

 			monaco_editor_instance.addAction({
-				id: 'italic',
-				label: 'Italic',
+				id: 'preview',
+				label: 'Preview',
 				keybindings: [
-					monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI,
+					monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyD,
 				],
 				precondition: null,
 				keybindingContext: null,
 				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();
 				},
 			});

--- a/web/js/uoj.js
+++ b/web/js/uoj.js
@ -667,24 +667,6 @@ function get_monaco_mode(lang) {
 }

 // 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) {
 	if (typeof(Storage) === "undefined") {
 		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], {
 					language: mode,
 					automaticLayout: true,
-					fontSize: "14px",
+					fontSize: "16px",
 				});

 				$('#' + spinner_id).css('display', 'none !important');
Author	SHA1	Message	Date
Baoshuo	5d8720baa9	fix: `c98a893fb6` All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-28 17:38:35 +08:00
Baoshuo	a08a94304f	refactor(blog-editor): ui improvements	2023-02-28 17:32:22 +08:00
Baoshuo	691b0a0dcb	fix: page header msg tot	2023-02-28 17:31:54 +08:00