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/homescreen/style/apps-panel.css

@@ -0,0 +1,169 @@
+#apps-panel > .scrollable {
+  overflow-y: auto;
+  height: 100%;
+  transition: transform 0.2s;
+  padding-top: 1.5vw;
+}
+
+#apps-panel > .scrollable.snapping {
+  scroll-snap-type-y: mandatory;
+}
+
+/* This weird arrangement of constant sizes, transforms and containers is so
+ * the gaia-container can animate fully between small and not-small states.
+ * Without this animation, the container would be unnecessary and only the
+ * width would need to be specified.
+ */
+.icon-container {
+  position: relative;
+  display: inline-block;
+  width: 32vw;
+  height: calc(32vw + 1.9rem);
+}
+
+gaia-app-icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 32vw;
+  box-sizing: border-box;
+  border: 0.8rem solid transparent;
+  outline: 0;
+  transition: transform 0.2s, opacity 0.2s;
+
+  font-size: 1.4rem;
+  font-weight: 400;
+  color: white;
+  text-shadow: rgba(0, 0, 0, 0.5) 0 0.1rem 0.3rem;
+}
+
+/* Small icons are scaled down 0.75x, so apply the reverse transforms to the
+ * font so that it conforms to spec.
+ */
+#apps.small gaia-app-icon {
+  font-size: calc(1.2rem / 0.75);
+  text-shadow: rgba(0, 0, 0, 0.5) 0 calc(0.1rem / 0.75) calc(0.3rem / 0.75);
+}
+
+gaia-app-icon.launching {
+  opacity: 0.8;
+}
+
+.edit-mode gaia-app-icon {
+  opacity: 0.5;
+}
+
+.edit-mode gaia-app-icon.selected {
+  transform: scale(1.1);
+  opacity: 1;
+}
+
+#apps.loading {
+  visibility: hidden;
+}
+
+#apps.small > .gaia-container-child > .icon-container {
+  width: 24vw;
+  height: calc(24vw + 1.9rem);
+}
+
+#apps > .gaia-container-child.dragging > .icon-container > gaia-app-icon {
+  transform: scale(1.1);
+  opacity: 0.8;
+}
+
+#apps.small > .gaia-container-child > .icon-container > gaia-app-icon {
+  transform: scale(0.75) translate(-4vw, -4vw);
+}
+
+#apps.small > .gaia-container-child.dragging > .icon-container > gaia-app-icon {
+  transform: scale(0.8) translate(-3.2vw, -3.2vw);
+}
+
+.dragging:not(.autoscroll) #apps > .gaia-container-child > .icon-container {
+  will-change: transform;
+}
+
+#apps > .gaia-container-child > .icon-container.hover-before {
+  transform: translateX(3.5rem);
+}
+
+#apps > .gaia-container-child > .icon-container.hover-after {
+  transform: translateX(-3.5rem);
+}
+
+#apps > .gaia-container-child.added gaia-app-icon {
+  animation-name: icon-added;
+  animation-duration: 0.4s;
+  z-index: 1;
+}
+
+#apps.small > .gaia-container-child.added gaia-app-icon {
+  animation-name: small-icon-added;
+}
+
+@keyframes icon-added {
+  0% { opacity: 0; transform: scale(0.5); }
+  100% { opacity: 1; }
+}
+
+@keyframes small-icon-added {
+  0% { opacity: 0; transform: scale(0.375) translate(-6vw, -6vw); }
+  100% { opacity: 1; transform: scale(0.75) translate(-4vw, -4vw); }
+}
+
+#apps > .gaia-container-child.removed gaia-app-icon {
+  animation-name: icon-removed;
+  animation-duration: 0.4s;
+}
+
+#apps.small > .gaia-container-child.removed gaia-app-icon {
+  animation-name: small-icon-removed;
+}
+
+@keyframes icon-removed {
+  0% { transform: scale(1); opacity: 1; }
+  100% { transform: scale(0.5); opacity: 0; }
+}
+
+@keyframes small-icon-removed {
+  0% { transform: scale(0.75) translate(-4vw, -4vw); opacity: 1; }
+  100% { transform: scale(0.375) translate(-6vw, -6vw); opacity: 0; }
+}
+
+gaia-app-icon.uneditable {
+  animation-name: icon-uneditable;
+  animation-duration: 0.4s;
+}
+
+#apps.small gaia-app-icon.uneditable {
+  animation-name: small-icon-uneditable;
+}
+
+@keyframes icon-uneditable {
+  0% { transform: rotateZ(0deg); }
+  10% { transform: rotateZ(-15deg); }
+  20% { transform: rotateZ(15deg); }
+  30% { transform: rotateZ(-15deg); }
+  40% { transform: rotateZ(15deg); }
+  50% { transform: rotateZ(-15deg); }
+  60% { transform: rotateZ(15deg); }
+  70% { transform: rotateZ(-15deg); }
+  80% { transform: rotateZ(15deg); }
+  90% { transform: rotateZ(-15deg); }
+  100% { transform: rotateZ(0deg); }
+}
+
+@keyframes small-icon-uneditable {
+  0% { transform: scale(0.75) translate(-4vw, -4vw) rotateZ(0deg); }
+  10% { transform: scale(0.75) translate(-4vw, -4vw) rotateZ(-15deg); }
+  20% { transform: scale(0.75) translate(-4vw, -4vw) rotateZ(15deg); }
+  30% { transform: scale(0.75) translate(-4vw, -4vw) rotateZ(-15deg); }
+  40% { transform: scale(0.75) translate(-4vw, -4vw) rotateZ(15deg); }
+  50% { transform: scale(0.75) translate(-4vw, -4vw) rotateZ(-15deg); }
+  60% { transform: scale(0.75) translate(-4vw, -4vw) rotateZ(15deg); }
+  70% { transform: scale(0.75) translate(-4vw, -4vw) rotateZ(-15deg); }
+  80% { transform: scale(0.75) translate(-4vw, -4vw) rotateZ(15deg); }
+  90% { transform: scale(0.75) translate(-4vw, -4vw) rotateZ(-15deg); }
+  100% { transform: scale(0.75) translate(-4vw, -4vw) rotateZ(0deg); }
+}

