Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

gaia/apps/sms/views/new_message/style/new_message.css

@@ -0,0 +1,134 @@
+/*
+  Styles for new message
+*/
+
+section[role="region"].new > gaia-header h1 {
+  pointer-events: none;
+}
+
+.new .article-list {
+  z-index: 5;
+
+  padding: 0;
+}
+
+.new .flex-composer {
+  position: relative;
+  top: 4rem;   /* 4rem is the default size of the recipient panel */
+
+  height: calc(100% - 4rem);
+}
+
+.subheader menu {
+  position: relative;
+  flex-shrink: 0;
+
+  width: 5rem;
+  height: 4rem;
+}
+
+/* Render this container outside of the document flow so that it does not
+ * effect the height of the containing subheader, and therefore does not effect
+ * the height of the Compose field. */
+.subheader .overlay {
+  position: absolute;
+  width: 100%;
+}
+
+.multiline-recipients-mode.new .flex-composer {
+  top: 5.5rem;
+
+  height: calc(100% - 5.5rem);
+}
+
+.new #messages-container {
+  flex-basis: 0;
+}
+
+/* TODO: Remove this once panel markup split */
+#messages-contact-pick-button {
+  display: none;
+}
+
+.new #messages-contact-pick-button {
+  display: block;
+
+  width: 5rem;
+  height: 4rem;
+}
+
+#messages-contact-pick-button .icon-user {
+  position: absolute;
+  top: 0.6rem;
+  offset-inline-end: 1rem;
+
+  display: block;
+  width: 2.8rem;
+  height: 2.8rem;
+  border-radius: 50%;
+
+  color: #575757;
+  background-color: #FFF;
+}
+
+#messages-contact-pick-button .icon-user:after {
+  content: "+";
+  position: absolute;
+
+  display: block;
+  width: 2.8rem;
+  height: 2.8rem;
+
+  line-height: 2.8rem;
+  font-size: 2.1rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+#messages-contact-pick-button .icon-user:active {
+  color: #FFF;
+  background-color: #29bbb5;
+}
+
+section[role="region"].new .subheader {
+  /* The subheader contains the recipients part and because of the fact that it
+   * has "overflow: visible" we can see it. We should revise it.
+   */
+  height: 0;
+}
+
+/** To be seen below the To: field when we are creating a new message **/
+.new .overlay {
+  /* recipient's panel default size; be careful as this value depends on To:
+   * field height */
+  top: 4rem;
+}
+
+.new.multiline-recipients-mode .overlay {
+  top: 5.5rem;
+}
+
+#messages-recipient-suggestions {
+  position: absolute;
+  /* 9rem (5 rem from app header + 4rem from "To" panel heights) */
+  top: 9rem;
+
+  overflow-y: auto;
+
+  max-height: calc(100% - 9rem);
+  width: 100%;
+}
+
+.recipient-suggestions-list {
+  border-bottom: 0.1rem solid #E7E7E7;
+}
+
+.multiline-recipients-mode #messages-recipient-suggestions {
+  top: 10.5rem;
+
+  max-height: calc(100% - 10.5rem);
+}
+
+#messages-recipient-suggestions li {
+  pointer-events: auto;
+}

gaia/apps/sms/views/new_message/style/recipients.css

