diff --git a/locales/en-US/server.ftl b/locales/en-US/server.ftl index b9d6337e87..4de25c9062 100644 --- a/locales/en-US/server.ftl +++ b/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 diff --git a/server/src/pages/shotindex/controller.js b/server/src/pages/shotindex/controller.js index 253cde0819..67cc4d6ca3 100644 --- a/server/src/pages/shotindex/controller.js +++ b/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; }); } diff --git a/server/src/pages/shotindex/model.js b/server/src/pages/shotindex/model.js index d127fd321d..d42f5eee63 100644 --- a/server/src/pages/shotindex/model.js +++ b/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( diff --git a/server/src/pages/shotindex/view.js b/server/src/pages/shotindex/view.js index da6c3ab573..bd9baccfa0 100644 --- a/server/src/pages/shotindex/view.js +++ b/server/src/pages/shotindex/view.js @@ -317,7 +317,8 @@ class Card extends React.Component { let favoriteIndicator = null; if (!shot.expireTime) { favoriteIndicator = -
+
; } else if (this.props.hasFxa) { favoriteIndicator = @@ -325,6 +326,13 @@ class Card extends React.Component { ; } + let syncedShotIndicator = null; + if (shot.isSynced) { + syncedShotIndicator = +
+
; + } + const deleteConfirmationClass = this.state.deletePanelOpen ? "panel-open" : ""; return ( @@ -364,6 +372,7 @@ class Card extends React.Component { cancelDeleteHandler={this.cancelDeleteHandler.bind(this)} /> {favoriteIndicator} + {syncedShotIndicator} ); } diff --git a/server/src/servershot.js b/server/src/servershot.js index b657aa1507..f0abf7dcb3 100644 --- a/server/src/servershot.js +++ b/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; diff --git a/static/css/shot-index.scss b/static/css/shot-index.scss index b430dbf043..d74076271e 100644 --- a/static/css/shot-index.scss +++ b/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 {