gaia/apps/homescreen/style/grid.css

@@ -0,0 +1,33 @@
+gaia-container {
+  width: 100vw;
+  overflow: hidden;
+  display: flex;
+  flex-flow: row wrap;
+  align-content: flex-start;
+  transition: opacity 0.2s;
+  box-sizing: padding-box;
+  padding: 0 0.6rem;
+  padding-bottom: 6rem;
+}
+
+.snapping gaia-container {
+  background: linear-gradient(to bottom, transparent,
+                                         transparent 50%,
+                                         rgba(255, 255, 255, 0.15) 50%,
+                                         rgba(255, 255, 255, 0.15));
+  background-size: 100% 200%;
+  background-repeat: repeat-y;
+}
+
+gaia-container:not(.loading) > .gaia-container-child:not(.added):not(.dragging) {
+  transition: transform 0.2s;
+}
+
+gaia-container > .gaia-container-child.dragging {
+  z-index: 1;
+  will-change: transform;
+}
+
+gaia-container > .gaia-container-child:not(.added):not(.removed) > * {
+  transition: transform 0.2s;
+}

gaia/apps/homescreen/style/images/delete_bottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><path d="M11.2 17.5l2 20.2c.1 1.5 1.4 2.6 2.9 2.6h13.1c1.4 0 2.7-1.2 2.9-2.6L34 17.5H11.2z" fill="#fff"/></svg>

gaia/apps/homescreen/style/images/delete_lid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"><path d="M31.9 9.6h-2v-1c0-2.1-1.7-3.9-3.9-3.9h-7.1c-2.1 0-3.9 1.7-3.9 3.9v1h-2c-2.2 0-4 1.8-4 4v2.7h26.8v-2.7c.1-2.2-1.7-4-3.9-4zm-14.7-.9c0-1.1.9-2 2-2h6.6c1.1 0 2 .9 2 2v.8H17.2v-.8z" fill="#fff"/></svg>

