Skip to content

Commit 7730305

Browse files
Willow-SystemsWillow-Systems
authored
Merge pull request #34 from pebble-dev/updates
Add emery support to frontend
2 parents ef83312 + 37e3947 commit 7730305

File tree

5 files changed

+114
-31
lines changed

5 files changed

+114
-31
lines changed

‎html/index.html‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -844,7 +844,7 @@ <h1 id="appinfo-appname"> </h1> <a target="_blank" class="ml-3 small pt-2 nodec"
844844
onclick="changePreviewWatchPlatform('chalk', this, true)" title="Chalk" />
845845
<img src="/res/img/icon_p2.png" class="supports-diorite tinyicon bandw"
846846
onclick="changePreviewWatchPlatform('diorite', this, true)" title="Diorite" />
847-
<!-- <img src="/res/img/icon_time2.png" class="supports-emery tinyicon bandw" onclick="changePreviewWatchPlatform('basalt', this, true)" title="Emery"/> -->
847+
<img src="/res/img/icon_time2.png" class="supports-emery tinyicon bandw" title="Emery"/>
848848
</li>
849849
</ul>
850850
</div>
@@ -985,6 +985,12 @@ <h1 id="appinfo-appname"> </h1> <a target="_blank" class="ml-3 small pt-2 nodec"
985985
role="tab" aria-controls="e-scr-diorite"
986986
aria-selected="false">Diorite</a>
987987
</li>
988+
<li class="nav-item">
989+
<a onclick="getEditScreenshotsForPlatform('emery')" class="nav-link"
990+
id="e-scr-emery-tab" data-toggle="tab" href="#e-scr-emery"
991+
role="tab" aria-controls="e-scr-emery"
992+
aria-selected="false">Emery</a>
993+
</li>
988994
</ul>
989995
<div class="tab-content" id="editScreenshotTabContent">
990996
<!-- rendered by html_populateScreenshotTabList -->
@@ -1022,6 +1028,12 @@ <h1 id="appinfo-appname"> </h1> <a target="_blank" class="ml-3 small pt-2 nodec"
10221028
role="tab" aria-controls="e-banner-diorite"
10231029
aria-selected="false">Diorite</a>
10241030
</li>
1031+
<li class="nav-item">
1032+
<a onclick="getEditBannersForPlatform('emery')" class="nav-link"
1033+
id="e-banner-emery-tab" data-toggle="tab" href="#e-banner-emery"
1034+
role="tab" aria-controls="e-banner-emery"
1035+
aria-selected="false">Emery</a>
1036+
</li>
10251037
</ul>
10261038

10271039
<div class="tab-content" id="editBannersTabContent">
@@ -1271,6 +1283,10 @@ <h1 class="lite"> Submit a new app or face </h1>
12711283
<a class="nav-link" id="scr-diorite-tab" data-toggle="tab" href="#scr-diorite"
12721284
role="tab" aria-controls="scr-diorite" aria-selected="false">Diorite</a>
12731285
</li>
1286+
<li class="nav-item">
1287+
<a class="nav-link" id="scr-emery-tab" data-toggle="tab" href="#scr-emery"
1288+
role="tab" aria-controls="scr-emery" aria-selected="false">Emery</a>
1289+
</li>
12741290
</ul>
12751291
<div class="tab-content" id="submitScreenshotTabContent">
12761292
<!-- rendered by html_populateAddImageTabList -->
@@ -1342,9 +1358,15 @@ <h1 class="lite"> Submit a new app or face </h1>
13421358
<textarea class="niceInput mt-2" id="i-releaseNotes"></textarea>
13431359
</div>
13441360

1361+
<div class="mt-4 ml-2 hidden" id="uses_timeline">
1362+
Special Permissions
1363+
<div class="ml-4 mt-2">
1364+
<input id="i-timeline" type="checkbox" style="line-height: 20px"> <img class="small" src="./res/img/timeline-pin.svg" /> My app uses timeline</input>
1365+
</div>
1366+
</div>
1367+
13451368
<div class="mt-4 ml-2">
13461369
App Binary
1347-
<br>
13481370
<div class="small">Last but not least, your built pbw file.</div>
13491371
<input class="mt-2 green-text" type="file" name="pbw" id="i-pbw"></input>
13501372
</div>
@@ -1420,6 +1442,14 @@ <h1 class="lite"> New release for <span class="data-release-app">your app</span>
14201442
<input class="mt-2 green-text" type="file" name="pbw" id="release-pbw"></input>
14211443
</div>
14221444

