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 {