Fernando Campo (:fcampo) Assignee
	Description • 11 years ago

After talking with Ayman about the new specs, the 'Add attachment' button should be moved to the top bar.

	Fernando Campo (:fcampo) Assignee
	Comment 1 • 11 years ago

I'm gonna need a new attachment icon for the bar, as the current one is on gray color [https://github.com/mozilla-b2g/gaia/blob/master/apps/sms/style/images/paperclip-button.png]

	Rick Waldron [:rwaldron]
	Comment 2 • 11 years ago

(In reply to Fernando Campo (:fcampo) from comment #0)
> After talking with Ayman about the new specs, the 'Add attachment' button
> should be moved to the top bar.

Is there a visual spec for this? Thanks!

	Fernando Campo (:fcampo) Assignee
	Comment 3 • 11 years ago

Hey Rick, 

right now we are working on non-yet-finished specs, so we have also a non-yet-finished visuals. 
Basically I'm developing it a little on the dark, to make changes as the specs and visuals are updated, but it can be mostly inferred from the wf.

	Rick Waldron [:rwaldron]
	Comment 4 • 11 years ago

Ok, then let's hold off on actual changes to the app UI until the designs are finalized.

	Victoria Gerchinhoren [:vicky]
	Comment 5 • 11 years ago

Assets sent offline.

	Fernando Campo (:fcampo) Assignee
	Comment 6 • 11 years ago

Final wireframes and visuals are being published on bug 885680

	Fernando Campo (:fcampo) Assignee
	Comment 7 • 11 years ago

Hi Rick, will you have some free cycles to review this one?
If you are busy I could assign the review to borja, steve, or someone else from bocoup maybe?

	Rick Waldron [:rwaldron]
	Comment 8 • 11 years ago

(In reply to Fernando Campo (:fcampo) from comment #7)
> Hi Rick, will you have some free cycles to review this one?
> If you are busy I could assign the review to borja, steve, or someone else
> from bocoup maybe?

It looks like the wrong image has been used?

	Fernando Campo (:fcampo) Assignee
	Comment 11 • 11 years ago

Yeah, I saw that too, it looks like a lower resolution image. 

But checking the assets that UX passed on  (https://github.com/fcampo/gaia/tree/3a2d688aa1efa7eb91a8613038da3369e4fe280b/shared/style/headers/images/icons/attachment.png, https://github.com/fcampo/gaia/blob/3a2d688aa1efa7eb91a8613038da3369e4fe280b/shared/style/headers/images/icons/attachment%401.5x.png, https://github.com/fcampo/gaia/blob/3a2d688aa1efa7eb91a8613038da3369e4fe280b/shared/style/headers/images/icons/attachment%402x.png), I would say they seem ok.

ni victoria just in case.

	Victoria Gerchinhoren [:vicky]
	Comment 12 • 11 years ago

Hey, the originals look ok, I think some code might be resizing it accidentally...

I am needing info from Peter La to check if this is the good / final icon.

	Victoria Gerchinhoren [:vicky]
	Comment 13 • 11 years ago

Hey, the originals look ok, I think some code might be resizing it accidentally...

I am needing info from Peter La to check if this is the good / final icon.

	Rick Waldron [:rwaldron]
	Comment 14 • 11 years ago

(In reply to Victoria Gerchinhoren from comment #13)
> Hey, the originals look ok, I think some code might be resizing it
> accidentally...
> 
> I am needing info from Peter La to check if this is the good / final icon.

Good call! I tracked it down to this, in shared/style/headers.css:

section[role="region"] > header:first-child .icon {
  position: relative;
  float: none;
  display: inline-block;
  vertical-align: top;
  width: 3rem;
  height: 4.9rem;
  margin: 0 -1rem;
  background: transparent no-repeat center center / 3rem auto;
  font-size: 0;
  overflow: hidden;
}


Specifically: 

  background: transparent no-repeat center center / 3rem auto;


So in shared/style/headers.css, change: 

  section[role="region"] > header:first-child .icon.icon-attachment {
    background-image: url(headers/images/icons/attachment.png);
  }

To: 

  section[role="region"] > header:first-child .icon.icon-attachment {
    background: url("headers/images/icons/attachment.png") no-repeat center center;
  }

	Peter La
	Comment 15 • 11 years ago

Hi,

The following are the correct icons @1x and @1.5x resolutions.

	Peter La
	Comment 16 • 11 years ago

Comment on attachment 820531 [details]
Attachment Action Icons @1x and @1.5x

Apologies.  In my haste, I mistook this for a 1.2 item, and thus this icon is not up to date.  We are in the process of updating some of the header icons for 1.3.  Will post it as soon as we have a final design (soon).

	Fernando Campo (:fcampo) Assignee
	Comment 19 • 11 years ago

(In reply to Rick Waldron [:rwaldron] from comment #14)
> (In reply to Victoria Gerchinhoren from comment #13)
> > Hey, the originals look ok, I think some code might be resizing it
> > accidentally...
> > 
> > I am needing info from Peter La to check if this is the good / final icon.
> 
> Good call! I tracked it down to this, in shared/style/headers.css:
> 
> section[role="region"] > header:first-child .icon {
>   position: relative;
>   float: none;
>   display: inline-block;
>   vertical-align: top;
>   width: 3rem;
>   height: 4.9rem;
>   margin: 0 -1rem;
>   background: transparent no-repeat center center / 3rem auto;
>   font-size: 0;
>   overflow: hidden;
> }
> 
> 
> Specifically: 
> 
>   background: transparent no-repeat center center / 3rem auto;
> 
> 
> So in shared/style/headers.css, change: 
> 
>   section[role="region"] > header:first-child .icon.icon-attachment {
>     background-image: url(headers/images/icons/attachment.png);
>   }
> 
> To: 
> 
>   section[role="region"] > header:first-child .icon.icon-attachment {
>     background: url("headers/images/icons/attachment.png") no-repeat center
> center;
>   }

Hi Rick, 
I've been investigating this a little further, and after talking with Arnau, he recommended to not include the icon in the building blocks (better to overwrite the behaviour on sms.css for this specific icon). He also discovered an error on the icon asset that provokes the weird looks that we were seeing.
I'll update the pr later today, when I have a moment from koi bugs.

(In reply to Peter La from comment #17)
> Created attachment 823349 [details]
> Attachment Icon @1 and @1.5 Sizes

Cool! I'll update them too

	Fernando Campo (:fcampo) Assignee
	Comment 20 • 11 years ago

PR updated with new icons and modified css. Checked on unagi and peak, and I see the problem solved, can you check on your device Rick?

	Rick Waldron [:rwaldron]
	Comment 21 • 11 years ago

Comment on attachment 814134 [details]
Link to PR - https://github.com/mozilla-b2g/gaia/pull/12714

r=me with a rebase, thanks!!

	Fernando Campo (:fcampo) Assignee
	Comment 22 • 11 years ago

rebased and merged on master d4bd7c8a97d508c4c1adffad5f8c32a00b531ea5

Thanks to all!