Pārlūkot izejas kodu

:art: 优化译文菜单

Bhikkhu-Kosalla 5 gadi atpakaļ
vecāks
revīzija
83f9e1046b
4 mainītis faili ar 176 papildinājumiem un 136 dzēšanām
  1. 1 1
      app/article/index.php
  2. 1 1
      app/reader/index.php
  3. 53 35
      app/term/note.js
  4. 121 99
      app/term/term.css

+ 1 - 1
app/article/index.php

@@ -256,7 +256,7 @@ require_once "../pcdl/html_head.php";
 	<div id="article_author"><?php echo $_local->gui->author; ?></div>
 </div>
 <div id="contents_view">
-	<div id="contents_div" style="padding: 0 1em 0 30px;">
+	<div id="contents_div" style="padding: 0 1em 0 30px;width:70vw;">
 		<div id="contents">
 		<?php echo $_local->gui->loading; ?>...
 		</div>

+ 1 - 1
app/reader/index.php

@@ -347,7 +347,7 @@ require_once "../pcdl/html_head.php";
 	</div>
 </div>
 <div id="contents_view">
-	<div id="contents_div" style="padding: 0 1em 0 30px;">
+	<div id="contents_div" style="padding: 0 1em 0 30px;width:70vw;">
 		<div id="contents">
 		<?php echo $_local->gui->loading; ?>...
 		</div>

+ 53 - 35
app/term/note.js

@@ -63,7 +63,7 @@ function note_sent_edit_dlg_init() {
 }
 function note_init(input) {
 	let newString = input.replace(/\{\{/g, '<note info="');
-	newString = newString.replace(/\}\}/g, '" style="width=70vw;"></note>');
+	newString = newString.replace(/\}\}/g, '" ></note>');
 
 	let output = "<div>";
 	output += marked(newString);
