From 93be363ce2d4c53b0bb64399dd38394f6fd1d6d9 Mon Sep 17 00:00:00 2001 From: shy Date: Wed, 24 Jan 2024 21:43:19 +0800 Subject: [PATCH] add some --- core/chat/header.go | 4 +++ core/chat/message.css | 26 +++++------------ core/chat/message.go | 2 +- core/chat/message.js | 65 ++++++++++++++++++------------------------- 4 files changed, 39 insertions(+), 58 deletions(-) diff --git a/core/chat/header.go b/core/chat/header.go index efc7d5cf..9c70c097 100644 --- a/core/chat/header.go +++ b/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))) diff --git a/core/chat/message.css b/core/chat/message.css index 2570435d..2eed3f32 100644 --- a/core/chat/message.css +++ b/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 { - 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.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.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 { 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.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; } 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 { - 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.text div.content { padding:var(--input-padding) var(--button-padding); } +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; } diff --git a/core/chat/message.go b/core/chat/message.go index 0992a4b8..99df0887 100644 --- a/core/chat/message.go +++ b/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") diff --git a/core/chat/message.js b/core/chat/message.js index b5f1c522..7e82c11c 100644 --- a/core/chat/message.js +++ b/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: [ - {icon: "bi bi-three-dots", onclick: function() { can.onmotion.toggle(can, can.ui.profile), can.onimport.layout(can) }}, - {text: "message"||can.ConfIndex(), onclick: function(event) { - can._legend.onclick(event) - }}, - {icon: "bi bi-plus-lg", onclick: function(event) { - can.Update(event, [ctx.ACTION, mdb.CREATE]) - }}, + can.page.insertBefore(can, [{view: wiki.TITLE, list: [ + {icon: "bi bi-three-dots", onclick: function() { can._legend.onclick(event) }}, + {text: "message"||can.ConfIndex(), onclick: function(event) { can._legend.onclick(event) }}, + {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: [ - {view: "title", list: [{text: value.name||"some"}, {text: [can.base.TimeTrim(value.time), "", mdb.TIME]}]}, - {view: "content", list: [{text: value.text||"[未知消息]"}]}, + {img: can.misc.Resource(can, value.icons||"usr/icons/Messages.png")}, {view: html.CONTAINER, list: [ + {view: wiki.TITLE, list: [{text: value.name||"[未命名]"}, {text: [can.base.TimeTrim(value.time), "", mdb.TIME]}]}, + {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.onimport._display(can), can.onimport._content(can, msg), can.onimport.layout(can) - }) + can.run(event, [value.hash], function(msg) { can.onimport._display(can), can.onimport._content(can, msg) }) }}])._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 - msg.Table(function(value) { var myself = value.username == can.user.info.username - can.page.Append(can, can.ui.message, [{view: [[html.ITEM, mdb.TIME], "", can.base.TimeTrim(value.time)]}]) + can.ui.message = can.page.Append(can, can.ui.content, [{view: html.LIST}])._target + can.onimport._message(can, msg) + }, + _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.onimport._content(can, msg), can.onimport.layout(can) - }) + can.run(event, [can.db.hash], function(msg) { can.onimport._message(can, msg) }) }) }, _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) { - return {view: "content", list: [{text: value.text||"[未知消息]"}]} - }, - image: function(can, value) { - return {view: "content", list: [{img: can.misc.Resource(can, value.text)}]} - }, - 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) { + image: function(can, value) { return {view: wiki.CONTENT, list: [{img: can.misc.Resource(can, 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) + 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: wiki.CONTENT, style: {height: height, width: width}, _init: function(target) { value.type = chat.STORY 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)