diff --git a/src/mami.css/input.css b/src/mami.css/input.css index f68d0bb..a16d8da 100644 --- a/src/mami.css/input.css +++ b/src/mami.css/input.css @@ -5,12 +5,12 @@ .input__main { display: flex; - height: 40px; - max-height: 140px; } .input__text { flex-grow: 1; + height: 40px; + max-height: 140px; resize: none; } @@ -32,37 +32,15 @@ cursor: pointer } -.input__button:before { - font-family: "Font Awesome 5 Free"; - font-weight: 900 -} - -.input__button--markup:before { - content: "\f121" -} - -.input__button--emotes:before { - content: "\f118" -} - -.input__button--upload:before { - content: "\f574" -} - -.input__button--send:before { - content: "\f1d8" -} - .input__menus { - max-height: 100px; - overflow: auto } .input__menu { + display: flex; + flex-wrap: wrap; + gap: 2px; + padding: 2px; +} +.input__menu:empty { display: none; - padding: 1px -} - -.input__menu--active { - display: block } diff --git a/src/mami.css/main.css b/src/mami.css/main.css index 7a9ee02..b211d3e 100644 --- a/src/mami.css/main.css +++ b/src/mami.css/main.css @@ -37,6 +37,7 @@ a:hover { .hidden { display: none !important; + visibility: none !important; } .sjis { diff --git a/src/mami.css/markup.css b/src/mami.css/markup.css index 6a3596f..0301564 100644 --- a/src/mami.css/markup.css +++ b/src/mami.css/markup.css @@ -1,21 +1,22 @@ .markup__button { border: 0; background: transparent; - font-family: Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif; + font-family: inherit; cursor: pointer; padding: 4px 8px; - margin: 2px; - transition: background .1s + transition: background .1s; + min-width: 26px; + text-align: center; } .markup__link { color: #1e90ff; - text-decoration: none + text-decoration: none; } .markup__link:hover, .markup__link:focus { - text-decoration: underline + text-decoration: underline; } .chat:not(.mami-do-not-mark-links-as-visited) .markup__link--visited, diff --git a/src/mami.js/chatform/form.jsx b/src/mami.js/chatform/form.jsx new file mode 100644 index 0000000..7660ece --- /dev/null +++ b/src/mami.js/chatform/form.jsx @@ -0,0 +1,30 @@ +#include chatform/input.jsx +#include chatform/markup.jsx + +const MamiChatForm = function(eventTarget) { + const input = new MamiChatFormInput(eventTarget); + const markup = new MamiChatFormMarkup; + + const html =
{ + ev.preventDefault(); + + const text = input.text; + input.text = ''; + input.updateGrowHeight(); + + eventTarget.dispatch('send', { text: text }); + }}> + {markup} + {input} +
; + + return { + get element() { return html; }, + get markup() { return markup; }, + get input() { return input; }, + + focus: () => { + input.focus(); + }, + }; +}; diff --git a/src/mami.js/chatform/input.jsx b/src/mami.js/chatform/input.jsx new file mode 100644 index 0000000..f2fdf86 --- /dev/null +++ b/src/mami.js/chatform/input.jsx @@ -0,0 +1,174 @@ +#include emotes.js +#include users.js + +const MamiChatFormInput = function(eventTarget) { + const textElem =