UI improvements
This commit is contained in:
sairaj mote
parent
de0073ae68
commit
6e2698bdec
24
css/main.css
24
css/main.css
@ -130,7 +130,7 @@ button,
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
border-radius: 0.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
button:focus-visible,
|
||||
@ -147,6 +147,7 @@ button:not(:disabled),
|
||||
border: solid thin rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.button--primary {
|
||||
padding: 0.6rem 1rem;
|
||||
color: rgba(var(--background-color), 1);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
@ -166,18 +167,16 @@ button:not(:disabled),
|
||||
.button--danger .icon {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
.button--filled {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.button--small {
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
.button--rounded {
|
||||
border-radius: 4em !important;
|
||||
}
|
||||
.button--outlined {
|
||||
border: solid rgba(var(--text-color), 0.3) 0.1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
border: solid var(--accent-color) 1px;
|
||||
background-color: transparent;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.button--outlined .icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
.button--transparent {
|
||||
background-color: transparent;
|
||||
@ -1973,6 +1972,13 @@ sm-chip .badge {
|
||||
border-radius: 2rem;
|
||||
justify-self: center;
|
||||
padding: 0.3rem;
|
||||
view-transition-name: chat-button;
|
||||
}
|
||||
|
||||
::view-transition-old(chat-button),
|
||||
::view-transition-new(chat-button) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#receiver_name {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -139,7 +139,7 @@ button,
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
border-radius: 0.5rem;
|
||||
justify-content: center;
|
||||
&:focus-visible {
|
||||
outline: var(--accent-color) solid medium;
|
||||
@ -154,6 +154,7 @@ button,
|
||||
background-color: rgba(var(--text-color), 0.02);
|
||||
border: solid thin rgba(var(--text-color), 0.06);
|
||||
&--primary {
|
||||
padding: 0.6rem 1rem;
|
||||
color: rgba(var(--background-color), 1);
|
||||
background-color: var(--accent-color);
|
||||
|
||||
@ -174,18 +175,18 @@ button,
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
}
|
||||
&--filled {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
&--rounded {
|
||||
border-radius: 4em !important;
|
||||
}
|
||||
|
||||
&--outlined {
|
||||
border: solid rgba(var(--text-color), 0.3) 0.1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
border: solid var(--accent-color) 1px;
|
||||
background-color: transparent;
|
||||
color: var(--accent-color);
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
&--transparent {
|
||||
background-color: transparent;
|
||||
@ -269,7 +270,6 @@ sm-textarea {
|
||||
font-size: 0.9rem;
|
||||
--border-radius: 0.5rem;
|
||||
--background-color: rgba(var(--foreground-color), 1);
|
||||
|
||||
button {
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
@ -2023,6 +2023,12 @@ sm-chip {
|
||||
border-radius: 2rem;
|
||||
justify-self: center;
|
||||
padding: 0.3rem;
|
||||
view-transition-name: chat-button;
|
||||
}
|
||||
::view-transition-old(chat-button),
|
||||
::view-transition-new(chat-button) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#receiver_name {
|
||||
|
||||
165
index.html
165
index.html
@ -800,35 +800,37 @@
|
||||
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
|
||||
</svg>
|
||||
</button>
|
||||
<h4>Contacts</h4>
|
||||
</header>
|
||||
<div class="scrolling-wrapper grid gap-1-5">
|
||||
<fieldset id="all_contacts_options">
|
||||
<button id="create_group_option" class="option interactive" onclick="openCreationPopup('group')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M9 13.75c-2.34 0-7 1.17-7 3.5V19h14v-1.75c0-2.33-4.66-3.5-7-3.5zM4.34 17c.84-.58 2.87-1.25 4.66-1.25s3.82.67 4.66 1.25H4.34zM9 12c1.93 0 3.5-1.57 3.5-3.5S10.93 5 9 5 5.5 6.57 5.5 8.5 7.07 12 9 12zm0-5c.83 0 1.5.67 1.5 1.5S9.83 10 9 10s-1.5-.67-1.5-1.5S8.17 7 9 7zm7.04 6.81c1.16.84 1.96 1.96 1.96 3.44V19h4v-1.75c0-2.02-3.5-3.17-5.96-3.44zM15 12c1.93 0 3.5-1.57 3.5-3.5S16.93 5 15 5c-.54 0-1.04.13-1.5.35.63.89 1 1.98 1 3.15s-.37 2.26-1 3.15c.46.22.96.35 1.5.35z" />
|
||||
</svg>
|
||||
Create new group
|
||||
</button>
|
||||
<button id="add_contact_option" class="option interactive" onclick="openPopup('add_contact_popup')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4S5,5.79,5,8C5,10.21,6.79,12,9,12z M9,6 c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S7,9.1,7,8C7,6.9,7.9,6,9,6z M15.39,14.56C13.71,13.7,11.53,13,9,13c-2.53,0-4.71,0.7-6.39,1.56 C1.61,15.07,1,16.1,1,17.22V20h16v-2.78C17,16.1,16.39,15.07,15.39,14.56z M15,18H3v-0.78c0-0.38,0.2-0.72,0.52-0.88 C4.71,15.73,6.63,15,9,15c2.37,0,4.29,0.73,5.48,1.34C14.8,16.5,15,16.84,15,17.22V18z" />
|
||||
</g>
|
||||
</svg>
|
||||
Add contact
|
||||
</button>
|
||||
</fieldset>
|
||||
<div class="grid gap-1">
|
||||
<h5>Contacts</h5>
|
||||
<sm-input id="search_contacts" type="search" placeholder="Search"> </sm-input>
|
||||
<fieldset id="all_contacts_options" class="flex align-center flex-wrap gap-0-5">
|
||||
<button id="create_group_option" class="interactive button button--colored button--small gap-0-5"
|
||||
onclick="openCreationPopup('group')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M9 13.75c-2.34 0-7 1.17-7 3.5V19h14v-1.75c0-2.33-4.66-3.5-7-3.5zM4.34 17c.84-.58 2.87-1.25 4.66-1.25s3.82.67 4.66 1.25H4.34zM9 12c1.93 0 3.5-1.57 3.5-3.5S10.93 5 9 5 5.5 6.57 5.5 8.5 7.07 12 9 12zm0-5c.83 0 1.5.67 1.5 1.5S9.83 10 9 10s-1.5-.67-1.5-1.5S8.17 7 9 7zm7.04 6.81c1.16.84 1.96 1.96 1.96 3.44V19h4v-1.75c0-2.02-3.5-3.17-5.96-3.44zM15 12c1.93 0 3.5-1.57 3.5-3.5S16.93 5 15 5c-.54 0-1.04.13-1.5.35.63.89 1 1.98 1 3.15s-.37 2.26-1 3.15c.46.22.96.35 1.5.35z" />
|
||||
</svg>
|
||||
Create new group
|
||||
</button>
|
||||
<button id="add_contact_option" class="interactive button button--colored button--small gap-0-5"
|
||||
onclick="openPopup('add_contact_popup')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4S5,5.79,5,8C5,10.21,6.79,12,9,12z M9,6 c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S7,9.1,7,8C7,6.9,7.9,6,9,6z M15.39,14.56C13.71,13.7,11.53,13,9,13c-2.53,0-4.71,0.7-6.39,1.56 C1.61,15.07,1,16.1,1,17.22V20h16v-2.78C17,16.1,16.39,15.07,15.39,14.56z M15,18H3v-0.78c0-0.38,0.2-0.72,0.52-0.88 C4.71,15.73,6.63,15,9,15c2.37,0,4.29,0.73,5.48,1.34C14.8,16.5,15,16.84,15,17.22V18z" />
|
||||
</g>
|
||||
</svg>
|
||||
Add contact
|
||||
</button>
|
||||
</fieldset>
|
||||
<div id="contacts_container" class="observe-empty-state"></div>
|
||||
<div class="empty-state">
|
||||
<h4 class="margin-bottom-0-5">No saved contacts</h4>
|
||||
@ -915,7 +917,7 @@
|
||||
d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z" />
|
||||
</svg>
|
||||
<sm-input id="group_name_field" placeholder="Group name" animate required></sm-input>
|
||||
<sm-textarea id="group_description_field" placeholder="Group description"></sm-textarea>
|
||||
<sm-textarea id="group_description_field" rows="3" placeholder="Group description"></sm-textarea>
|
||||
<div class="multi-state-button">
|
||||
<button id="create_group_button" class="button button--primary" type="submit" disabled>
|
||||
Create
|
||||
@ -1781,7 +1783,6 @@
|
||||
fill: 'forwards',
|
||||
easing: 'ease-out',
|
||||
})
|
||||
|
||||
getRef('chat_view').classList.remove('hidden')
|
||||
getRef('chat_view').classList.remove('hide-on-mobile')
|
||||
getRef('chat_view').nextElementSibling.classList.add('hidden')
|
||||
@ -3993,6 +3994,9 @@
|
||||
getRef("receiver_initial").textContent = getContactName(floID).charAt(0);
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
getChatCard(floID)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
}, 100);
|
||||
getRef("receiver_initial").setAttribute('style', `--contact-color: var(${contactColor(floID)})`)
|
||||
messenger.removeMark(floID, "unread");
|
||||
if (this.scrollHeight <= this.clientHeight) {
|
||||
@ -4006,7 +4010,6 @@
|
||||
getRef('chat_footer').classList.remove('hidden')
|
||||
}
|
||||
lastSender = ''
|
||||
// fix issue with encryption
|
||||
renderMessages(floID).then(async () => {
|
||||
if (activeChat.type === 'pipeline') {
|
||||
if (!messenger.pipeline[floID].disabled && floGlobals.pipeSigns[floID] && !floGlobals.pipeSigns[floID].has(floDapps.user.id)) {
|
||||
@ -4642,57 +4645,63 @@
|
||||
easing: 'ease',
|
||||
fill: 'forwards'
|
||||
};
|
||||
let originalName = getRef('receiver_name').textContent
|
||||
getRef('chat_details_button').style.overflow = 'initial'
|
||||
const originalPillWidth = getRef('chat_details_button').getBoundingClientRect().width;
|
||||
const originalNameWidth = getRef('receiver_name').getBoundingClientRect().width;
|
||||
getRef('receiver_name').textContent = name
|
||||
const changedWidth = getRef('chat_details_button').getBoundingClientRect().width;
|
||||
const widthDelta = changedWidth - originalPillWidth
|
||||
const leftMove = -widthDelta / 2;
|
||||
const rightMove = widthDelta / 2;
|
||||
const scale = (changedWidth / (originalPillWidth || 1)).toFixed(2) || 1;
|
||||
getRef('receiver_name').textContent = originalName
|
||||
getRef('receiver_name').style.width = `${originalNameWidth}px`
|
||||
renderElem(getRef('receiver_name'), html`
|
||||
<span>${name}</span>
|
||||
<span>${originalName}</span>
|
||||
`)
|
||||
getRef('receiver_name').children[0].animate(fadeIn, animOptions)
|
||||
getRef('receiver_name').children[1].animate(fadeOut, animOptions).onfinish = e => {
|
||||
e.target.cancel()
|
||||
getRef('receiver_name').style.width = 'auto'
|
||||
renderElem(getRef('receiver_name'), html`${name}`)
|
||||
}
|
||||
getRef('pseudo_background').animate([
|
||||
{
|
||||
width: `${originalPillWidth}px`
|
||||
}, {
|
||||
width: `${changedWidth}px`
|
||||
if (document.startViewTransition) {
|
||||
document.startViewTransition(() => {
|
||||
getRef('receiver_name').textContent = name
|
||||
})
|
||||
} else {
|
||||
let originalName = getRef('receiver_name').textContent
|
||||
getRef('chat_details_button').style.overflow = 'initial'
|
||||
const originalPillWidth = getRef('chat_details_button').getBoundingClientRect().width;
|
||||
const originalNameWidth = getRef('receiver_name').getBoundingClientRect().width;
|
||||
getRef('receiver_name').textContent = name
|
||||
const changedWidth = getRef('chat_details_button').getBoundingClientRect().width;
|
||||
const widthDelta = changedWidth - originalPillWidth
|
||||
const leftMove = -widthDelta / 2;
|
||||
const rightMove = widthDelta / 2;
|
||||
const scale = (changedWidth / (originalPillWidth || 1)).toFixed(2) || 1;
|
||||
getRef('receiver_name').textContent = originalName
|
||||
getRef('receiver_name').style.width = `${originalNameWidth}px`
|
||||
renderElem(getRef('receiver_name'), html`
|
||||
<span>${name}</span>
|
||||
<span>${originalName}</span>
|
||||
`)
|
||||
getRef('receiver_name').children[0].animate(fadeIn, animOptions)
|
||||
getRef('receiver_name').children[1].animate(fadeOut, animOptions).onfinish = e => {
|
||||
e.target.cancel()
|
||||
getRef('receiver_name').style.width = 'auto'
|
||||
renderElem(getRef('receiver_name'), html`${name}`)
|
||||
}
|
||||
getRef('pseudo_background').animate([
|
||||
{
|
||||
width: `${originalPillWidth}px`
|
||||
}, {
|
||||
width: `${changedWidth}px`
|
||||
}
|
||||
], animOptions).onfinish = (e) => {
|
||||
getRef('chat_details_button').style.overflow = 'hidden'
|
||||
e.target.cancel()
|
||||
}
|
||||
getRef('chat_details_button').querySelector('#receiver_initial').animate([
|
||||
{
|
||||
transform: `none`
|
||||
},
|
||||
{
|
||||
transform: `translateX(${leftMove}px)`
|
||||
},
|
||||
], animOptions).onfinish = e => {
|
||||
e.target.cancel()
|
||||
}
|
||||
getRef('chat_details_button').children[2].animate([
|
||||
{
|
||||
transform: `none`
|
||||
},
|
||||
{
|
||||
transform: `translateX(${rightMove}px)`
|
||||
},
|
||||
], animOptions).onfinish = e => {
|
||||
e.target.cancel()
|
||||
}
|
||||
], animOptions).onfinish = (e) => {
|
||||
getRef('chat_details_button').style.overflow = 'hidden'
|
||||
e.target.cancel()
|
||||
}
|
||||
getRef('chat_details_button').querySelector('#receiver_initial').animate([
|
||||
{
|
||||
transform: `none`
|
||||
},
|
||||
{
|
||||
transform: `translateX(${leftMove}px)`
|
||||
},
|
||||
], animOptions).onfinish = e => {
|
||||
e.target.cancel()
|
||||
}
|
||||
getRef('chat_details_button').children[2].animate([
|
||||
{
|
||||
transform: `none`
|
||||
},
|
||||
{
|
||||
transform: `translateX(${rightMove}px)`
|
||||
},
|
||||
], animOptions).onfinish = e => {
|
||||
e.target.cancel()
|
||||
}
|
||||
} else {
|
||||
getRef('receiver_name').textContent = name
|
||||
|
||||
@ -1032,6 +1032,7 @@
|
||||
UI.chats(getChatOrder());
|
||||
UI.mails(data.mails);
|
||||
UI.marked(data.marked);
|
||||
resolve('Loaded local data')
|
||||
//request data from cloud
|
||||
let promises = [];
|
||||
promises.push(requestDirectInbox());
|
||||
|
||||
2
scripts/messenger.min.js
vendored
2
scripts/messenger.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user