add some

core/chat/header.go

@@ -91,6 +91,10 @@ func init() {
 				m.Cmdy(web.SHARE, mdb.CREATE, mdb.TYPE, web.LOGIN, mdb.TEXT, tcp.PublishLocalhost(m, m.Option(ice.MSG_USERWEB)))
 				aaa.SendEmail(m, aaa.ADMIN, m.Option(aaa.TO), "")
 			}},
+			MESSAGE: {Hand: func(m *ice.Message, arg ...string) {
+				m.Cmd(MESSAGE, mdb.INSERT, arg)
+				web.ToastSuccess(m)
+			}},
 			aaa.LOGOUT: {Hand: aaa.SessLogout},
 			cli.QRCODE: {Hand: func(m *ice.Message, arg ...string) {
 				m.Push(web.LINK, tcp.PublishLocalhost(m, m.Option(ice.MSG_USERWEB)))

core/chat/message.css

@@ -1,7 +1,6 @@
 body.light fieldset.web.chat.message>div.output { background-color:white; }
 body.light fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list { background-color:#e3e3e2; }
 body.light fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item:not(.plug).myself div.content { background-color:#94ec69; }
-
 fieldset.web.chat.message>div.output>div.project>div.item { height:58px; padding:var(--input-padding); }
 fieldset.web.chat.message>div.output>div.project>div.item img { height:var(--header-height); width:var(--header-height); display:block; float:left; }
 fieldset.web.chat.message>div.output>div.project>div.item span.time { color:var(--disable-fg-color); font-size:var(--status-font-size); }
@@ -9,21 +8,11 @@ fieldset.web.chat.message>div.output>div.project>div.item div.container { width:
 fieldset.web.chat.message>div.output>div.project>div.item div.title { display:flex; justify-content:space-between; }
 fieldset.web.chat.message>div.output>div.project>div.item div.content { color:var(--disable-fg-color); font-size:var(--status-font-size); }
 fieldset.web.chat.message>div.output>div.layout>div.layout>div.content { overflow:hidden; }
-fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.title {
+fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.title { padding:var(--button-padding); display:flex; justify-content:space-between; position:sticky; top:0; z-index:10; }
- 	font-size:24px; padding:var(--button-padding); display:flex; justify-content:space-between; position:sticky; top:0; z-index:10;
+fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.title i:hover { background-color:var(--hover-bg-color); cursor:pointer; }
-}
+fieldset.web.chat.message>div.output>div.project>div.title { padding:var(--button-padding); display:flex; justify-content:space-between; position:sticky; top:0; z-index:10; }
-fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.title i:hover {
+fieldset.web.chat.message>div.output>div.project>div.title i:hover { background-color:var(--hover-bg-color); cursor:pointer; }
-	background-color:var(--hover-bg-color); cursor:pointer;
+fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item { padding:var(--input-padding); min-height:fit-content; display:flex; }
-}
-fieldset.web.chat.message>div.output>div.project>div.title {
-	padding:var(--button-padding);
-	display:flex; justify-content:space-between;
-	position:sticky; top:0; z-index:10;
-}
-fieldset.web.chat.message>div.output>div.project>div.title i:hover {
-	background-color:var(--hover-bg-color); cursor:pointer;
-}
-fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item { padding:var(--input-padding); min-height:fit-content; display:flex; align-items:center; }
 fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item:hover { background-color:unset; }
 fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item.time { color:var(--disable-fg-color); font-size:var(--status-font-size); padding:0; height:fit-content; justify-content:center; }
 fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item>img { height:var(--header-height); width:var(--header-height); }
@@ -32,9 +21,8 @@ fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>
 fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item div.container>span.from { color:var(--disable-fg-color); font-size:var(--status-font-size); padding:0 var(--input-padding); }
 fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item.myself div.container>span.from { float:right; }
 fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item.myself div.container { display:flex; flex-direction:column; align-items:flex-end; }
-fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item div.content {
+fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item.text div.content { padding:var(--input-padding) var(--button-padding); }
-	display:flex; align-items:center; padding:var(--input-padding) var(--button-padding); border-radius:5px; min-height:var(--header-height); width:fit-content;
+fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item>div.container>div.content { display:flex; align-items:center; border-radius:5px; min-height:var(--header-height); width:fit-content; }
-}
 fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item.plug { height:fit-content; }
 fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item.plug div.content { padding:0; }
 fieldset.web.chat.message>div.output>div.layout>div.layout>div.content>div.list>div.item.myself { flex-direction:row-reverse; }

core/chat/message.go

@@ -14,7 +14,7 @@ const MESSAGE = "message"
 
 func init() {
 	Index.MergeCommands(ice.Commands{
-		MESSAGE: {Name: "message", Help: "消息", Icon: "Messages.png", Actions: ice.MergeActions(ice.Actions{
+		MESSAGE: {Name: "message", Help: "聊天消息", Icon: "Messages.png", Actions: ice.MergeActions(ice.Actions{
 			ice.CTX_INIT: {Hand: func(m *ice.Message, arg ...string) {
 				messageCreate(m, web.DREAM, "usr/icons/Launchpad.png")
 				messageCreate(m, cli.SYSTEM, "usr/icons/System Settings.png")

core/chat/message.js

@@ -3,44 +3,42 @@ Volcanos(chat.ONIMPORT, {
 		can.ui = can.onappend.layout(can), can.onimport._project(can, msg)
 	},
 	_project: function(can, msg) { var select, current = can.db.hash[0]||ice.DEV
-		can.isCmdMode() && can.page.insertBefore(can, [{view: "title", list: [
+		can.page.insertBefore(can, [{view: wiki.TITLE, list: [
-			{icon: "bi bi-three-dots", onclick: function() { can.onmotion.toggle(can, can.ui.profile), can.onimport.layout(can) }},
+			{icon: "bi bi-three-dots", onclick: function() { can._legend.onclick(event) }},
-			{text: "message"||can.ConfIndex(), onclick: function(event) {
+			{text: "message"||can.ConfIndex(), onclick: function(event) { can._legend.onclick(event) }},
-				can._legend.onclick(event)
+			{icon: "bi bi-plus-lg", onclick: function(event) { can.Update(event, [ctx.ACTION, mdb.CREATE]) }},
-			}},
-			{icon: "bi bi-plus-lg", onclick: function(event) {
-				can.Update(event, [ctx.ACTION, mdb.CREATE])
-			}},
 		]}], can.ui.project.firstChild, can.ui.project)
 		msg.Table(function(value) {
 			var _target = can.page.Append(can, can.ui.project, [{view: html.ITEM, list: [
-				{img: can.misc.Resource(can, value.icons||"usr/icons/Messages.png")}, {view: "container", list: [
+				{img: can.misc.Resource(can, value.icons||"usr/icons/Messages.png")}, {view: html.CONTAINER, list: [
-					{view: "title", list: [{text: value.name||"some"}, {text: [can.base.TimeTrim(value.time), "", mdb.TIME]}]},
+					{view: wiki.TITLE, list: [{text: value.name||"[未命名]"}, {text: [can.base.TimeTrim(value.time), "", mdb.TIME]}]},
-					{view: "content", list: [{text: value.text||"[未知消息]"}]},
+					{view: wiki.CONTENT, list: [{text: value.text||"[未知消息]"}]},
 				]},
 			], onclick: function(event) { can.isCmdMode() && can.misc.SearchHash(can, value.name), can.onimport._switch(can, false)
 				can.db.zone = value, can.db.hash = value.hash, can.onmotion.select(can, can.ui.project, html.DIV_ITEM, _target)
 				if (can.onmotion.cache(can, function() { return value.name }, can._status, can.ui.content, can.ui.profile, can.ui.display)) { return can.onimport.layout(can) }
-				can.run(event, [value.hash], function(msg) { can.onappend._status(can, msg.Option(ice.MSG_STATUS))
+				can.run(event, [value.hash], function(msg) { can.onimport._display(can), can.onimport._content(can, msg) })
-					can.onimport._display(can), can.onimport._content(can, msg), can.onimport.layout(can)
-				})
 			}}])._target; select = (value.name == current? _target: select)||_target
 		}), can.user.isMobile? can.onimport._switch(can, true): select && select.click()
 	},
 	_content: function(can, msg) {
-		can.ui.title = can.page.Appends(can, can.ui.content, [{view: "title", list: [
+		can.ui.title = can.page.Appends(can, can.ui.content, [{view: wiki.TITLE, list: [
 			{icon: "bi bi-chevron-left", onclick: function() { can.onimport._switch(can, true) }},
 			{text: can.db.zone.name},
 			{icon: "bi bi-three-dots", onclick: function() { can.onmotion.toggle(can, can.ui.profile), can.onimport.layout(can) }},
 		]}])._target
-		can.ui.message = can.page.Append(can, can.ui.content, [{view: "list"}])._target
+		can.ui.message = can.page.Append(can, can.ui.content, [{view: html.LIST}])._target
-		msg.Table(function(value) { var myself = value.username == can.user.info.username
+		can.onimport._message(can, msg)
-			can.page.Append(can, can.ui.message, [{view: [[html.ITEM, mdb.TIME], "", can.base.TimeTrim(value.time)]}])
+	},
+	_message: function(can, msg) {
+		var last = ""; msg.Table(function(value) { var myself = value.username == can.user.info.username, time = can.base.TimeTrim(value.time)
+			if (time != last) { can.page.Append(can, can.ui.message, [{view: [[html.ITEM, mdb.TIME], "", time]}]) } last = time
 			can.page.Append(can, can.ui.message, [{view: [[html.ITEM, value.type, myself? "myself": ""]], list: [
 				{img: can.misc.Resource(can, (value.avatar == can.db.zone.name? "": value.avatar)||can.db.zone.icons||"usr/icons/Messages.png")},
-				{view: "container", list: [{text: [value.usernick, "", "from"]}, can.onfigure[value.type](can, value)]},
+				{view: html.CONTAINER, list: [{text: [value.usernick, "", nfs.FROM]}, can.onfigure[value.type](can, value)]},
 			]}])
-		})
+		}), can.onappend._status(can, msg.Option(ice.MSG_STATUS)), can.onimport.layout(can)
+		can.onmotion.delay(can, function() { can.ui.message && (can.ui.message.scrollTop += 10000) })
 	},
 	_display: function(can, msg) {
 		can.page.Appends(can, can.ui.display, [
@@ -52,14 +50,12 @@ Volcanos(chat.ONIMPORT, {
 	},
 	_insert: function(can, args) {
 		can.runAction(event, mdb.INSERT, [can.db.hash].concat(args), function() {
-			can.run(event, [can.db.hash], function(msg) { can.onappend._status(can, msg.Option(ice.MSG_STATUS))
+			can.run(event, [can.db.hash], function(msg) { can.onimport._message(can, msg) })
-				can.onimport._content(can, msg), can.onimport.layout(can)
-			})
 		})
 	},
 	_switch: function(can, project) { if (!can.user.isMobile) { return }
 		can.page.style(can, can.ui.project, html.WIDTH, can.ConfWidth())
-		can.page.style(can, can.ui.project, "flex", "0 0 "+can.ConfWidth()+"px")
+		can.page.style(can, can.ui.project, html.FLEX, "0 0 "+can.ConfWidth()+"px")
 		can.onmotion.toggle(can, can.ui.project, project)
 		can.onmotion.toggle(can, can.ui.content, !project)
 		can.onmotion.toggle(can, can.ui.display, !project)
@@ -67,14 +63,13 @@ Volcanos(chat.ONIMPORT, {
 	},
 	layout: function(can) { can.ui.layout(can.ConfHeight(), can.ConfWidth())
 		can.ui.title && can.page.style(can, can.ui.message, html.HEIGHT, can.ui.content.offsetHeight-can.ui.title.offsetHeight)
-			can.ui.message && (can.ui.message.scrollTop += 10000)
 	},
 }, [""])
 Volcanos(chat.ONDETAIL, {
 	"bi bi-mic": function(event, can) {},
 	"bi bi-card-image": function(event, can) {
 		can.user.input(event, can, [mdb.ICONS], function(args) {
-			can.onimport._insert(can, [mdb.TYPE, "image"].concat([mdb.TEXT, args[1]]))
+			can.onimport._insert(can, [mdb.TYPE, html.IMAGE].concat([mdb.TEXT, args[1]]))
 		})
 	},
 	"bi bi-camera": function(event, can) {},
@@ -83,22 +78,16 @@ Volcanos(chat.ONDETAIL, {
 	"bi bi-geo-alt": function(event, can) {},
 	"bi bi-window": function(event, can) {
 		can.user.input(event, can, [web.SPACE, ctx.INDEX, ctx.ARGS], function(args) {
-			can.onimport._insert(can, [mdb.TYPE, "plug"].concat(args))
+			can.onimport._insert(can, [mdb.TYPE, html.PLUG].concat(args))
 		})
 	},
 })
 Volcanos(chat.ONFIGURE, {
-	text: function(can, value) {
+	image: function(can, value) { return {view: wiki.CONTENT, list: [{img: can.misc.Resource(can, value.text)}]} },
-		return {view: "content", list: [{text: value.text||"[未知消息]"}]}
+	text: function(can, value) { return {view: wiki.CONTENT, list: [{text: value.text||"[未知消息]"}]} },
-	},
+	plug: function(can, value) { var height = can.base.Min(can.ui.content.offsetHeight-210, 240)
-	image: function(can, value) {
+		var height = can.base.Max(320, height, height/(can.base.isIn(value.index, html.IFRAME)? 1: 2)), width = can.ui.content.offsetWidth-(can.user.isMobile? 60: 180)
-		return {view: "content", list: [{img: can.misc.Resource(can, value.text)}]}
+		return {view: wiki.CONTENT, style: {height: height, width: width}, _init: function(target) { value.type = chat.STORY
-	},
-	plug: function(can, value) { value.type = "story"
-		var height = can.base.Min(can.ui.content.offsetHeight-210, 240)
-		var height = can.base.Max(320, height, height/(can.base.isIn(value.index, "iframe")? 1: 2)),
-			width = can.ui.content.offsetWidth-(can.user.isMobile? 60: 180)
-		return {view: "content", style: {height: height, width: width}, _init: function(target) {
 			can.onappend._plugin(can, value, {height: height, width: width}, function(sub) {
 				sub.onexport.output = function() { sub.onimport.size(sub, height, width)
 					can.page.style(can, target, html.HEIGHT, sub._target.offsetHeight, html.WIDTH, sub._target.offsetWidth)