1445+
<div class="mt-4 ml-2 hidden">
1446+
Super Secret Settings
1447+
<div class="ml-4 mt-2" id="wizard-silent-release">
1448+
<input id="i-timeline" type="checkbox" style="line-height: 20px"> <img class="small" src="./res/img/mouse.svg" /> Do not announce release</input>
1449+
</div>
1450+
</div>
1451+
1452+
14231453
<div class="mt-5 ml-2 small">
14241454
Does that look right? If so..
14251455
</div>

‎html/res/css/devPortal.css‎

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,15 @@ body {
5151
header {
5252
margin-bottom: 20px;
5353
}
54+
header .watch {
55+
height: 37px;
56+
}
5457
.navbar-brand {
55-
font-size: 35px;
58+
font-size: 25px;
5659
font-weight: 300;
5760
color: var(--color-foreground-dark) !important;
61+
padding-top: 0px;
62+
padding-bottom: 0px;
5863
}
5964
.container {
6065
width: 80%;
@@ -174,9 +179,10 @@ footer {
174179
color: var(--color-rebble-orange) !important;
175180
}
176181

177-
.nav-link {
182+
.nav-link, .nav-link:hover {
178183
font-weight: 300;
179184
font-size: 1rem;
185+
color: black;
180186
}
181187

182188
.appSmall {
@@ -313,6 +319,18 @@ input[type="checkbox"] {
313319
width: 144px;
314320
height: 220px;
315321
}
322+
.img-card.chalk {
323+
max-width: 180px;
324+
max-height: 232px;
325+
width: 180px;
326+
height: 232px;
327+
}
328+
.img-card.emery {
329+
max-width: 200px;
330+
max-height: 280px;
331+
width: 200px;
332+
height: 280px;
333+
}
316334
.card-body {
317335
display: inline-block;
318336
text-align: center;
@@ -328,16 +346,28 @@ input[type="checkbox"] {
328346
object-fit: fill;
329347
max-width: 100%;
330348
}
349+
.card-img-top.chalk {
350+
width: 180px;
351+
height: 180px;
352+
margin-top: 0px;
353+
margin-left: 0px;
354+
border-radius: 180px;
355+
object-fit: cover;
356+
}
357+
.card-img-top.emery {
358+
width: 200px;
359+
height: 228px;
360+
}
331361
.card-img-icon {
332362
width: 100px;
333363
height: 100px;
334364
object-fit: fill;
335365
max-width: 100%;
336366
}
337-
.roundScr {
367+
/* .roundScr {
338368
width: 180px !important;
339369
height: auto !important;
340-
}
370+
} */
341371
.banner {
342372
width: 720px;
343373
height: 320px;
@@ -428,6 +458,10 @@ input[type="checkbox"] {
428458
margin-left: auto;
429459
margin-right: auto;
430460
}
461+
img.small {
462+
height: 25px;
463+
width: auto;
464+
}
431465
.funtext {
432466
width: 100%;
433467
text-align: center;

‎html/res/img/screenshotEmery.png‎

2.81 KB
Loading

‎html/res/js/devPortal.js‎

Lines changed: 40 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ notifications = {
66
funMessageIntervalTimer = null;
77
isWizard = false
88

9+
const PLATFORMS = ["aplite","basalt","chalk","diorite", "emery"]
10+
const GREYSCALE_PLATFORMS = ["aplite", "diorite"]
11+
12+
913
// Worker functions
1014

1115
function displayLoginPage() {
@@ -191,7 +195,7 @@ function getEditScreenshotsForPlatform_cb(data, platform) {
191195
});
192196

193197
for (var i = numScreenshots; i < 5; i++) {
194-
var srclink = (platform == "chalk") ? "/res/img/screenshotRound.png" : "/res/img/screenshotSquare.png"
198+
var srclink = getScreenshotPlaceholderImagePath(platform)
195199
$(`#e-screenshot-${shortPlatform}-${i+1}-i`).attr("src", srclink);
196200
$(`#e-screenshot-${shortPlatform}-${i+1}-btn-add`).removeClass("hidden");
197201
$(`#e-screenshot-${shortPlatform}-${i+1}-btn-delete`).addClass("hidden");
@@ -270,22 +274,22 @@ function deleteScreenshot_ecb(data) {
270274
}
271275
function html_populateScreenshotTabList() {
272276
//Create the HTML for the edit dialogue screenshot list
273-
var platforms = ["aplite","basalt","chalk","diorite"]
274277
var maxScreenshots = 5
275278
var output = ""
276279
var exClass = "show active"
277280

278-
platforms.forEach(p => {
279-
pshort = p.substr(0,1)
281+
PLATFORMS.forEach(p => {
282+
pshort = p.substring(0,1)
280283
output += `<div class="tab-pane fade ${exClass}" id="e-scr-${p}" role="tabpanel" aria-labelledby="e-scr-${p}-tab">`
281284
output += `<div class="row">`
282285

283-
var placeholder = (p == "chalk") ? "/res/img/screenshotRound.png" : "/res/img/screenshotSquare.png"
286+
placeholder = getScreenshotPlaceholderImagePath(p)
287+
284288
var exImgClass = (p == "chalk") ? "roundScr" : ""
285289

286290
for (var i = 1; i <= maxScreenshots; i++) {
287-
output += `<div class="card img-card noshadow border-lite ml-3 mt-3">
288-
<img id="e-screenshot-${pshort}-${i}-i" class="card-img-top ${exImgClass}" src="${placeholder}" />
291+
output += `<div class="card img-card ${p} noshadow border-lite ml-3 mt-3">
292+
<img id="e-screenshot-${pshort}-${i}-i" class="card-img-top ${exImgClass} ${p}" src="${placeholder}" />
289293
<div class="card-body wide hidden" id="e-screenshot-${pshort}-${i}-btn-delete">
290294
<button class="btn btn-danger" id="e-screenshot-${pshort}-${i}-btn-delete-btn" onclick="deleteScreenshotFromButton(this.getAttribute('data-uuid'), '${p}')">Delete</button>
291295
</div>
@@ -401,12 +405,11 @@ function deleteBanner_ecb(data) {
401405
}
402406
function html_populateBannerTabList() {
403407
//Create the HTML for the edit dialogue banner list
404-
var platforms = ["aplite","basalt","chalk","diorite"]
405408
var maxBanners = 3
406409
var output = ""
407410
var exClass = "show active"
408411

409-
platforms.forEach(p => {
412+
PLATFORMS.forEach(p => {
410413
pshort = p.substr(0,1)
411414
output += `<div class="tab-pane fade ${exClass}" id="e-banner-${p}" role="tabpanel" aria-labelledby="e-banner-${p}-tab">`
412415
output += `<div class="row">`
@@ -635,31 +638,30 @@ function submitAddImage(imagePrefix, imageFile) {
635638
$(`#${imagePrefix}-removebtn`).removeClass("hidden");
636639
}
637640
function submitRemoveImage(imagePrefix) {
638-
var srclink = (imagePrefix.split("-")[2] == "c") ? "/res/img/screenshotRound.png" : "/res/img/screenshotSquare.png";
641+
var srclink = getScreenshotPlaceholderImagePath(imagePrefix.split("-")[2])
639642
$(`#${imagePrefix}-f`).val("");
640643
$(`#${imagePrefix}-i`).attr("src",srclink);
641644
$(`#${imagePrefix}-addbtn`).removeClass("hidden");
642645
$(`#${imagePrefix}-removebtn`).addClass("hidden");
643646
}
644647
function html_populateAddImageTabList() {
645648
//Create the HTML for the add images screenshot list
646-
var platforms = ["aplite","basalt","chalk","diorite"]
647649
var maxScreenshots = 5
648650
var output = ""
649651
var exClass = "show active"
650652

651-
platforms.forEach(p => {
653+
PLATFORMS.forEach(p => {
652654
pshort = p.substr(0,1)
653655
output += `<div class="tab-pane fade ${exClass}" id="scr-${p}" role="tabpanel" aria-labelledby="scr-${p}-tab">`
654656
output += `<div class="row">`
655657

656-
var placeholder = (p == "chalk") ? "/res/img/screenshotRound.png" : "/res/img/screenshotSquare.png"
658+
var placeholder = getScreenshotPlaceholderImagePath(p)
657659
var exImgClass = (p == "chalk") ? "roundScr" : ""
658660

659661
for (var i = 1; i <= maxScreenshots; i++) {
660-
output += `<div class="card img-card noshadow border-lite ml-3 mt-3">
662+
output += `<div class="card img-card ${p} noshadow border-lite ml-3 mt-3">
661663
<label for="i-screenshot-${pshort}-${i}-f">
662-
<img id = "i-screenshot-${pshort}-${i}-i" class="card-img-top ${exImgClass}" src="${placeholder}" />
664+
<img id = "i-screenshot-${pshort}-${i}-i" class="card-img-top ${exImgClass} ${p}" src="${placeholder}" />
663665
<div class="card-body wide">
664666
<a class="btn btn-primary" id="i-screenshot-${pshort}-${i}-addbtn">Add</a>
665667
<button class="btn btn-primary hidden" id="i-screenshot-${pshort}-${i}-removebtn" onclick="submitRemoveImage('i-screenshot-${pshort}-${i}')">Remove</button>
@@ -1116,7 +1118,7 @@ function changePreviewWatchPlatform(platform, sender, forceFetch = false) {
11161118
$('#previewImageContainer').removeClass("chalk");
11171119
if (platform == "chalk") {
11181120
$('#previewImageContainer').addClass("chalk");
1119-
} else if (["aplite","diorite"].includes(platform)) {
1121+
} else if (GREYSCALE_PLATFORMS.includes(platform)) {
11201122
$('#previewImageContainer').addClass("bandw");
11211123
}
11221124
}
@@ -1137,7 +1139,7 @@ function updateFunMessage() {
11371139
"Extracting",
11381140
"Unzipping",
11391141
"Point it. Zoom it. Snap it. Press it",
1140-
"Just checking twitter real quick",
1142+
"Just checking bluesky real quick",
11411143
"Working",
11421144
"Still working",
11431145
"Thinking",
@@ -1309,13 +1311,14 @@ function getAppDetails_cb(data) {
13091311

13101312
//Icons
13111313
$('.tinyicon').addClass("bandw");
1312-
// $('.supports-emery').addClass("hidden");
13131314
var favouriteSupportedPlatform = "basalt"
1315+
if (data.compatibility.emery.supported) { $('.supports-emery').removeClass("bandw"); favouriteSupportedPlatform = "emery" }
13141316
if (data.compatibility.aplite.supported) { $('.supports-aplite').removeClass("bandw"); favouriteSupportedPlatform = "aplite" }
13151317
if (data.compatibility.chalk.supported) { $('.supports-chalk').removeClass("bandw"); favouriteSupportedPlatform = "chalk" }
13161318
if (data.compatibility.diorite.supported) { $('.supports-diorite').removeClass("bandw"); favouriteSupportedPlatform = "diorite" }
13171319
if (data.compatibility.basalt.supported) { $('.supports-basalt').removeClass("bandw"); favouriteSupportedPlatform = "basalt" }
13181320

1321+
13191322
changePreviewWatchPlatform(favouriteSupportedPlatform)
13201323

13211324
// if (data.compatibility.emery.supported) { $('.supports-emery').removeClass("bandw"); $('.supports-emery').removeClass("hidden"); }
@@ -1368,7 +1371,7 @@ function genericAPIErrorHandler(data, statusCode, cbo) {
13681371

13691372
if (statusCode == 0) {
13701373
//Network error
1371-
showAlert("Connection Error", "Failed to talk to Rebble. Please check your internet connection. If the problem persists check <a target='_blank' href='https://twitter.com/pebble_dev'>Twitter</a> or <a target='_blank' href='https://rebble.io/discord'>Discord</a>.")
1374+
showAlert("Connection Error", "Failed to talk to Rebble. Please check your internet connection. If the problem persists check <a target='_blank' href='https://bsky.app/profile/rebble.io'>Bluesky</a> or <a target='_blank' href='https://rebble.io/discord'>Discord</a>.")
13721375
}
13731376

13741377
if (statusCode == 500) {
@@ -1474,7 +1477,7 @@ function submitNewApp() {
14741477
//if ($('#usePlatformSpecificScreenshots').prop("checked")) {
14751478

14761479
//The weird order here is order of preference for largeIcon platform. Basalt looks best
1477-
["basalt","aplite", "diorite", "chalk"].forEach(platform => {
1480+
["basalt","aplite", "diorite", "chalk", "emery"].forEach(platform => {
14781481
var short = platform.substr(0,1);
14791482
for (var i = 1; i < 6; i ++) {
14801483
if ($(`#i-screenshot-${short}-${i}-f`).prop("files")[0] != undefined) {
@@ -1489,6 +1492,7 @@ function submitNewApp() {
14891492
console.log("Is an app, yo")
14901493
formData.append("large_icon", $('#i-icon-large-f').prop("files")[0])
14911494
formData.append("small_icon", $('#i-icon-small-f').prop("files")[0])
1495+
formData.append("timeline_enabled", $('#i-timeline').prop("checked"))
14921496
} else {
14931497
// Use a screenshot as largeIcon
14941498
formData.append("large_icon", largeIcon)
@@ -1502,6 +1506,7 @@ function submitNewApp() {
15021506
formData.append("source", $('#i-source').val());
15031507
}
15041508

1509+
15051510
//Attach pbw
15061511
formData.append("pbw",$('#i-pbw').prop('files')[0]);
15071512

@@ -1801,6 +1806,18 @@ function friendlyTimeAgo(lc) {
18011806
return out + " " + units + " ago";
18021807
}
18031808

1809+
function getScreenshotPlaceholderImagePath(platform) {
1810+
// Accepts aplite, basalt etc as well as a, b etc
1811+
platform = platform.substring(0,1).toLowerCase()
1812+
const default_path = "/res/img/screenshotSquare.png"
1813+
const non_defaults = {
1814+
"c": "/res/img/screenshotRound.png",
1815+
"e": "/res/img/screenshotEmery.png"
1816+
}
1817+
let placeholder = (non_defaults.hasOwnProperty(platform)) ? non_defaults[platform] : default_path
1818+
return placeholder
1819+
}
1820+
18041821
function initDevPortal() {
18051822
//Check if we need to log in
18061823
checkAuthState();
@@ -1819,10 +1836,12 @@ function initDevPortal() {
18191836
$('.rbtype').on('click', function(e) {
18201837
if ($('#i-iswatchface').prop("checked")) {
18211838
$('#appCategory').addClass("hidden");
1839+
$('#uses_timeline').addClass("hidden")
18221840
$('#appIconContainer').addClass("hidden");
18231841
$('.newappOrFace').text("Watchface");
18241842
} else {
18251843
$('#appCategory').removeClass("hidden");
1844+
$('#uses_timeline').removeClass("hidden")
18261845
$('#appIconContainer').removeClass("hidden");
18271846
$('.newappOrFace').text("App")
18281847
}
@@ -1862,4 +1881,4 @@ function initDevPortal() {
18621881
}
18631882

18641883

1865-
initDevPortal();
1884+
initDevPortal();

‎html/res/js/release.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": 1.1,
3-
"logTitle": "Dev Portal Update",
4-
"logMessage": "<h2> Banner Support! </h2><p>The developer portal now gives you the ability to edit banners for your watchface or app. You can now have up to three banners per platform!</p><img style='max-width:90%;max-height:600px;' src='https://media.discordapp.net/attachments/264746316477759489/1055262821262299147/banners.gif?width=1107&height=897'></img><br><br><p>Find it under 'edit appstore listing'. Changes are reflected immediately, like screenshots.</p>"
5-
}
2+
"version": 1.2,
3+
"logTitle": " Emery Support Added",
4+
"logMessage": "<p>The developer portal has been updated to add support for the Emery platform! You can now provide platform specific screenshots and banners for Emery if your app or watchface supports it.🎉 </p>"
5+
}

0 commit comments

Comments
 (0)