@@ -469,7 +469,40 @@ function note_json_html(in_json) {
 	//output += "<div class='translation_div'>";
 	for (const iterator of in_json.translation) {
 		output += "<div class='tran' lang='" + iterator.lang + "'>";
-
+		//译文工具按钮开始
+		output += "<div class='tran_text_tool_botton' onclick='tool_bar_show(this)'>";
+		output +=
+			"<div class='icon_expand' style='width: 0.8em;height: 0.8em;min-width: 0.8em;min-height: 0.8em;'></div>";
+		//译文工具栏开始
+		output += "<div class='tran_text_tool_bar'>";
+		output += "<li class = 'tip_buttom' ";
+		output +=
+			" onclick=\"note_edit_sentence('" +
+			in_json.book +
+			"' ,'" +
+			in_json.para +
+			"' ,'" +
+			in_json.begin +
+			"' ,'" +
+			in_json.end +
+			"' ,'" +
+			iterator.channal +
+			"')\"";
+		output += ">" + gLocal.gui.edit + "</li>";
+		output += "<li class = 'tip_buttom' ";
+		output += " onclick=\"history_show('" + iterator.id + "')\"";
+		output += ">" + gLocal.gui.timeline + "</li>";
+		output += "<li class = 'tip_buttom'>" + gLocal.gui.extension + "</li>";
+		output += "<li class = 'tip_buttom'>" + gLocal.gui.like + "</li>";
+		output += "<li class = 'tip_buttom'>" + gLocal.gui.comment + "</li>";
+		output += "<li class = 'tip_buttom'>" + gLocal.gui.copy + "</li>";
+		output += "<li class = 'tip_buttom'>" + gLocal.gui.digest + "</li>";
+		output += "<li class = 'tip_buttom'>" + gLocal.gui.share_to + "</li>";
+		output += "</div>";
+		//译文工具栏结束
+		output += "</div>";
+		//译文工具按钮结束
+		//译文正文开始
 		output +=
 			"<div class='text' id='tran_text_" +
 			in_json.book +
@@ -495,39 +528,14 @@ function note_json_html(in_json) {
 			output += note_init(term_std_str_to_tran(iterator.text, iterator.channal, iterator.editor, iterator.lang));
 		}
 		output += "</div>";
-
-		//句子工具栏
-		output += "<div class='tran_text_tool_bar'>";
-		output += "<span class = 'tip_buttom' ";
-		output +=
-			" onclick=\"note_edit_sentence('" +
-			in_json.book +
-			"' ,'" +
-			in_json.para +
-			"' ,'" +
-			in_json.begin +
-			"' ,'" +
-			in_json.end +
-			"' ,'" +
-			iterator.channal +
-			"')\"";
-		output += ">" + gLocal.gui.edit + "</span>";
-		output += "<span class = 'tip_buttom' ";
-		output += " onclick=\"history_show('" + iterator.id + "')\"";
-		output += ">" + gLocal.gui.timeline + "</span>";
-		output += "<span class = 'tip_buttom'>" + gLocal.gui.extension + "</span>";
-		output += "<span class = 'tip_buttom'>" + gLocal.gui.like + "</span>";
-		output += "<span class = 'tip_buttom'>" + gLocal.gui.comment + "</span>";
-		output += "<span class = 'tip_buttom'>" + gLocal.gui.copy + "</span>";
-		output += "<span class = 'tip_buttom'>" + gLocal.gui.digest + "</span>";
-		output += "<span class = 'tip_buttom'>" + gLocal.gui.share_to + "</span>";
-		output += "</div>";
-		//句子工具栏结束
+		//译文正文结束
 
 		output += "</div>";
+		//单个channal译文框结束
 	}
+	//所选全部译文结束
 	//output += "</div>";
-
+	//未选择的其他译文开始
 	output += "<div class='other_tran_div' sent='";
 	output += in_json.book + "-" + in_json.para + "-" + in_json.begin + "-" + in_json.end;
 	output += "'>";
@@ -540,17 +548,19 @@ function note_json_html(in_json) {
 
 	output += "</div>";
 	output += "</div>";
-
+	//未选择的其他译文开始
+	//新增译文按钮开始
 	output += "<div class='add_new icon_add' ";
 	output += "book='" + in_json.book + "' ";
 	output += "para='" + in_json.para + "' ";
 	output += "begin='" + in_json.begin + "' ";
 	output += "end='" + in_json.end + "' ";
-	output += " style='left:0;'>";
+	output += " >";
 
 	//output += "<div class='more_tran icon_expand'></div>";
 	output += "</div>";
-
+	//新增译文按钮结束
+	//出处路径开始
 	output += "<div class='ref'>" + in_json.ref;
 	output +=
 		"<span class='sent_no'>" +
@@ -563,7 +573,7 @@ function note_json_html(in_json) {
 		in_json.end +
 		"<span>" +
 		"</div>";
-
+	//出处路径结束
 	return output;
 }
 
@@ -780,3 +790,11 @@ function copy_ref(book, para, begin, end) {
 function edit_in_studio(book, para, begin, end) {
 	wbw_channal_list_open(book, [para]);
 }
+
+function tool_bar_show(element) {
+	if ($(element).find(".tran_text_tool_bar").css("display") == "none") {
+		$(element).find(".tran_text_tool_bar").show();
+	} else {
+		$(element).find(".tran_text_tool_bar").hide();
+	}
+}

+ 121 - 99
app/term/term.css

@@ -29,6 +29,93 @@
 	color: red;
 }
 
+.tran {
+	line-height: 1.5em;
+}
+
+.tran ul {
+	list-style-type: circle;
+	margin-left: 2em;
+}
+
+.tran li {
+	list-style: inherit;
+}
+
+.tran ol {
+	list-style-type: decimal;
+	margin: 0;
+	padding: 0;
+	margin-left: 2em;
+}
+
+.tran:lang(en) > ol {
+	list-style-type: decimal;
+}
+
+/*中文*/
+.tran:lang(zh) > ol {
+	list-style-type: cjk-ideographic;
+	margin-left: 2.5em;
+}
+
+/*简体中文*/
+.tran:lang(zh-cn) > ol {
+	list-style-type: trad-chinese-formal;
+	margin-left: 2.5em;
+}
+.tran:lang(zh-hans) > ol {
+	list-style-type: trad-chinese-formal;
+	margin-left: 2.5em;
+}
+/*繁体中文*/
+.tran:lang(zh-tw) > ol {
+	list-style-type: trad-chinese-formal;
+	margin-left: 2.5em;
+}
+.tran:lang(zh-hant) > ol {
+	list-style-type: trad-chinese-formal;
+	margin-left: 2.5em;
+}
+
+/*japanese*/
+.tran:lang(jp) > ol {
+	list-style-type: hiragana;
+	margin-left: 2.5em;
+}
+/*kora*/
+.tran:lang(ko) > ol {
+	list-style-type: korean-hangul-formal;
+	margin-left: 2.5em;
+}
+/*thai*/
+.tran:lang(ti) > ol {
+	list-style-type: thai;
+	margin-left: 2em;
+}
+/*myanmar*/
+.tran:lang(my) > ol {
+	list-style-type: myanmar;
+	margin-left: 2em;
+}
+
+/*myanmar*/
+.tran:lang(my) {
+	font-size: 120%;
+	line-height: 2em;
+}
+
+.tran_div {
+	margin-bottom: 1em;
+	padding-bottom: 1em;
+	padding-top: 0.5em;
+	border-bottom: 1px solid var(--border-line-color);
+}
+
+.tran_div:last-child {
+	border-bottom: none;
+}
+
 note:hover chapter {
 	display: inline;
 }
@@ -75,34 +162,51 @@ note > .tran {
 	padding: 0;
 	position: relative;
 	margin-top: -0.5em;
+	display: flex;
 }
 note > .tran > .text {
 	margin-bottom: 2em;
 }
-note > .tran > .tran_text_tool_bar {
+.tran_text_tool_botton {
+	border-radius: 50%;
+	border: 2px solid var(--btn-bg-color);
+	width: fit-content;
+	padding: 2px;
+	height: fit-content;
+	margin-left: -1em;
+    margin-right: 1em;
+}
+}
+.tran_text_tool_botton > .icon_expand {
+	width: 0.8em;
+	height: 0.8em;
+	min-width: 0.8em;
+	min-height: 0.8em;
+}
+note > .tran .tran_text_tool_bar {
 	padding: 0;
 	position: absolute;
 	display: none;
 	color: var(--border-line-color);
-	margin-left: 0;
 	z-index: 40;
 	width: auto;
+	left: -5em;
 	font-size: 14px;
 	height: 28px;
 	line-height: 28px;
-	margin-top: -2em;
+	margin-top: 1em;
 	background-color: var(--box-bg-color1);
 	border-radius: 5px;
 }
-note > .tran:lang(my) > .tran_text_tool_bar {
+note > .tran:lang(my) .tran_text_tool_bar {
 	margin-top: -2.5em;
 }
-note > .tran > .tran_text_tool_bar::after {
+note > .tran .tran_text_tool_bar::after {
 	content: " ";
 	position: absolute;
-	left: 0;
+	right: 0;
 	bottom: 100%;
-	margin-left: 20px;
+	margin-right: 1.05em;
 	border-width: 5px;
 	border-style: solid;
 	border-color: transparent transparent var(--box-bg-color1) transparent;
@@ -111,10 +215,13 @@ note > .tran > .tran_text_tool_bar::after {
 .tran:hover > .tran_text_tool_bar {
 	display: block;
 }
+.tran_text_tool_bar li {
+	list-style: none;
+}
 .tip_buttom {
-	border-right: 2px solid var(--border-line-color);
-	padding: 5px 8px;
+	padding: 0 8px;
 	cursor: pointer;
+	background-color: inherit;
 }
 .tip_buttom:hover {
 	background-color: var(--btn-border-color);
@@ -182,101 +289,16 @@ note .ref {
 	font-size: 75%;
 	white-space: nowrap;
 	overflow-x: scroll;
-	width: 67vw;
 	margin-left: auto;
 	border-top: solid 1px var(--nocolor);
+	padding-top: 0.7em;
+	margin-top: 0.7em;
+	margin-left: 1.4em;
 }
 note:hover .ref {
 	border-top: solid 1px var(--border-line-color);
 }
 
-.tran {
-	line-height: 1.5em;
-}
-
-.tran ul {
-	list-style-type: circle;
-	margin-left: 2em;
-}
-
-.tran li {
-	list-style: inherit;
-}
-
-.tran ol {
-	list-style-type: decimal;
-	margin: 0;
-	padding: 0;
-	margin-left: 2em;
-}
-
-.tran:lang(en) > ol {
-	list-style-type: decimal;
-}
-
-/*中文*/
-.tran:lang(zh) > ol {
-	list-style-type: cjk-ideographic;
-	margin-left: 2.5em;
-}
-
-/*简体中文*/
-.tran:lang(zh-cn) > ol {
-	list-style-type: trad-chinese-formal;
-	margin-left: 2.5em;
-}
-.tran:lang(zh-hans) > ol {
-	list-style-type: trad-chinese-formal;
-	margin-left: 2.5em;
-}
-/*繁体中文*/
-.tran:lang(zh-tw) > ol {
-	list-style-type: trad-chinese-formal;
-	margin-left: 2.5em;
-}
-.tran:lang(zh-hant) > ol {
-	list-style-type: trad-chinese-formal;
-	margin-left: 2.5em;
-}
-
-/*japanese*/
-.tran:lang(jp) > ol {
-	list-style-type: hiragana;
-	margin-left: 2.5em;
-}
-/*kora*/
-.tran:lang(ko) > ol {
-	list-style-type: korean-hangul-formal;
-	margin-left: 2.5em;
-}
-/*thai*/
-.tran:lang(ti) > ol {
-	list-style-type: thai;
-	margin-left: 2em;
-}
-/*myanmar*/
-.tran:lang(my) > ol {
-	list-style-type: myanmar;
-	margin-left: 2em;
-}
-
-/*myanmar*/
-.tran:lang(my) {
-	font-size: 120%;
-	line-height: 2em;
-}
-
-.tran_div {
-	margin-bottom: 1em;
-	padding-bottom: 1em;
-	padding-top: 0.5em;
-	border-bottom: 1px solid var(--border-line-color);
-}
-
-.tran_div:last-child {
-	border-bottom: none;
-}
-
 .progress_bar_done {
 	stroke-width: 0;
 	fill: royalblue;
@@ -303,7 +325,7 @@ r {
 }
 
 note {
-	padding: 0.5em 1.5vw;
+	padding: 0.5em 2em;
 	margin-bottom: 0.4em;
 	border-radius: 5px;
 	line-height: 1.3em;
@@ -339,7 +361,7 @@ note:hover .add_new {
 	background-repeat: no-repeat;
 	background-size: contain;
 	display: none;
-	margin-top: -0.5em;
+	margin-bottom: -0.7em;
 }
 .icon_expand {
 	width: auto;