@@ -0,0 +1,180 @@
+html[dir="ltr"] [dir] { text-align: left; }
+html[dir="rtl"] [dir] { text-align: right; }
+
+#messages-to-field {
+  position: relative;
+  /* To be above .article-list's with z-index = 5 */
+  z-index: 6;
+
+  display: none;
+  min-height: 5.5rem;
+
+  color: black;
+  font-size: 1.465rem;
+  background-color: #f2f2f2;
+  transition: transform 0.2s ease-in-out 0s;
+  transform: translateY(calc(-100% + 4rem));
+}
+
+.multiline-recipients-mode #messages-to-field {
+  transform: translateY(calc(-100% + 5.5rem));
+}
+
+section[role="region"].new #messages-to-field {
+  display: flex;
+  align-items: flex-end;
+}
+
+section[role="region"].new #messages-to-field.multiline {
+  transform: translateY(0);
+}
+
+#to-label {
+  flex-shrink: 0;
+
+  height: 4rem;
+  padding-inline-start: 1.5rem;
+  padding-inline-end: 0.7rem;
+
+  line-height: 4rem;
+  font-weight: 200;
+  font-size: 1.465rem;
+  color: #000;
+}
+
+#messages-recipients-list-container {
+  min-height: 4rem;
+  min-width: 0;
+  box-sizing: border-box;
+
+  flex-grow: 1;
+}
+
+#messages-recipients-list {
+  box-sizing: border-box;
+  min-height: 4rem;
+  padding-top: 0;
+  padding-inline-end: 0.6rem;
+  padding-bottom: 0.6rem;
+  padding-inline-start: 0;
+
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+
+/*
+Used by Recipients.View to display multi or single line.
+Do not remove.
+*/
+#messages-recipients-list.singleline {
+  overflow-y: hidden;
+}
+
+#messages-recipients-list.multiline {
+  /* max-height = viewport - header - minimum composer - list margin */
+  max-height: calc(100vh - 5rem - 4rem - 0.6rem);
+  margin-bottom: 0.6rem;
+  padding-bottom: 0;
+
+  overflow-y: scroll;
+}
+
+/**
+ * BiDi note: all [contenteditable] blocks must carry a `dir="auto"` attribute,
+ * so we cannot use *-inline-{start,end} properties on them, because the
+ * direction of a dir="auto" element (and therefore the position of start/end)
+ * depends on its content. We want our margin/padding to depend on the document
+ * direction, not element's content.
+ */
+.recipient[contenteditable] {
+  overflow: hidden;
+  margin: 0.6rem 0 0;
+
+  display: block;
+
+  /* override BB selector */
+  height: auto;
+  width: auto;
+}
+html[dir="ltr"] .recipient[contenteditable] { margin-right: 0.6rem; }
+html[dir="rtl"] .recipient[contenteditable] { margin-left: 0.6rem; }
+
+.recipient[contenteditable].email {
+  background: #fff url(images/icons/icon_sms_compose_email.png) no-repeat;
+  background-size: 1.7rem;
+}
+/* see BiDi note above */
+html[dir="ltr"] .recipient[contenteditable].email {
+  padding-left: 3.8rem;
+  background-position: left 1.5rem center;
+}
+html[dir="rtl"] .recipient[contenteditable].email {
+  padding-right: 3.8rem;
+  background-position: right 1.5rem center;
+}
+
+#messages-recipients-list > .recipient[contenteditable=true] {
+  flex-grow: 1;
+  height: 2.8rem;
+  line-height: 2.8rem;
+  border-radius: 0;
+
+  word-wrap: unset;
+
+  /* Building blocks override (bug xxx) */
+  background: none;
+  color: #000;
+}
+
+#messages-recipients-list > .recipient[contenteditable=true]:focus {
+  /**
+   * To workaround bug 1103011, we just collapse editable recipient on focus so
+   * that caret position looks correct for the user, while in fact it is not
+   * true - caret is still in wrong position, but zero-width editable element is
+   * aligned correctly inside parent.
+   */
+  flex-grow: unset;
+}
+
+.recipient[contenteditable=true]:empty:not(:last-of-type) {
+  display: none;
+}
+
+/**
+ * Disable padding and give negative margin-end on empty contenteditable
+ * recipients when they do not have focus. This allows the Recipients List
+ * to intelligently collapse when the final row contains no "assimilated"
+ * (i.e. non-contenteditable) recipients. */
+.recipient[contenteditable=true]:empty {
+  padding: 0;
+}
+/**
+ * We don't use margin-inline-end here because of the bug 1103011, as currently
+ * directionality of empty contenteditable isn't inherited from parent, but
+ * always LTR, so margin-inline-end equals to margin-right in both LTR and RTL
+ * modes. So to align it correctly we should override margin depending on text
+ * direction of parent element manually.
+ */
+html[dir="ltr"] .recipient[contenteditable=true]:empty {
+  margin-right: -0.5rem;
+}
+html[dir="rtl"] .recipient[contenteditable=true]:empty {
+  margin-left: -0.5rem;
+}
+
+/* see BiDi note above */
+html[dir="ltr"] .recipient[contenteditable=true]:focus,
+html[dir="ltr"] .recipient[contenteditable=true]:hover,
+html[dir="ltr"] .recipient[contenteditable=true]:empty:focus {
+  margin-right: 0.5rem;
+  padding-right: 0.3rem;
+}
+html[dir="rtl"] .recipient[contenteditable=true]:focus,
+html[dir="rtl"] .recipient[contenteditable=true]:hover,
+html[dir="rtl"] .recipient[contenteditable=true]:empty:focus {
+  margin-left: 0.5rem;
+  padding-left: 0.3rem;
+}
+