diff --git a/src/web-chatview/chatview.js b/src/web-chatview/chatview.js index 76fffe9b699a45f84e675345accbaf1da181ba3a..529727bab5ee41e4498c6062fc3f5a2e3671e330 100644 --- a/src/web-chatview/chatview.js +++ b/src/web-chatview/chatview.js @@ -127,10 +127,6 @@ if (use_qt) { setSendMessageContent(content) }); }) -} else { - // For now hide on non qt client, as it needs some modifications in cpp code - emojiBtn.style.visibility = "collapse" - emojiBtn.style.width = 0 } /* i18n manager */ @@ -169,8 +165,6 @@ function init_i18n(data) { /* exported init_picker */ function init_picker(dark) { - if (!use_qt) - return; const picker = new EmojiButton({ theme: dark? 'dark' : 'light' }); diff --git a/src/web-chatview/emoji.css b/src/web-chatview/emoji.css new file mode 100644 index 0000000000000000000000000000000000000000..8c6e111a8b7dfe701d1d715846606f96229d9d4c --- /dev/null +++ b/src/web-chatview/emoji.css @@ -0,0 +1,494 @@ +@keyframes show { + 0% { + opacity: 0; + transform: scale3d(0.8, 0.8, 0.8); + } + + 50% { + transform: scale3d(1.05, 1.05, 1.05); + } + + 100% { + transform: scale3d(1, 1, 1); + } +} + +@keyframes hide { + 0% { + opacity: 1; + transform: scale3d(1, 1, 1); + } + + 100% { + opacity: 0; + transform: scale3d(0.8, 0.8, 0.8); + } +} + +@keyframes grow { + 0% { + opacity: 0; + transform: scale3d(0.8, 0.8, 0.8); + } + + 100% { + opacity: 1; + transform: scale3d(1, 1, 1); + } +} + +@keyframes shrink { + 0% { + opacity: 1; + transform: scale3d(1, 1, 1); + } + + 100% { + opacity: 0; + transform: scale3d(0.8, 0.8, 0.8); + } +} + +@keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@keyframes fade-out { + 0% { opacity: 1; } + 100% { opacity: 0; } +} + +.emoji-picker { + --animation-duration: 0.2s; + --animation-easing: ease-in-out; + + --emoji-size: 1.8em; + --emoji-size-multiplier: 1.5; + --emoji-preview-size: 2em; + --emoji-per-row: 8; + --row-count: 6; + + --content-height: calc((var(--emoji-size) * var(--emoji-size-multiplier)) * var(--row-count) + var(--category-name-size) + var(--category-button-height) + 0.5em); + + --category-name-size: 0.85em; + + --category-button-height: 2em; + --category-button-size: 1.1em; + --category-border-bottom-size: 4px; + + --focus-indicator-color: #999999; + + --search-height: 2em; + + --blue-color: #4F81E5; + + --border-color: #CCCCCC; + --background-color: #FFFFFF; + --text-color: #000000; + --secondary-text-color: #666666; + --hover-color: #E8F4F9; + --search-focus-border-color: var(--blue-color); + --search-icon-color: #CCCCCC; + --overlay-background-color: rgba(0, 0, 0, 0.8); + --popup-background-color: #FFFFFF; + --category-button-color: #666666; + --category-button-active-color: var(--blue-color); + + --dark-border-color: #666666; + --dark-background-color: #333333; + --dark-text-color: #FFFFFF; + --dark-secondary-text-color: #999999; + --dark-hover-color: #666666; + --dark-search-background-color: #666666; + --dark-search-border-color: #999999; + --dark-search-placeholder-color: #999999; + --dark-search-focus-border-color: #DBE5F9; + --dark-popup-background-color: #333333; + --dark-category-button-color: #FFFFFF; + + --font: Arial, Helvetica, sans-serif; + --font-size: 16px; +} + +.emoji-picker { + font-size: var(--font-size); + border: 1px solid var(--border-color); + border-radius: 5px; + background: var(--background-color); + width: calc(var(--emoji-per-row) * var(--emoji-size) * var(--emoji-size-multiplier) + 1em + 1.5rem); + font-family: var(--font); + overflow: hidden; + animation: show var(--animation-duration) var(--animation-easing); +} + +.emoji-picker * { + font-family: var(--font); + box-sizing: content-box; +} + +.emoji-picker__overlay { + background: rgba(0, 0, 0, 0.75); + z-index: 1000; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.emoji-picker.hiding { + animation: hide var(--animation-duration) var(--animation-easing); +} + +.emoji-picker.dark { + background: var(--dark-background-color); + color: var(--dark-text-color); + border-color: var(--dark-border-color); +} + +.emoji-picker__content { + padding: 0.5em; + height: var(--content-height); + position: relative; +} + +.emoji-picker__preview { + height: var(--emoji-preview-size); + padding: 0.5em; + border-top: 1px solid var(--border-color); + display: flex; + flex-direction: row; + align-items: center; +} + +.emoji-picker.dark .emoji-picker__preview { + border-top-color: var(--dark-border-color); +} + +.emoji-picker__preview-emoji { + font-size: var(--emoji-preview-size); + margin-right: 0.25em; + font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji"; +} + +.emoji-picker__preview-emoji img.emoji { + height: 1em; + width: 1em; + margin: 0 .05em 0 .1em; + vertical-align: -0.1em; +} + +.emoji-picker__preview-name { + color: var(--text-color); + font-size: 0.85em; + overflow-wrap: break-word; + word-break: break-all; +} + +.emoji-picker.dark .emoji-picker__preview-name { + color: var(--dark-text-color); +} + +.emoji-picker__container { + display: grid; + justify-content: center; + grid-template-columns: repeat(var(--emoji-per-row), calc(var(--emoji-size) * var(--emoji-size-multiplier))); + grid-auto-rows: calc(var(--emoji-size) * var(--emoji-size-multiplier)); +} + +.emoji-picker__container.search-results { + height: var(--content-height); + overflow-y: auto; +} + +.emoji-picker__custom-emoji { + width: 1em; + height: 1em; +} + +.emoji-picker__emoji { + background: transparent; + border: none; + cursor: pointer; + overflow: hidden; + font-size: var(--emoji-size); + width: 1.5em; + height: 1.5em; + padding: 0; + margin: 0; + outline: none; + font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji"; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.emoji-picker__emoji img.emoji { + height: 1em; + width: 1em; + margin: 0 .05em 0 .1em; + vertical-align: -0.1em; +} + +.emoji-picker__emoji:focus, .emoji-picker__emoji:hover { + background: var(--hover-color); +} + +.emoji-picker__emoji:focus { + outline: 1px dotted var(--focus-indicator-color); +} + +.emoji-picker.dark .emoji-picker__emoji:focus, .emoji-picker.dark .emoji-picker__emoji:hover { + background: var(--dark-hover-color); +} + +.emoji-picker__plugin-container { + margin: 0.5em; + display: flex; + flex-direction: row; +} + +.emoji-picker__search-container { + margin: 0.5em; + position: relative; + height: var(--search-height); + display: flex; +} + +.emoji-picker__search { + box-sizing: border-box; + width: 100%; + border-radius: 3px; + border: 1px solid var(--border-color); + padding-right: 2em; + padding: 0.5em 2.25em 0.5em 0.5em; + font-size: 0.85em; + outline: none; +} + +.emoji-picker.dark .emoji-picker__search { + background: var(--dark-search-background-color); + color: var(--dark-text-color); + border-color: var(--dark-search-border-color); +} + +.emoji-picker.dark .emoji-picker__search::placeholder { + color: var(--dark-search-placeholder-color); +} + +.emoji-picker__search:focus { + border: 1px solid var(--search-focus-border-color); +} + +.emoji-picker.dark .emoji-picker__search:focus { + border-color: var(--dark-search-focus-border-color); +} + +.emoji-picker__search-icon { + position: absolute; + color: var(--search-icon-color); + width: 1em; + height: 1em; + right: 0.75em; + top: calc(50% - 0.5em); +} + +.emoji-picker__search-icon img { + width: 1em; + height: 1em; +} + +.emoji-picker__search-not-found { + color: var(--secondary-text-color); + text-align: center; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; +} + +.emoji-picker__search-not-found h2 { + color: var(--secondary-text-color); +} + +.emoji-picker.dark .emoji-picker__search-not-found { + color: var(--dark-secondary-text-color); +} + +.emoji-picker.dark .emoji-picker__search-not-found h2 { + color: var(--dark-secondary-text-color); +} + +.emoji-picker__search-not-found-icon { + font-size: 3em; +} + +.emoji-picker__search-not-found-icon img { + width: 1em; + height: 1em; +} + +.emoji-picker__search-not-found h2 { + margin: 0.5em 0; + font-size: 1em; +} + +.emoji-picker__variant-overlay { + background: var(--overlay-background-color); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 5px; + display: flex; + flex-direction: column; + justify-content: center; + animation: fade-in var(--animation-duration) var(--animation-easing); +} + +.emoji-picker__variant-overlay.hiding { + animation: fade-out var(--animation-duration) var(--animation-easing); +} + +.emoji-picker__variant-popup { + background: var(--popup-background-color); + margin: 0.5em; + padding: 0.5em; + text-align: center; + border-radius: 5px; + animation: grow var(--animation-duration) var(--animation-easing); + user-select: none; +} + +.emoji-picker__variant-overlay.hiding .emoji-picker__variant-popup { + animation: shrink var(--animation-duration) var(--animation-easing); +} + +.emoji-picker.dark .emoji-picker__variant-popup { + background: var(--dark-popup-background-color); +} + +.emoji-picker__emojis { + overflow-y: auto; + position: relative; + height: calc((var(--emoji-size) * var(--emoji-size-multiplier)) * var(--row-count) + var(--category-name-size)); +} + +.emoji-picker__emojis.hiding { + animation: fade-out 0.05s var(--animation-easing); +} + +.emoji-picker__emojis h2.emoji-picker__category-name { + font-size: 0.85em; + color: var(--secondary-text-color); + text-transform: uppercase; + margin: 0.25em 0; + text-align: left; +} + +.emoji-picker.dark h2.emoji-picker__category-name { + color: var(--dark-secondary-text-color); +} + +.emoji-picker__category-buttons { + display: flex; + flex-direction: row; + justify-content: space-around; + height: var(--category-button-height); + margin-bottom: 0.5em; +} + +button.emoji-picker__category-button { + flex-grow: 1; + background: transparent; + padding: 0; + border: none; + cursor: pointer; + font-size: var(--category-button-size); + vertical-align: middle; + color: var(--category-button-color); + border-bottom: var(--category-border-bottom-size) solid transparent; + outline: none; +} + +button.emoji-picker__category-button img { + width: var(--category-button-size); + height: var(--category-button-size); +} + +.emoji-picker.keyboard button.emoji-picker__category-button:focus { + outline: 1px dotted var(--focus-indicator-color); +} + +.emoji-picker.dark button.emoji-picker__category-button.active { + color: var(--category-button-active-color); +} + +.emoji-picker.dark button.emoji-picker__category-button { + color: var(--dark-category-button-color); +} + +button.emoji-picker__category-button.active { + color: var(--category-button-active-color); + border-bottom: var(--category-border-bottom-size) solid var(--category-button-active-color); +} + +@media (prefers-color-scheme: dark) { + .emoji-picker.auto { + background: var(--dark-background-color); + color: var(--dark-text-color); + border-color: var(--dark-border-color); + } + + .emoji-picker.auto .emoji-picker__preview { + border-top-color: var(--dark-border-color); + } + + .emoji-picker.auto .emoji-picker__preview-name { + color: var(--dark-text-color); + } + + .emoji-picker.auto button.emoji-picker__category-button { + color: var(--dark-category-button-color); + } + + .emoji-picker.auto button.emoji-picker__category-button.active { + color: var(--category-button-active-color); + } + + .emoji-picker.auto .emoji-picker__emoji:focus, .emoji-picker.auto .emoji-picker__emoji:hover { + background: var(--dark-hover-color); + } + + .emoji-picker.auto .emoji-picker__search { + background: var(--dark-search-background-color); + color: var(--dark-text-color); + border-color: var(--dark-search-border-color); + } + + .emoji-picker.auto h2.emoji-picker__category-name { + color: var(--dark-secondary-text-color); + } + + .emoji-picker.auto .emoji-picker__search::placeholder { + color: var(--dark-search-placeholder-color); + } + + .emoji-picker.auto .emoji-picker__search:focus { + border-color: var(--dark-search-focus-border-color); + } + + .emoji-picker.auto .emoji-picker__search-not-found { + color: var(--dark-secondary-text-color); + } + + .emoji-picker.auto .emoji-picker__search-not-found h2 { + color: var(--dark-secondary-text-color); + } + + .emoji-picker.auto .emoji-picker__variant-popup { + background: var(--dark-popup-background-color); + } +} \ No newline at end of file diff --git a/src/web-chatview/fa.css b/src/web-chatview/fa.css new file mode 100644 index 0000000000000000000000000000000000000000..251acf7b9d090cea872cfe543acda157841aed14 --- /dev/null +++ b/src/web-chatview/fa.css @@ -0,0 +1,452 @@ +svg:not(:root).svg-inline--fa { + overflow: visible; +} + +.svg-inline--fa { + display: inline-block; + font-size: inherit; + height: 1em; + overflow: visible; + vertical-align: -0.125em; +} +.svg-inline--fa.fa-lg { + vertical-align: -0.225em; +} +.svg-inline--fa.fa-w-1 { + width: 0.0625em; +} +.svg-inline--fa.fa-w-2 { + width: 0.125em; +} +.svg-inline--fa.fa-w-3 { + width: 0.1875em; +} +.svg-inline--fa.fa-w-4 { + width: 0.25em; +} +.svg-inline--fa.fa-w-5 { + width: 0.3125em; +} +.svg-inline--fa.fa-w-6 { + width: 0.375em; +} +.svg-inline--fa.fa-w-7 { + width: 0.4375em; +} +.svg-inline--fa.fa-w-8 { + width: 0.5em; +} +.svg-inline--fa.fa-w-9 { + width: 0.5625em; +} +.svg-inline--fa.fa-w-10 { + width: 0.625em; +} +.svg-inline--fa.fa-w-11 { + width: 0.6875em; +} +.svg-inline--fa.fa-w-12 { + width: 0.75em; +} +.svg-inline--fa.fa-w-13 { + width: 0.8125em; +} +.svg-inline--fa.fa-w-14 { + width: 0.875em; +} +.svg-inline--fa.fa-w-15 { + width: 0.9375em; +} +.svg-inline--fa.fa-w-16 { + width: 1em; +} +.svg-inline--fa.fa-w-17 { + width: 1.0625em; +} +.svg-inline--fa.fa-w-18 { + width: 1.125em; +} +.svg-inline--fa.fa-w-19 { + width: 1.1875em; +} +.svg-inline--fa.fa-w-20 { + width: 1.25em; +} +.svg-inline--fa.fa-pull-left { + margin-right: 0.3em; + width: auto; +} +.svg-inline--fa.fa-pull-right { + margin-left: 0.3em; + width: auto; +} +.svg-inline--fa.fa-border { + height: 1.5em; +} +.svg-inline--fa.fa-li { + width: 2em; +} +.svg-inline--fa.fa-fw { + width: 1.25em; +} + +.fa-layers svg.svg-inline--fa { + bottom: 0; + left: 0; + margin: auto; + position: absolute; + right: 0; + top: 0; +} + +.fa-layers { + display: inline-block; + height: 1em; + position: relative; + text-align: center; + vertical-align: -0.125em; + width: 1em; +} +.fa-layers svg.svg-inline--fa { + -webkit-transform-origin: center center; + transform-origin: center center; +} + +.fa-layers-counter, .fa-layers-text { + display: inline-block; + position: absolute; + text-align: center; +} + +.fa-layers-text { + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + -webkit-transform-origin: center center; + transform-origin: center center; +} + +.fa-layers-counter { + background-color: #ff253a; + border-radius: 1em; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #fff; + height: 1.5em; + line-height: 1; + max-width: 5em; + min-width: 1.5em; + overflow: hidden; + padding: 0.25em; + right: 0; + text-overflow: ellipsis; + top: 0; + -webkit-transform: scale(0.25); + transform: scale(0.25); + -webkit-transform-origin: top right; + transform-origin: top right; +} + +.fa-layers-bottom-right { + bottom: 0; + right: 0; + top: auto; + -webkit-transform: scale(0.25); + transform: scale(0.25); + -webkit-transform-origin: bottom right; + transform-origin: bottom right; +} + +.fa-layers-bottom-left { + bottom: 0; + left: 0; + right: auto; + top: auto; + -webkit-transform: scale(0.25); + transform: scale(0.25); + -webkit-transform-origin: bottom left; + transform-origin: bottom left; +} + +.fa-layers-top-right { + right: 0; + top: 0; + -webkit-transform: scale(0.25); + transform: scale(0.25); + -webkit-transform-origin: top right; + transform-origin: top right; +} + +.fa-layers-top-left { + left: 0; + right: auto; + top: 0; + -webkit-transform: scale(0.25); + transform: scale(0.25); + -webkit-transform-origin: top left; + transform-origin: top left; +} + +.fa-lg { + font-size: 1.3333333333em; + line-height: 0.75em; + vertical-align: -0.0667em; +} + +.fa-xs { + font-size: 0.75em; +} + +.fa-sm { + font-size: 0.875em; +} + +.fa-1x { + font-size: 1em; +} + +.fa-2x { + font-size: 2em; +} + +.fa-3x { + font-size: 3em; +} + +.fa-4x { + font-size: 4em; +} + +.fa-5x { + font-size: 5em; +} + +.fa-6x { + font-size: 6em; +} + +.fa-7x { + font-size: 7em; +} + +.fa-8x { + font-size: 8em; +} + +.fa-9x { + font-size: 9em; +} + +.fa-10x { + font-size: 10em; +} + +.fa-fw { + text-align: center; + width: 1.25em; +} + +.fa-ul { + list-style-type: none; + margin-left: 2.5em; + padding-left: 0; +} +.fa-ul > li { + position: relative; +} + +.fa-li { + left: -2em; + position: absolute; + text-align: center; + width: 2em; + line-height: inherit; +} + +.fa-border { + border: solid 0.08em #eee; + border-radius: 0.1em; + padding: 0.2em 0.25em 0.15em; +} + +.fa-pull-left { + float: left; +} + +.fa-pull-right { + float: right; +} + +.fa.fa-pull-left, +.fas.fa-pull-left, +.far.fa-pull-left, +.fal.fa-pull-left, +.fab.fa-pull-left { + margin-right: 0.3em; +} +.fa.fa-pull-right, +.fas.fa-pull-right, +.far.fa-pull-right, +.fal.fa-pull-right, +.fab.fa-pull-right { + margin-left: 0.3em; +} + +.fa-spin { + -webkit-animation: fa-spin 2s infinite linear; + animation: fa-spin 2s infinite linear; +} + +.fa-pulse { + -webkit-animation: fa-spin 1s infinite steps(8); + animation: fa-spin 1s infinite steps(8); +} + +@-webkit-keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +.fa-rotate-90 { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} + +.fa-rotate-180 { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} + +.fa-rotate-270 { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; + -webkit-transform: rotate(270deg); + transform: rotate(270deg); +} + +.fa-flip-horizontal { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; + -webkit-transform: scale(-1, 1); + transform: scale(-1, 1); +} + +.fa-flip-vertical { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; + -webkit-transform: scale(1, -1); + transform: scale(1, -1); +} + +.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; + -webkit-transform: scale(-1, -1); + transform: scale(-1, -1); +} + +:root .fa-rotate-90, +:root .fa-rotate-180, +:root .fa-rotate-270, +:root .fa-flip-horizontal, +:root .fa-flip-vertical, +:root .fa-flip-both { + -webkit-filter: none; + filter: none; +} + +.fa-stack { + display: inline-block; + height: 2em; + position: relative; + width: 2.5em; +} + +.fa-stack-1x, +.fa-stack-2x { + bottom: 0; + left: 0; + margin: auto; + position: absolute; + right: 0; + top: 0; +} + +.svg-inline--fa.fa-stack-1x { + height: 1em; + width: 1.25em; +} +.svg-inline--fa.fa-stack-2x { + height: 2em; + width: 2.5em; +} + +.fa-inverse { + color: #fff; +} + +.sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.sr-only-focusable:active, .sr-only-focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; +} + +.svg-inline--fa .fa-primary { + fill: var(--fa-primary-color, currentColor); + opacity: 1; + opacity: var(--fa-primary-opacity, 1); +} + +.svg-inline--fa .fa-secondary { + fill: var(--fa-secondary-color, currentColor); + opacity: 0.4; + opacity: var(--fa-secondary-opacity, 0.4); +} + +.svg-inline--fa.fa-swap-opacity .fa-primary { + opacity: 0.4; + opacity: var(--fa-secondary-opacity, 0.4); +} + +.svg-inline--fa.fa-swap-opacity .fa-secondary { + opacity: 1; + opacity: var(--fa-primary-opacity, 1); +} + +.svg-inline--fa mask .fa-primary, +.svg-inline--fa mask .fa-secondary { + fill: black; +} + +.fad.fa-inverse { + color: #fff; +} diff --git a/src/web-chatview/web.gresource.xml b/src/web-chatview/web.gresource.xml index de86990317a2fd73592ee6d16669e82ddd298fd8..584b470f4674f8413f6fc9dd1ce1a10ae89250c7 100644 --- a/src/web-chatview/web.gresource.xml +++ b/src/web-chatview/web.gresource.xml @@ -10,10 +10,13 @@ <file>linkify-string.js</file> <file>linkify-html.js</file> <file>jed.js</file> + <file>emoji.js</file> <!-- CSS --> <file>chatview.css</file> <file>chatview-gnome.css</file> + <file>emoji.css</file> + <file>fa.css</file> <!-- Locale --> </gresource>