gaia/apps/homescreen/style/images/rename.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19"><path d="M18.56 4.11L4.87 17.8.997 13.922 14.684.235c.545-.543 1.853-.117 2.923.953s1.496 2.378.952 2.922zM3.7 18.786H.008v-3.692L3.7 18.786z" fill="#fff"/></svg>

gaia/apps/homescreen/style/pages-panel.css

@@ -0,0 +1,148 @@
+#pages-panel {
+  font-size: 1.5rem;
+  display: inline-block;
+}
+
+#pages-panel > .scrollable {
+  overflow-y: auto;
+  height: 100%;
+}
+
+#empty-pages {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-left: 2.2rem solid transparent;
+  border-right: 2.2rem solid transparent;
+  overflow: hidden;
+
+  color: white;
+  font-weight: 400;
+  text-shadow: rgba(0, 0, 0, 0.5) 0 0.1rem 0.3rem;
+  white-space: normal;
+  text-align: center;
+
+  transition: visibility 0.2s, opacity 0.2s;
+}
+
+#empty-pages h1 {
+  font-size: 1.6rem;
+  margin: 2.333rem 0;
+}
+
+#empty-pages p {
+  font-size: 1.4rem;
+  margin: 0 2.333rem 1.266rem;
+}
+
+#empty-pages img {
+  width: 100%;
+  margin-bottom: 1.8666rem;
+}
+
+div#boxes {
+  position: relative;
+  height: calc(15rem + 15rem + 1.0666rem);
+}
+
+div#boxes > div {
+  position: absolute;
+  width: calc(50% - 1.0666rem / 2);
+  height: 15rem;
+  border: 0.2rem dashed rgba(255, 255, 255, 0.8);
+  box-sizing: border-box;
+}
+
+/* Pseudo-element to get a shadow */
+div#boxes > div:before {
+  content: ' ';
+  position: absolute;
+  top: -0.1rem;
+  right: -0.2rem;
+  bottom: -0.3rem;
+  left: -0.2rem;
+  border: 0.2rem dashed rgba(0, 0, 0, 0.2);
+  z-index: -1;
+}
+
+div#boxes > div:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+
+div#boxes > div:nth-child(2) {
+  top: 0;
+  right: 0;
+}
+
+div#boxes > div:nth-child(3) {
+  bottom: 0;
+  left: 0;
+}
+
+div#boxes > div:nth-child(4) {
+  bottom: 0;
+  right: 0;
+}
+
+#pages-panel:not(.empty) #empty-pages {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+#pages {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  min-height: 100%;
+  padding-top: 1rem;
+}
+
+#pages gaia-pin-card {
+  display: block;
+  width: calc(50vw - 1.5vw - 0.75rem);
+  height: 16.5rem;
+  padding: 0 0 1.5rem 1.5rem;
+  outline: 0;
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.edit-mode #pages gaia-pin-card {
+  opacity: 0.5;
+}
+
+.edit-mode #pages gaia-pin-card.selected {
+  transform: scale(1.1);
+  opacity: 1;
+}
+
+#pages gaia-pin-card.unpinning {
+  position: fixed;
+}
+
+#pages > .gaia-container-child.dragging > gaia-pin-card {
+  transform: scale(1.1);
+  opacity: 0.8;
+}
+
+#pages > .gaia-container-child.added gaia-pin-card {
+  animation-name: card-added;
+  animation-duration: 0.4s;
+  z-index: 1;
+}
+
+@keyframes card-added {
+  0% { opacity: 0; transform: scale(0.8); }
+  100% { opacity: 1; }
+}
+
+#pages > .gaia-container-child.removed gaia-pin-card {
+  animation-name: card-removed;
+  animation-duration: 0.4s;
+}
+
+@keyframes card-removed {
+  0% { opacity: 0.8; }
+  100% { opacity: 0; }
+}

