Merge pull request #69 from cowbell/remove-bootstrap-sass

Remove bootstrap SASS

app/components/popover-confirm.js

@@ -4,7 +4,6 @@ import { computed } from '@ember/object';
 export default Component.extend({
   classNames: ['popover-confirm'],
   isVisible: false,
-
   iconClass: computed('filename', function() {
     const filename = this.get('filename');
 

app/styles/base/_element_defaults.sass

@@ -16,7 +16,7 @@ b, strong
   font-weight: bold
 
 input, select
-  font-family: $font-family
+  font-family: inherit
   padding: 1rem
   border: 1px solid #ccc
   width: 100%

app/styles/base/_mixins.sass

@@ -12,7 +12,7 @@
   outline: none
   width: auto
   cursor: pointer
-  font-family: $font-family
+  font-family: inherit
 
 =shape($size, $shape)
   display: inline-block

app/styles/layout/_media.sass

@@ -18,60 +18,11 @@
     .note
       display: block
 
-  .popover
-    $bg_color: #f4f4f4
-    left: 100px !important
-    right: 0
-    top: 0 !important
-    bottom: 0
-    border: none
-    width: auto
-    box-shadow: none
-    border-radius: 0
-    padding: 15px
-    background-color: $bg_color
-    &::after
-      left: 0
-      bottom: 50%
-      margin-bottom: -6px
-      background-color: $bg_color
-      border: none
-    .popover-content
-      padding-right: 100px
-      .popover-body
-        padding-left: 0
-        > p
-          max-height: 76px
-      .popover-icon
-        display: none
-      .popover-buttons
-        position: absolute
-        top: -15px
-        right: -115px
-        width: 100px
-        height: 106px
-        text-align: right
-        button
-          +button_reset
-          height: 106px
-          line-height: 106px
-          width: 50%
-          font-size: 1.2rem
-          margin-left: -3px
-          color: #fff
-          &.cancel
-            background: #d0d0d0
-            &:active
-              background: #c0c0c0
-          &.confirm
-            background: rgba($blue,.6)
-            &:active
-              background: $blue
-
   .l-content
     padding: 80px 0 115px
     min-height inherit
     height: auto
+
   .user
     .peer
       position: relative

app/styles/modules/_popover.sass

@@ -1,40 +1,71 @@
+$popover-border-color: #c0c0c0
+
 .popover
-  position: absolute !important
-  background: white
-  border: 1px solid #c0c0c0
+  position: absolute
+  bottom: 100%
+  left: 50%
+  transform: translateX(-50%)
+  z-index: 10
+  background-color: #fff
+  border: 1px solid $popover-border-color
   padding: 10px
   border-radius: 5px
   width: 360px
-  z-index: 100
   box-shadow: rgba(black,.3) 0 1px 3px
   text-align: left
+  margin-bottom: 5px;
   &::after
-    content: ""
     position: absolute
-    bottom: -6px
+    bottom: 0
     left: 50%
-    margin-left: -5px
+    margin: 0 0 -5px -5px
+    content: ''
     width: 10px
     height: 10px
-    background: white
-    border-right: 1px solid #c0c0c0
-    border-bottom: 1px solid #c0c0c0
+    background: inherit
     transform: rotate(45deg)
-  .popover-body
-    position: relative
-    padding-left: 60px
-    > p
-      word-break: break-all
-      overflow: hidden
-      font-size: 1.2rem
-      line-height: 1.4em
-      margin-bottom: 1em
-      min-height: 28px
-  .popover-icon
-    position: absolute
+    border: 1px solid transparent
+    border-right-color: $popover-border-color
+    border-bottom-color: $popover-border-color
+
+.popover-body
+  position: relative
+  padding-left: 60px
+  p
+    word-break: break-all
+    overflow: hidden
+    font-size: 12px
+    line-height: 1.4em
+    margin-bottom: 1em
+    min-height: 28px
+
+.popover-icon
+  position: absolute
+  left: 0
+  top: 0
+  font-size: 50px
+
+.popover-buttons
+  text-align: right
+
+
+@media (max-width: 768px)
+  .popover
     left: 0
+    right: 0
     top: 0
-    font-size: 5rem
+    bottom: 0
+    border: none
+    width: auto
+    box-shadow: none
+    border-radius: 0
+    margin: 0
+    transform: none
+    background-color: rgba(#f0f0f0, 0.9)
+    &::after
+      display: none
 
   .popover-buttons
-    text-align: right
+    button
+      font-size: 18px
+

app/templates/components/peer-widget.hbs

@@ -1,53 +1,50 @@
 <!-- Sender related popups -->
 {{#popover-confirm
+  isVisible=hasSelectedFile
   onConfirm=(action "sendFileTransferInquiry")
   onCancel=(action "cancelFileTransfer")
-  isVisible=hasSelectedFile
+  confirmButtonLabel="Send"
+  cancelButtonLabel="Cancel"
   filename=filename
-  label=label
-  confirm-button-label="Send"
-  cancel-button-label="Cancel"
 }}
   Do you want to send <strong>"{{filename}}"</strong> to <strong>"{{label}}"</strong>?
 {{/popover-confirm}}
 
 {{#popover-confirm
-  onCancel=(action "abortFileTransfer")
   isVisible=isAwaitingResponse
+  onCancel=(action "abortFileTransfer")
+  cancelButtonLabel="Cancel"
   filename=filename
-  label=label
-  cancel-button-label="Cancel"
 }}
   Waiting for <strong>"{{label}}"</strong> to accept&hellip;
 {{/popover-confirm}}
 
 {{#popover-confirm
-  onConfirm=(action "cancelFileTransfer")
   isVisible=hasDeclinedFileTransfer
+  onConfirm=(action "cancelFileTransfer")
+  confirmButtonLabel="Ok"
   filename=filename
-  label=label
-  confirm-button-label="Ok"
 }}
   <strong>"{{label}}"</strong> has declined your request.
 {{/popover-confirm}}
 
 {{#popover-confirm
-  onConfirm=(action "cancelFileTransfer")
   isVisible=hasError
-  confirm-button-label="Ok"
+  onConfirm=(action "cancelFileTransfer")
+  confirmButtonLabel="Ok"
+  filename=filename
 }}
   {{partial errorTemplateName}}
 {{/popover-confirm}}
 
 <!-- Recipient related popups -->
 {{#popover-confirm
+  isVisible=hasReceivedFileInfo
   onConfirm=(action "acceptFileTransfer")
   onCancel=(action "rejectFileTransfer")
-  isVisible=hasReceivedFileInfo
+  confirmButtonLabel="Save"
+  cancelButtonLabel="Decline"
   filename=filename
-  label=label
-  confirm-button-label="Save"
-  cancel-button-label="Decline"
 }}
   <strong>"{{label}}"</strong> wants to send you <strong>"{{filename}}"</strong>.
 {{/popover-confirm}}

app/templates/components/popover-confirm.hbs

@@ -1,19 +1,20 @@
-{{#bs-popover visible=isVisible placement="top" renderInPlace=true triggerEvents=""}}
+<div class="popover">
   <div class="popover-body">
     <div class="popover-icon">
       <i class={{iconClass}}></i>
     </div>
 
     <p>{{yield}}</p>
+  </div>
 
-    <div class="popover-buttons">
-      {{#if cancel-button-label}}
-        <button type="button" class="button cancel" {{action "cancel"}}>{{cancel-button-label}}</button>
-      {{/if}}
+  <div class="popover-buttons">
+    {{#if cancelButtonLabel}}
+      <button type="button" {{action "cancel"}}>{{cancelButtonLabel}}</button>
+    {{/if}}
 
-      {{#if confirm-button-label}}
-        <button type="button" class="button confirm" {{action "confirm"}}>{{confirm-button-label}}</button>
-      {{/if}}
-    </div>
+    {{#if confirmButtonLabel}}
+      <button type="button" {{action "confirm"}}>{{confirmButtonLabel}}</button>
+    {{/if}}
   </div>
-{{/bs-popover}}
+</div>
+

ember-cli-build.js

@@ -19,10 +19,6 @@ module.exports = function(defaults) {
       fingerprintAssetMap: true,
     },
 
-    'ember-bootstrap': {
-      importBootstrapCSS: false,
-    },
-
     inlineContent: {
       analytics: {
         file: 'app/analytics.html',

package.json

@@ -25,8 +25,6 @@
   "devDependencies": {
     "@ember/jquery": "^0.5.2",
     "@ember/optional-features": "^0.6.3",
-    "bootstrap": "4.0.0-alpha.6",
-    "bootstrap-sass": "3.3.7",
     "broccoli-asset-rev": "^2.7.0",
     "ember-ajax": "^3.1.0",
     "ember-auto-import": "^1.2.19",
@@ -68,7 +66,6 @@
     "compression": "^1.2.2",
     "cookie-parser": "^1.3.3",
     "cookie-session": "^1.1.0",
-    "ember-bootstrap": "^1.0.0-alpha.8",
     "express": "^4.10.6",
     "firebase-token-generator": "~2.0.0",
     "lodash": "^4.17.11",

vendor/peer.js

@@ -453,21 +453,27 @@ util.inherits(Peer, EventEmitter);
 
 /** Initialize a connection with the server. */
 Peer.prototype._initialize = function (id) {
-  var self = this;
   this.id = id;
 
   // Firebase
   this._ref = this.options.firebaseRef;
+  this._connectionRef = this._ref.child('.info/connected');
   this._messagesRef = this._ref.child('rooms/' + this.options.room + '/messages');
-  this._yourMessagesRef = this._messagesRef.child(id);
+  this._receivedMessagesRef = this._messagesRef.child(id);
 
-  // Remove received messages on disconnect
-  this._yourMessagesRef.onDisconnect().remove();
+  this._connectionRef.on('value', (connectionSnapshot) => {
+    if (connectionSnapshot.val() === true) {
+      // Remove received messages on disconnect
+      this._receivedMessagesRef.onDisconnect().remove();
 
-  // Listen to incoming messages
-  this._yourMessagesRef.on('child_added', function (snapshot) {
-    var message = snapshot.val();
-    self._handleMessage(message);
+      // Listen to incoming messages
+      this._receivedMessagesRef.on('child_added', (snapshot) => {
+        const message = snapshot.val();
+        this._handleMessage(message);
+      });
+    } else {
+      this._receivedMessagesRef.off();
+    }
   });
 
   // The connection to the server is open