visual design: attachments (send + receive)

[tomholub]

I just added a way to send encrypted attachments (for now only text files) and also receive them.

I used a very basic design I'll show in the screenshots, and a better design would be awesome :)

Sending attachments

• attaching: it should show a nice list of attached files similar to normal gmail, but maybe green?
• it should show that attachments will be encrypted, (for now with a green lock icon next to each?), later with CryptUP icon (once we have it)
• I guess the "cancel" button should just be a simple X icon
• the "edit" button is bogus and will be removed later

Receiving attachments

• each attachment file box that is encrypted gets replaced with a little iframe
• you can style anything inside the iframe
• it should feel similar to normal gmail attachments, but show clearly (also in text) that the files are encrypted
• for now will also use the green lock icon, but I hope in future to replace it with CryptUP icon

Please post screenshots/photoshop deisgns here first (as a reply) and then we put it into code later

thanks!

[mondo989]

For Sending attachments:

I agree we should somewhat close to Gmail, but still just a little different. We can use the x and put the lock icon in front as they are effective. The lock will be nice reassurance for the user to know that their attachment is encrypted. The attach icon is a little larger.

For Receiving attachments:

Sweet, we get an iframe! We can show the name within the logo and also show the download icon, which is something that the user has a habit of seeing.

Let me know any feedback

[tomholub]

sending - I like it

receiving - consider this scenario - some files might be encrypted and some not, so it might look like this:

So I think it would make sense in this case to make it a bit more consistent with gmail. Maybe throw away the "text/plain" and then have the name of the file in a footer similar as the other one. Maybe the thing on the bottom right should be green? Let me know

[mondo989]

For receiving, I agree.

Can we change the properties in the bottom right corner?

[tomholub]

Looks great. Yes whatever you need to do :) you might need to draw your own assets for the little guy in the corner. I just copied it from gmail, but badly.

Tom James Holub http://holub.me/

On Wed, Mar 9, 2016 at 4:09 PM, Armando notifications@github.com wrote:

For receiving, I agree.

Can we change the properties in the bottom right corner?

[image: screen shot 2016-03-09 at 12 07 16 am] https://cloud.githubusercontent.com/assets/3431871/13628972/10b93724-e58b-11e5-8b1c-00d04ed2af4a.png

— Reply to this email directly or view it on GitHub https://github.com/tomholub/cryptup-chrome/issues/51#issuecomment-194172247 .

[tomholub]

To implement this, you can unlink <link rel="stylesheet" href="/lib/fine_uploader/fine-uploader-new.css" /> and add the necessary styles into gmail_elements.css. For receiving, right now that is also at the end of that file, the lines body.attachment ...

[mondo989]

Here's how the attached text files look right now.

• I commented out the edit button. (Gmail doesn't use an edit icon/button)
• I put an icon inside of the cancel button, which I made css to remove the button properties.

[mondo989]

Maybe we can have the file size as how gmail has it?

Also want to align it left...

[mondo989]

Current extra feature.... Whenever the user clicks on the anything that's not the X, the element becomes content editable and the x goes a little wild.

Sorry for all the spam

[tomholub]

I'll disable the click, np. And definitely, let's add size, just say (1K) everywhere and I'll fix it after. Looks good!

Tom James Holub http://holub.me/

On Fri, Mar 11, 2016 at 6:09 PM, Armando notifications@github.com wrote:

Current extra feature.... Whenever the user clicks on the anything that's not the X, the element becomes content editable and the x goes a little wild.

[image: screen shot 2016-03-11 at 2 07 35 am] https://cloud.githubusercontent.com/assets/3431871/13699293/4bc1e70e-e72e-11e5-8448-647be06596eb.png

Sorry for all the spam

— Reply to this email directly or view it on GitHub https://github.com/tomholub/cryptup-chrome/issues/51#issuecomment-195305854 .

[mondo989]

Cool!

I've pushed updates...

One thing to note is that after 3 text files the new ones get pushed below the email's body input, it basically just disappears... Notice on the third attached †ext file, it kind of starts to fall under...

[tomholub]

Yes I was thinking about this.. I will fix that for now, the danger is that these files will stack all the way up and then obstruct the written text. I have an idea how to fix it, that we can explore later, for now I will allow 10 attachments per email or so.

Tom James Holub http://holub.me/

On Sat, Mar 12, 2016 at 8:38 AM, Armando notifications@github.com wrote:

Cool!

I've pushed updates...

One thing to note is that after 3 text files the new ones get pushed below the email's body input, it basically just disappears... Notice on the third attached †ext file, it kind of starts to fall under... [image: screen shot 2016-03-11 at 4 36 58 pm] https://cloud.githubusercontent.com/assets/3431871/13719242/9a19b872-e7a7-11e5-8823-d2b10766cb05.png

— Reply to this email directly or view it on GitHub https://github.com/tomholub/cryptup-chrome/issues/51#issuecomment-195617134 .

[tomholub]

not sure if I broke it or not, but it's showing like this now:

[tomholub]

correction, the X got fixed somehow. Also fixed more than 3 attachments.

The only thing left for now are the little file iframes, thanks!

[mondo989]

Glad it fixed. The scroll bar is a bit ugly on yours, so I added some css to hopefully hide the scrollbar. It still goes to content editable on click.

[tomholub]

Good work!