Merge pull request #165 from mancas/bug1220627

Bug 1220627 - As a desktop client user, I want to be able to share si…
mozilla · Mar 17, 2016 · 4c2f954 · 4c2f954
2 parents 48a17d5 + 479f02c
commit 4c2f954
Show file tree

Hide file tree

Showing 22 changed files with 1,321 additions and 672 deletions.
diff --git a/add-on/panels/conversation.html b/add-on/panels/conversation.html
@@ -10,6 +10,7 @@
     <base href="chrome://loop/content">
     <link rel="stylesheet" type="text/css" href="shared/css/reset.css">
     <link rel="stylesheet" type="text/css" href="shared/css/common.css">
+    <link rel="stylesheet" type="text/css" href="panels/css/desktop.css">
     <link rel="stylesheet" type="text/css" href="shared/css/conversation.css">
  </head>
   <body class="fx-embedded">
@@ -47,6 +48,7 @@
     <script type="text/javascript" src="shared/js/views.js"></script>
     <script type="text/javascript" src="shared/js/textChatView.js"></script>
     <script type="text/javascript" src="shared/js/linkifiedTextView.js"></script>
+    <script type="text/javascript" src="panels/js/desktopViews.js"></script>
     <script type="text/javascript" src="panels/js/feedbackViews.js"></script>
     <script type="text/javascript" src="panels/js/roomViews.js"></script>
     <script type="text/javascript" src="panels/js/conversation.js"></script>

diff --git a/add-on/panels/css/desktop.css b/add-on/panels/css/desktop.css
@@ -0,0 +1,252 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.panel-content.showing-share-panel,
+.panel-content.showing-share-panel > .panel-container {
+  min-height: 220px;
+}
+
+/* Room share panel */
+.room-invitation-overlay {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.85);
+  top: 0;
+  height: 100%;
+  right: 0;
+  left: 0;
+  color: #000;
+  z-index: 1010;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: stretch;
+}
+
+.room-invitation-content {
+  display: flex;
+  flex-flow: column nowrap;
+  margin: 12px 0;
+  font-size: 1.4rem;
+}
+
+.room-invitation-content > * {
+  width: 100%;
+  margin: 0 15px;
+}
+
+.room-context-header {
+  font-weight: bold;
+  font-size: 1.6rem;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+/* Input Button Combo group */
+.input-button-content {
+  margin: 0 15px 10px 15px;
+  min-width: 64px;
+  border-radius: 4px;
+}
+
+.input-button-group-label {
+  color: #898a8a;
+  margin: 0 15px;
+  margin-bottom: 2px;
+  font-size: 1.2rem;
+}
+
+.input-button-content > * {
+  width: 100%;
+  padding: 0 4px;
+}
+
+.input-button-content > .input-group input {
+  font-size: 1.4rem;
+  padding: 0.7rem;
+  width: 100%;
+  border: 0;
+}
+
+.input-button-content > .group-item-top {
+  border: 1px solid #d2cece;;
+  border-radius: 4px 4px 0 0;
+  border-bottom: 0;
+}
+
+.input-button-content > .group-item-bottom {
+  border-radius: 0 0 4px 4px;
+}
+
+.input-button-content > .input-group {
+  background: #FFF;
+}
+
+.input-button-content > .invite-button {
+  background: #00a9dc;
+  height: 34px;
+  text-align: center;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.input-button-content > .invite-button.triggered {
+  background-color: #00a9dc;
+}
+
+.input-button-content > .invite-button:hover {
+  background-color: #008ACB;
+}
+
+.share-action-group {
+  display: flex;
+  padding: 0 15px;
+  width: 100%;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.share-action-group > .invite-button {
+  cursor: pointer;
+  height: 34px;
+  border-radius: 4px;
+  background-color: #ebebeb;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  margin-right: 20px;
+}
+
+html[dir="rtl"] .share-action-group > .invite-button {
+  margin-left: 20px;
+  margin-right: initial;
+}
+
+.share-action-group > .invite-button:last-child {
+  margin-right: 0;
+}
+
+html[dir="rtl"] .share-action-group > .invite-button:last-child {
+  margin-left: 0;
+}
+
+.share-action-group > .invite-button:hover {
+  background-color: #d4d4d4;
+}
+
+.share-action-group > .invite-button.triggered {
+  background-color: #d4d4d4;
+}
+
+.share-action-group > .invite-button > img {
+  height: 28px;
+  width: 28px;
+}
+
+.share-action-group > .invite-button > div {
+  display: inline;
+  color: #4a4a4a;
+}
+
+.share-service-dropdown {
+  color: #000;
+  text-align: start;
+  bottom: auto;
+  top: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+/* When the dropdown is showing a vertical scrollbar, compensate for its width. */
+body[platform="other"] .share-service-dropdown.overflow > .dropdown-menu-item,
+body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
+  -moz-padding-end: 20px;
+}
+
+.share-service-dropdown > .dropdown-menu-item > .icon {
+  width: 14px;
+  height: 14px;
+  margin-right: 4px;
+}
+
+.dropdown-menu-item > .icon-add-share-service {
+  background-image: url("../img/icons-16x16.svg#add");
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  width: 12px;
+  height: 12px;
+}
+
+.dropdown-menu-item:hover > .icon-add-share-service {
+  background-image: url("../img/icons-16x16.svg#add-hover");
+}
+
+.dropdown-menu-item:hover:active > .icon-add-share-service {
+  background-image: url("../img/icons-16x16.svg#add-active");
+}
+
+.share-panel-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 999;
+}
+
+.share-panel-container > .share-panel-overlay {
+  background-color: rgba(0, 0, 0, .3);
+  bottom: 0;
+  display: none;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.share-panel-container > .room-invitation-overlay {
+  background-color: #fff;
+  flex: 1;
+  flex-flow: column nowrap;
+  justify-content: center;
+  transform: translateX(100%);
+  transition: transform ease 300ms;
+  width: 294px;
+  right: 0;
+  left: initial;
+}
+
+html[dir="rtl"] .share-panel-container > .room-invitation-overlay {
+  left: 0;
+  right: initial;
+  transform: translate(-100%);
+}
+
+.share-panel-container > .room-invitation-overlay > .room-invitation-content {
+  margin: 0 0 12px;
+}
+
+.share-panel-container > .room-invitation-overlay > .room-invitation-content > * {
+  width: initial;
+}
+
+.share-panel-open > .room-invitation-overlay,
+html[dir="rtl"] .share-panel-open > .room-invitation-overlay {
+  transform: translateX(0);
+}
+
+.share-panel-open > .share-panel-overlay {
+  display: block;
+}
+
+.share-panel-container > .room-invitation-overlay > .room-invitation-content > .room-context-header {
+  text-align: left;
+}
+
+html[dir="rtl"] .share-panel-container > .room-invitation-overlay > .room-invitation-content > .room-context-header {
+  text-align: right;
+}
diff --git a/add-on/panels/css/panel.css b/add-on/panels/css/panel.css
@@ -41,6 +41,15 @@ body {
   z-index: 1000;
 }
 
+.panel-container {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
 /* Notifications displayed over tabs */
 
 .panel .messages {
@@ -157,6 +166,7 @@ body {
 .rooms {
   display: block;
   width: 100%;
+  flex-grow: 2;
 }
 
 .rooms > .fte-get-started-content {