Comments (31)
A bit hacky (expensive jQuery method) but a good start. I think most of the people use https://github.com/thedersen/backbone.validation for that kind of things.
from signal-desktop.
I feel like I saw someone (maybe @mcginty?) mention updating the Android TextSecure to Google's Material Design Guidelines so I figured I'd give it a shot with the browser version. Here's a WIP picture. I'll probably re-do this once we get the dependencies figured out and de-minify the manifest.css file.
from signal-desktop.
@James-Firth yeah, I've started work iterating on TextSecure's material rework.
Small note based on the material guidelines from what currently have: I think there must only be one FAB per view, and it can barf out multiple options once hovered (see inbox.google.com).
from signal-desktop.
@mcginty Sweet, I'm excited to see that UI rework :)
Hm, yeah that makes sense since creating a new thread/new group convo is similar enough to group under one initial FAB.
Just as a note with the new material designed Google Maps they use multiple FABs in one view. Just something to consider for other UI decisions. http://imgur.com/a/X9TC1
from signal-desktop.
Yeah, I just noticed that too. It seems more justifiable on their end though since the FABs serve totally different purposes, whereas ours would be two composition buttons.
from signal-desktop.
Yeah, I agree.
Bit swamped with school work but I'll post new pics when I have a chance to make more changes in a few weeks.
from signal-desktop.
Have you considered using "panels"?
It's the window style used by Hangouts. It's not enabled by default in Chrome (yet), you need to enable it here: chrome://flags/#enable-panels
But it greatly improves the simplicity and usability of the chat experience. I've been working on a mockup to try it out:
It's enabled by default in Chrome Canary, so I am hoping it will be available in the stable release soon.
It drastically improves the experience when maintaining chats with several people because the windows are always on top, but can be minimized to stay out of the way of your browsing.
from signal-desktop.
Personally I think both style have advantages so it's something worth discussing.
I like Hangouts most of the time but sometimes the panel system can be annoying.
I wonder how difficult it would be to make it a setting to split each convo into a panel or to have them all in one (Skype used to do this in their desktop app).
from signal-desktop.
I was mocking that up too. It's possible, but my mock is in emberjs at the
moment.
On 9 Nov 2014 7:30 pm, "James Firth" [email protected] wrote:
Personally I think both style have advantages so it's something worth
discussing.I like Hangouts most of the time but sometimes the panel system can be
annoying.I wonder how difficult it would be to make it a setting to split each
convo into a panel or to have them all in one (Skype used to do this in
their desktop app).β
Reply to this email directly or view it on GitHub
#60 (comment)
.
from signal-desktop.
In regards to the button, how about a single button for [new chat] and then allow for multiple contact selection in the next dialog to determine the single/group nature?
from signal-desktop.
@tstirrat Panels are nice, but it seems like we would have to convert to a chrome packaged app to use them: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-extensions/oh-ztVT6Xok
...Not that would be a bad thing, mind you. As a packaged app, in lieu of waiting for panels support we could forge ahead with the frameless windowing api already available to chrome apps: https://developer.chrome.com/apps/app_window
from signal-desktop.
app.window
might work. Tho it will require a bunch of manual window management.
panels have the following functionality built in:
- Desktop edge snap
- Minimize (roll down)
- Auto hide when minimized, so they get completely out of the way of most apps.
From a usability point of view the packaged app.window
has one benefit I can see - the app is available in the desktop app switcher (CMD-Tab).
I suppose we could write the app so that it uses panels (if enabled in chrome flags) , otherwise it uses app.window
. Either way, we'd need to write the manual window management code for app.window
ourselves.. π’
I have a basic mockup working here with panels, these fall back to popup
s when the flag is disabled. Popups are pretty much useless.. they have a standard window chrome and cannot be set to alwaysOnTop
.
Thinking purely out aloud here. Could we have a step in the initial registration flow that suggests the user enable the chrome flag.. or is that the worst idea in the world.. ?
Edit: Couldn't find a way to check for a chrome flag, but we can at least check for the ability to create panels:
var hasPanels = false;
chrome.windows.create({ type: 'panel', width: 0, height: 0 }, function (win) {
hasPanels = (win.type === 'panel');
chrome.windows.remove(win.id);
});
from signal-desktop.
Some more testing on app.window
:
- Only one entry appears in the app switcher even if multiple windows are opened.
- The keyboard shortcut for closing a window (CMD-W on mac) does not work for these windows (but it does for panels)
panel
s give a much better UX out of the box. Such a shame they aren't enabled by default.
from signal-desktop.
Been playing around with some ideas in Sketch. Note. I'm not a designer.. just a JS guy. But hopefully this can kick off some more discussion about UI.
Other designs needed:
- Verify fingerprints view
- Create new chat / add contact to current chat view (plus button)
- Settings view (e.g. to delete chat)
Some questions:
- Signal or TextSecure? will the names converge at some point for iOS and Android?
from signal-desktop.
@tstirrat that UI looks good. Feedback:
- the shadows are a bit strong behind the messages and header
- the blue circle around the avatars looks too bright in the list view, grey or avatar might work better
- icons sizing is a bit inconsistent, this is easily resolved in HTML/CSS implementation. Are you using the material design iconset?
Overall though I like it.
I used to be a designer, but I should note I switched entirely to programming a couple of years back so my skillset is not current.
from signal-desktop.
Icons are just a FontAwesome pack I found on github for sketch. Personally
I don't really like them. I needed something to fill the spaces and outline
the potential functionality. I can try a material design set tomorrow while
I tweak those other things you mentioned.
On 18 Nov 2014 10:49 pm, "Dan McGrady" [email protected] wrote:
@tstirrat https://github.com/tstirrat that UI looks good. Feedback:
- the shadows are a bit strong behind the messages and header
- the blue circle around the avatars looks too bright in the list
view, grey or avatar might work better- icons sizing is a bit inconsistent, this is easily resolved in
HTML/CSS implementation. Are you using the material design iconset?Overall though I like it.
I used to be a designer, but I should note I switched entirely to
programming a couple of years back so my skillset is not current.β
Reply to this email directly or view it on GitHub
#60 (comment)
.
from signal-desktop.
Updated shadows and removed blue border:
Still trying to find a better icon for adding a new person to a group chat. Something like glyphicons user-add
from signal-desktop.
@liliakai is there a plan for TextSecure and Signal branding to converge? Or should I be basing this on TextSecure colors/logo?
from signal-desktop.
Yes, the plan is to converge on signal branding.
On Nov 19, 2014 8:40 AM, "Tim Stirrat" [email protected] wrote:
@liliakai https://github.com/liliakai is there a plan for TextSecure
and Signal branding to converge? Or should I be basing this on TextSecure
colors/logo?β
Reply to this email directly or view it on GitHub
#60 (comment)
.
from signal-desktop.
Those mocks look nice. Don't forget that group chats can have an optional associated photo that should be displayed on the group chat view as well as in the conversation list.
I like the idea of defaulting the group photo to a collage of contact photos, but consider the edge cases of more than a few members or when no one has a photo...
from signal-desktop.
@liliakai sure, I imagine it will replace the mosaic icon on the main window.
In the group chat window, I am not sure showing the group icon has much purpose.
Some updates:
edit: turns out no one likes the inset shadow.. it will be removed.
from signal-desktop.
I've made a few assumptions. Can you confirm if these are all correct?
- There is no online/offline status available in the protocol
- There is no "Bob is typing" hint in the protocol (yet?)
- We will not be displaying insecure messages in this client, so a lock icon on each message is pointless. (insecure messages are only sent over SMS?)
Some other thoughts..
Where will the contacts come from? It will be horrible to expect them to add a phone number manually, and then browse/select an image from their desktop machine. Would we eventually integrate into Google/iCloud contacts for this?
TextSecure on android gives you the contact list with the TextSecure users at the top.. That works really well.
from signal-desktop.
We'll need to do some kind of contact import, perhaps from Google/Apple or perhaps directly from your phone, though the details there are still TBD.
from signal-desktop.
- There is no online/offline status available in the protocol
- There is no "Bob is typing" hint in the protocol (yet?)
- We will not be displaying insecure messages in this client, so a lock icon on each message is pointless. (insecure messages are only sent over SMS?)
Correct.
from signal-desktop.
Was playing around with some ideas on the flow for the first time setup:
The buttons here are placeholders. they are ugly. but I was mostly trying to work out if a single page or 2-step flow works here. (my pref is on 2 page flow)
Do you think the code verification can work inside a panel like this? or better in a main chrome tab?
from signal-desktop.
Draft of the "new chat" flow:
I imagine this will start with in a newly created panel (which will sit to the left of the main window)
- Initially this will only show existing numbers you've messaged, but eventually we can connect to google/icloud etc for contact matching.
- Pasting or typing a full phone number could auto select the checkbox, to reduce the need for another click when sending a message to a single phone number.
- Warning shows on invalid number (no
+xx
prefix), all other symbols/spacing are stripped. - Invalid number warning might need to be reworked when contact searching is in place (can match a partial phone number)
- Once you have checked at least one target contact/number, the message bar down the bottom appears. You can type a message and send immediately. Upon send, it will change into a standard chat panel.
- If the selected recipients are exactly the same as a private message or group that already exists in your history, it can/should send the message AND show the previous history.
Some caveats:
- The warning message color is just a placeholder. Not sure on what to do there yet.
- Checkmark icons are just a font. ugly. will fix.
from signal-desktop.
Do you think the code verification can work inside a panel like this? or better in a main chrome tab?
I think it makes more sense in a tab. The smaller popup panels are perfect for active conversations, definitely, but for pretty much anything else (contact/conversation management, settings page, etc...) it's really nice to have the extra breathing room provided by a tab, in much the same way that you can search, view, and manage your old Hangouts chats in Gmail.
If the selected recipients are exactly the same as a private message or group that already exists in your history, it can/should send the message AND show the previous history.
Yes, almost. Except in the group case, it should be possible to create two different groups with the same member lists but different group names/topics. For instance, I might have a long lived group chat called "Besties" with Alice and Bob. Then I start a new group with Alice and Bob called "Cryptoparty planning committee", to which we can later invite Carol...
from signal-desktop.
@tstirrat the designs look awesome. I'm writing a panelled version of the interface right now, have you implemented any of the above or are they still at the mock stage? Don't want to reinvent the wheel if you've already started working on this.
from signal-desktop.
@rileyjshaw Great! Feel free to work on anything you want. I haven't done any more than the mockups in Sketch. I'll upload the Sketch file and link it here tonight so you have the master to work from. I've been busy with some other commitments, so haven't got any further on it, yet.
from signal-desktop.
https://www.dropbox.com/s/k0s297t3umhqme0/Signal.sketch?dl=0
from signal-desktop.
@tstirrat awesome, thanks!
from signal-desktop.
Related Issues (20)
- Taskbar icon no longer correctly shows number of messages
- My Signal-Desktop has been unlinked for no reason 2x in the last 2 days, all conversations lost when relinked (the relink was to the same phone) HOT 6
- osx desktop app doesn't say person disabled disappearing messages but ios does
- [macOS] Built-in camera not available in Signal Desktop HOT 2
- Control click (right click) not available HOT 1
- Purging the official package tried to rm /opt HOT 1
- Signal Desktop quits (crashes?) when returning from suspend and /home is on NFS HOT 2
- "Edit the previous message (ArrowUp)" shortcut inteferes with "Previous chat (Option + ArrowUp)" shortcut HOT 1
- Windows Defender Application Control (WDAC) blocks .node files because they are not signed by a publisher (Windows 11/10) HOT 3
- when searhcing for a message i can't copy the text of the message once found HOT 3
- Background playback on MacOS no longer working as expected (after pause playback change in 6.48)
- Capcha on uploading debug log!?! (Which then fails.) HOT 2
- signal-desktop: ringing despite contact being muted HOT 1
- Desktop history can miss replies to expired stories
- Unhandled Promise Rejection Error: EPERM: operation not permitted, unlink
- Signal is misbehaving in weird ways HOT 2
- Missing buttons on zoomed-in pictures
- Jitter / stuttering when on audio calls via Linux signal-desktop-beta | follow up to issue #5819 HOT 2
- "Set Up as New Device" does not work HOT 1
- Signal crashes (doesn't open) | Ubuntu 24.04 with AMD Radeonβ’ gives "Cannot find target for triple amdgcn-- Unable to find target for this triple (no targets are registered)" HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from signal-desktop.