diff --git a/browser/components/loop/content/css/panel.css b/browser/components/loop/content/css/panel.css index e2b62fb1102a..4af9af62f190 100644 --- a/browser/components/loop/content/css/panel.css +++ b/browser/components/loop/content/css/panel.css @@ -365,26 +365,6 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar { -moz-margin-start: 0; } -.new-room-view > .context > .checkbox-wrapper { - height: 2rem; - margin-bottom: .5em; - line-height: 2rem; -} - -.new-room-view > .context > .checkbox-wrapper > .checkbox { - border-color: #d8d8d8; - background-color: #fff; -} - -.new-room-view > .context > .checkbox-wrapper > .checkbox.checked { - background-image: url("../shared/img/check.svg#check-blue"); -} - -.new-room-view > .context > .checkbox-wrapper > label { - color: #333; - font-size: 1.1rem; -} - .new-room-view > .btn { flex: 1; height: 3rem; diff --git a/browser/components/loop/content/shared/css/common.css b/browser/components/loop/content/shared/css/common.css index 131d7bd79339..80876942ac05 100644 --- a/browser/components/loop/content/shared/css/common.css +++ b/browser/components/loop/content/shared/css/common.css @@ -484,6 +484,10 @@ html[dir="rtl"] .dropdown-menu { /* Custom checkbox */ .checkbox-wrapper { + height: 2rem; + margin-bottom: .5rem; + width: 100%; + line-height: 2.2rem; -moz-user-select: none; user-select: none; } @@ -492,15 +496,15 @@ html[dir="rtl"] .dropdown-menu { float: left; width: 2rem; height: 2rem; - -moz-margin-end: .5em; - margin-top: .1em; + -moz-margin-end: .5rem; + margin-top: .1rem; border: 1px solid #999; - border-radius: 3px; + border-radius: .3rem; cursor: pointer; background-color: transparent; background-position: center center; background-repeat: no-repeat; - background-size: 1em 1em; + background-size: 2rem; } html[dir="rtl"] .checkbox { @@ -531,6 +535,10 @@ html[dir="rtl"] .checkbox { text-align: left; } +.checkbox-wrapper > checkbox-label { + font-size: 1.1rem; +} + html[dir="rtl"] .checkbox-label.ellipsis { text-align: right; } diff --git a/browser/components/loop/content/shared/css/conversation.css b/browser/components/loop/content/shared/css/conversation.css index 624a66626371..408b5735dc6c 100644 --- a/browser/components/loop/content/shared/css/conversation.css +++ b/browser/components/loop/content/shared/css/conversation.css @@ -1024,17 +1024,21 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item { text-shadow: 1px 1px 0 rgba(0,0,0,.3); } -.room-context > .checkbox-wrapper { - margin-bottom: .5em; - width: 100%; +.new-room-view > .context > .checkbox-wrapper .checkbox { + border-color: #d8d8d8; + background-color: #fff; +} + +.new-room-view > .context > .checkbox-wrapper .checkbox.checked { + background-image: url("../img/check.svg#check-blue"); +} + +.new-room-view > .context > .checkbox-wrapper > label { + color: #333; } .room-context-label { margin-bottom: 1em; -} - -.room-context-label, -.room-context > .checkbox-wrapper > label { color: #fff; } diff --git a/browser/components/loop/ui/ui-showcase.js b/browser/components/loop/ui/ui-showcase.js index e171b8e92d4e..e8d0389e8d49 100644 --- a/browser/components/loop/ui/ui-showcase.js +++ b/browser/components/loop/ui/ui-showcase.js @@ -29,6 +29,7 @@ var DirectCallFailureView = loop.conversationViews.DirectCallFailureView; var RoomFailureView = loop.roomViews.RoomFailureView; var DesktopRoomConversationView = loop.roomViews.DesktopRoomConversationView; + var DesktopRoomEditContextView = loop.roomViews.DesktopRoomEditContextView; // 2. Standalone webapp var HomeView = loop.webapp.HomeView; @@ -1390,6 +1391,23 @@ ) ), + React.createElement(FramedExample, {height: 278.6, + onContentsRendered: invitationRoomStore.activeRoomStore.forcedUpdate, + summary: "Desktop room Edit Context w/Error", + width: 298}, + React.createElement("div", {className: "fx-embedded room-invitation-overlay"}, + React.createElement(DesktopRoomEditContextView, { + dispatcher: dispatcher, + error: {}, + mozLoop: navigator.mozLoop, + onClose: function(){}, + roomData: {}, + savingContext: false, + show: true} + ) + ) + ), + React.createElement(FramedExample, {dashed: true, height: 394, onContentsRendered: desktopRoomStoreLoading.activeRoomStore.forcedUpdate, diff --git a/browser/components/loop/ui/ui-showcase.jsx b/browser/components/loop/ui/ui-showcase.jsx index b72d592a93e2..a4e63acbfee5 100644 --- a/browser/components/loop/ui/ui-showcase.jsx +++ b/browser/components/loop/ui/ui-showcase.jsx @@ -29,6 +29,7 @@ var DirectCallFailureView = loop.conversationViews.DirectCallFailureView; var RoomFailureView = loop.roomViews.RoomFailureView; var DesktopRoomConversationView = loop.roomViews.DesktopRoomConversationView; + var DesktopRoomEditContextView = loop.roomViews.DesktopRoomEditContextView; // 2. Standalone webapp var HomeView = loop.webapp.HomeView; @@ -1390,6 +1391,23 @@ + +
+ +
+
+