gaia/apps/homescreen/style/window.css

@@ -0,0 +1,212 @@
+html {
+  font-size: 10px;
+}
+
+body {
+  background-color: transparent;
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+* {
+  -moz-user-select: none;
+}
+
+#page-indicator-header {
+  width: 100%;
+  height: 1.5rem;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+#page-indicator {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  transition: opacity 0.2s;
+}
+
+.dialog-active #page-indicator,
+.edit-mode #page-indicator {
+  opacity: 0;
+}
+
+#page-indicator span {
+  position: relative;
+  display: inline-block;
+  width: 0.8rem;
+  height: 0.8rem;
+  margin: 0 0.25rem 0.5rem;
+  opacity: 0.6;
+}
+
+#page-indicator span:before,
+#page-indicator span:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  content: '';
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  transition: opacity 0.2s;
+}
+
+#page-indicator span:before {
+  opacity: 0;
+  background-color: white;
+}
+
+#page-indicator span:after {
+  opacity: 1;
+  border: 0.1rem solid white;
+}
+
+#page-indicator span.active:before {
+  opacity: 1;
+}
+
+#page-indicator span.active:after {
+  opacity: 0;
+}
+
+#panels {
+  height: calc(100vh - 1.5rem);
+  overflow-y: hidden;
+  scroll-snap-type-x: mandatory;
+  scroll-snap-points-x: repeat(100vw);
+  white-space: nowrap;
+}
+
+.dragging #panels,
+.edit-mode #panels {
+  overflow: hidden;
+}
+
+#panels > * {
+  position: relative;
+  display: inline-block;
+  width: 100vw;
+  height: 100%;
+  vertical-align: top;
+}
+
+#shadow {
+  position: absolute;
+  top: 1.5rem;
+  z-index: 1;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
+  width: 100%;
+  height: 0.8rem;
+  transition: visibility 0.3s, opacity 0.3s;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+#shadow.visible {
+  opacity: 0.5;
+  visibility: visible;
+}
+
+.dialog-active #shadow.visible {
+  opacity: 0;
+}
+
+#bottombar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 5.5rem;
+  background: rgba(0, 0, 0, 0.35);
+  transition: transform 0.2s;
+  transform: translateY(6.5rem);
+  display: flex;
+  align-content: center;
+}
+
+.edit-mode #bottombar {
+  transform: none;
+}
+
+#bottombar > * {
+  display: inline-block;
+  transition: opacity 0.2s;
+  opacity: 0.2;
+  pointer-events: none;
+}
+
+#bottombar > *.active {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+#remove {
+  display: inline-block;
+  flex: 1;
+  background: no-repeat center center url('images/delete_bottom.svg');
+  background-size: 3.0rem 3.0rem;
+}
+
+#remove::after {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 100%;
+  background: no-repeat center center url('images/delete_lid.svg');
+  background-size: 3.0rem 3.0rem;
+  transform-origin: calc(50% + 1.75rem) calc(50% + 0.8rem);
+  transition: transform 0.2s;
+}
+
+#remove:active:after {
+  transform: rotateZ(30deg);
+}
+
+#rename {
+  flex: 1;
+  background: no-repeat center center url('images/rename.svg');
+  background-size: 2.0rem 2.0rem;
+  transition: transform 0.2s;
+}
+
+#rename:active {
+  transform: rotateZ(-45deg);
+}
+
+#done {
+  display: inline-flex;
+  flex: 1;
+  opacity: 1;
+  font-size: 1.4rem;
+  font-weight: 400;
+  font-style: italic;
+  color: white;
+  justify-content: center;
+  align-items: center;
+  pointer-events: auto;
+}
+
+#done:active {
+  color: #00caf2;
+}
+
+.edit-underlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.10);
+  transition: opacity 0.2s;
+  opacity: 0;
+}
+
+.edit-mode .edit-underlay {
+  opacity: 1;
+}