Add synced shot indicator. (#4847) (#4947)

locales/en-US/server.ftl

@@ -316,7 +316,8 @@ shotIndexNonFavoriteIcon =
 # a favorite by the owner.
 shotIndexFavoriteIcon =
     .title = This is a favorite shot and it does not expire
-
+shotIndexSyncedShot =
+    .title = Shot taken on another device
 
 ## Delete Confirmation Dialog
 

server/src/pages/shotindex/controller.js

@@ -20,6 +20,7 @@ exports.launch = function(m) {
       m.shots = m.shots.map((shot) => {
         const s = new AbstractShot(m.backend, shot.id, shot.json);
         s.expireTime = shot.expireTime;
+        s.isSynced = shot.isSynced;
         return s;
       });
     }

server/src/pages/shotindex/model.js

@@ -34,6 +34,7 @@ exports.createModel = function(req) {
         id: shot.id,
         json: shot.asRecallJson(),
         expireTime: shot.expireTime,
+        isSynced: shot.isSynced,
       }));
   }
   const jsonModel = Object.assign(

server/src/pages/shotindex/view.js

@@ -317,14 +317,22 @@ class Card extends React.Component {
     let favoriteIndicator = null;
     if (!shot.expireTime) {
       favoriteIndicator = <Localized id="shotIndexFavoriteIcon">
-          <div className={classnames("fav-shot", {"inactive": !this.props.hasFxa})} title=""></div>
+          <div className={classnames("indicator fav-shot", {"inactive": !this.props.hasFxa})}
+            title=""></div>
         </Localized>;
     } else if (this.props.hasFxa) {
       favoriteIndicator = <Localized id="shotIndexNonFavoriteIcon">
           <div className="non-fav-shot" title=""></div>
         </Localized>;
     }
 
+    let syncedShotIndicator = null;
+    if (shot.isSynced) {
+      syncedShotIndicator = <Localized id="shotIndexSyncedShot">
+        <div className="indicator synced-shot" title=""></div>
+      </Localized>;
+    }
+
     const deleteConfirmationClass = this.state.deletePanelOpen ? "panel-open" : "";
 
     return (
@@ -364,6 +372,7 @@ class Card extends React.Component {
             cancelDeleteHandler={this.cancelDeleteHandler.bind(this)} />
         </div>
         {favoriteIndicator}
+        {syncedShotIndicator}
       </div>
     );
   }

server/src/servershot.js

@@ -601,6 +601,7 @@ Shot.getShotsForDevice = function(backend, deviceId, accountId, searchQuery, pag
         try {
           shot = new Shot(row.deviceid, backend, row.id, json);
           shot.expireTime = row.expire_time;
+          shot.isSynced = row.deviceid !== deviceId;
         } catch (e) {
           mozlog.warn("error-instantiating-shot", {err: e});
           continue;

static/css/shot-index.scss

@@ -166,6 +166,7 @@ $shot-width: 210px;
     color: $dark-default;
     white-space: nowrap;
     text-overflow: ellipsis;
+    width: 172px;
   }
 
   .link-container {
@@ -186,17 +187,20 @@ $shot-width: 210px;
     margin: 12px;
   }
 
-  .fav-shot,
-  .non-fav-shot {
+  .indicator {
     position: absolute;
-    right: 12px;
-    top: 8px;
-    background-color: #fff;
-    border-radius: 20px;
     width: 40px;
     height: 40px;
+    border-radius: 20px;
+    background-color: $white;
     background-position: center;
     background-repeat: no-repeat;
+  }
+
+  .fav-shot,
+  .non-fav-shot {
+    right: 12px;
+    top: 8px;
     background-size: 23px 20px;
   }
 
@@ -211,6 +215,13 @@ $shot-width: 210px;
     display: none;
     background-image: url("../img/icon-heart-outline.svg");
   }
+
+  .synced-shot {
+    background-image: url("../img/icon-sync.svg");
+    right: 12px;
+    top: 260px;
+    opacity: 0.4;
+  }
 }
 
 .preferences {