SHA256
WIP: эмодзи-пикер (Telegram-набор) — чекпоинт незавершённой работы
- Эмодзи-пикер: js/components/emoji-picker.js + каталог telegram-emoji-*.js (smileys/people/animals_nature/food_drink/travel_places/activity/objects/ symbols/flags) + 631 ассет в assets/emoji (7.2 МБ). - Интеграция пикера: chat-view.js, app.js, index.html, styles/components.css. - Дев-скрипты генерации превью + THIRD_PARTY_NOTICES. - Работа НЕ завершена (WIP), сохранено как чекпоинт. С origin (+56) пока НЕ мержится — большой мерж будет после завершения, отдельным шагом. - VERSION: client 1.2.263. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Pixel
@@ -785,6 +785,7 @@
|
||||
|
||||
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-choice-screen {
|
||||
align-content: start;
|
||||
justify-items: stretch;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@@ -4463,6 +4464,17 @@ html, body { overflow-x: hidden; }
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.screen-content:has(> .dm-screen) {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.screen-content:has(> .dm-screen)::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dm-messages-log {
|
||||
gap: 10px;
|
||||
}
|
||||
@@ -4543,25 +4555,188 @@ html, body { overflow-x: hidden; }
|
||||
}
|
||||
|
||||
.dm-voice-btn {
|
||||
grid-area: voice;
|
||||
min-width: 42px;
|
||||
width: 42px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.dm-actions-col {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: repeat(2, 42px);
|
||||
grid-template-rows: repeat(2, 42px);
|
||||
grid-template-areas:
|
||||
". voice"
|
||||
"emoji send";
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dm-emoji-btn {
|
||||
grid-area: emoji;
|
||||
min-width: 42px;
|
||||
width: 42px;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.emoji-picker-slot {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.emoji-picker-slot[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emoji-picker {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
max-height: min(40vh, 292px);
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
padding: 10px;
|
||||
border-radius: 14px;
|
||||
background: rgba(12, 19, 31, 0.98);
|
||||
box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.emoji-picker::-webkit-scrollbar,
|
||||
.emoji-picker-tabs::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emoji-picker-section {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.emoji-picker-section-title {
|
||||
color: rgba(205, 218, 246, 0.78);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.emoji-picker-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 2px;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.emoji-picker-tab {
|
||||
flex: 0 0 38px;
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
.emoji-picker-tab,
|
||||
.emoji-picker-item {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.emoji-picker-tab {
|
||||
min-height: 34px;
|
||||
border-radius: 8px;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.emoji-picker-tab.is-active {
|
||||
background: rgba(212, 175, 55, 0.16);
|
||||
}
|
||||
|
||||
.emoji-picker-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.emoji-picker-item {
|
||||
min-height: 38px;
|
||||
border-radius: 8px;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.emoji-picker-tab:focus,
|
||||
.emoji-picker-item:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.emoji-picker-tab:active,
|
||||
.emoji-picker-item:active {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.emoji-picker-tab:focus-visible,
|
||||
.emoji-picker-item:focus-visible {
|
||||
outline: 2px solid rgba(166, 218, 255, 0.8);
|
||||
outline-offset: 2px;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.telegram-emoji,
|
||||
.emoji-picker-preview {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.12em;
|
||||
}
|
||||
|
||||
.telegram-emoji-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.telegram-emoji.is-error .telegram-emoji-image,
|
||||
.emoji-picker-preview.is-error .telegram-emoji-image {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.bubble-text--animated-emoji {
|
||||
font-size: 56px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bubble-text--animated-emoji .chat-telegram-emoji {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.dm-chat-input .dm-input {
|
||||
min-height: 42px;
|
||||
max-height: 180px;
|
||||
resize: none;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
line-height: 1.35;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.dm-chat-input .dm-input::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.voice-level-wrap {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
@@ -4600,6 +4775,7 @@ html, body { overflow-x: hidden; }
|
||||
}
|
||||
|
||||
.dm-send-icon-btn {
|
||||
grid-area: send;
|
||||
min-width: 42px;
|
||||
width: 42px;
|
||||
padding: 0;
|
||||
@@ -4771,9 +4947,9 @@ html, body { overflow-x: hidden; }
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
background: rgba(18, 24, 38, 0.4);
|
||||
backdrop-filter: blur(25px);
|
||||
-webkit-backdrop-filter: blur(25px);
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||||
border-radius: 20px;
|
||||
}
|
||||
@@ -5559,6 +5735,19 @@ html, body { overflow-x: hidden; }
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Use the shared application canvas for every primary navigation screen. */
|
||||
.dm-screen,
|
||||
.profile-screen,
|
||||
.notifications-screen {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.dm-screen::before,
|
||||
.profile-screen::before,
|
||||
.notifications-screen::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.dm-screen .dm-list > .card.meta-muted {
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
@@ -5649,13 +5838,21 @@ html, body { overflow-x: hidden; }
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
background: rgba(18, 24, 38, 0.4);
|
||||
backdrop-filter: blur(25px);
|
||||
-webkit-backdrop-filter: blur(25px);
|
||||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.profile-screen .profile-param-item {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.profile-screen .profile-main-card {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.toolbar-btn.active {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
|
||||
Reference in New Issue
Block a user