Skip to content

Commit

Permalink
Merge pull request #11 from capdavid/feat/item-order
Browse files Browse the repository at this point in the history 
Allow reordering of items, update welcome pages
  • Loading branch information
@capdavid
capdavid authored Oct 20, 2024
2 parents 5e09bcb + 000aa7e commit 7983e19
Show file tree
Hide file tree
Showing 14 changed files with 5,991 additions and 6,590 deletions.
12,132 changes: 5,634 additions & 6,498 deletions package-lock.json
View file

Large diffs are not rendered by default.

13 changes: 8 additions & 5 deletions public/background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,23 +54,26 @@ const errNotification = index => {
const createBadge = (text, index) => {
const badgeColor = index => {
switch (index) {
case 0:
return '#0090f0';

case 1:
return '#29a470';
return '#2ab580';

case 2:
return '#cc338c';
return '#e6399e';

case 3:
return '#de9900';
return '#ff9500';

case 4:
return '#000';
return '#bf00ff';

case 'err':
return '#f00';

default:
return '#1f7fe0';
return 'transparent';
}
};
chrome.action.setBadgeBackgroundColor({ color: badgeColor(index) });
Expand Down
Binary file added public/images/reorder-mode.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
83 changes: 71 additions & 12 deletions public/update.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,76 @@
/>
<link rel="stylesheet" href="welcome.css" />
</head>
<body>
<body class="container">
<section id="welcome">
<h1>
<strong>Tally counter</strong>
<img src="images/icon48.png" id="icon" /> has been updated!
</h1>
<p>
<strong>Hello beautiful souls! </strong><br />To ensure Tally counter stays in the Chrome Web Store,
it's now fully compliant with the new Google guidelines 🎉. This means you can continue to use Tally
counter without any interruptions or concerns about its availability.
</p>
<br />
<span class="lead">new features:</span>
</section>
<h2>Reorder your items</h2>
<p>
You can now reorder your items easily! Click the reorder icon in the top-left corner to enter reorder mode.
</p>
<div class="py"><img src="images/reorder-mode.gif" alt="Reorder mode demonstration" /></div>
<p>
In reorder mode, simply drag and drop items to rearrange them. Click "Save order" when you're done. If you
click away or close the extension without saving, nothing is changed.
</p>

<h3>Hotkeys and badge colors</h3>
<p>
<span class="danger bold">IMPORTANT!</span>
Remember, hotkeys are linked to item positions, not the items themselves. This can lead to unintended
behavior - for example if you moved the third item to the first place and still pressing the third hotkey,
you would be updating a different item. To illustrate what item is linked to which hotkey/badge, the drag
icons are matching the <a href="#badges">badge</a> colors: <br />
</p>
<div id="reorder-circles">
<div class="reorder-item">
<i class="fas fa-arrows-alt" style="color: #0090f0"></i>
First item
</div>
<div class="reorder-item">
<i class="fas fa-arrows-alt" style="color: #2ab580"></i>
Second item
</div>
<div class="reorder-item">
<i class="fas fa-arrows-alt" style="color: #e6399e"></i>
Third item
</div>
<div class="reorder-item">
<i class="fas fa-arrows-alt" style="color: #ff9500"></i>
Fourth item
</div>
<div class="reorder-item">
<i class="fas fa-arrows-alt" style="color: #bf00ff"></i>
Fifth item (changed from black to purple)
</div>
</div>

<h3>Customize your hotkeys</h3>
<p>
If you prefer to keep using the same keys for specific items after reordering, you need to customize your
hotkeys!
</p>
To adjust hotkeys, go to
<a href="chrome://extensions/shortcuts">chrome://extensions/shortcuts</a>
(you need to copy it into the address bar, clicking won't work). <br /><br />
<p class="italic">
To accomodate reorder mode, the mute notification icon has been moved to the right next to toggle theme
button. Also the fifth badge color has been changed from black to purple.
</p>
<br />
<span class="lead">older features:</span>

<h2>Introducing dark mode</h2>
You can embrace the
<span style="font-weight: bold"> darkness </span>
Expand All @@ -34,33 +96,30 @@ <h2>Mute notifications</h2>
with the <span style="font-weight: bold"> toggle in the top-left corner! </span> <br /><br />
<p>If you don't know what hotkeys are, scroll down.</p>

<h2>Color icon badges</h2>
<h2 id="badges">Color icon badges</h2>
Since you can mute notifications now, it would be nice if you had some visual feedback when pressing the hotkey.
Introducing badges, handy little things that appear under the extension icon when you press the hotkey!
<div class="py"><img src="images/badge.gif" /></div>
Badges have different backgrounds based on the order of the item you pressed the hotkey for:
<div id="circles">
<div class="circle" style="background: #1f7fe0"></div>
<div class="circle" style="background: #0090f0"></div>
First item
<div class="circle" style="background: #29a470"></div>
<div class="circle" style="background: #2ab580"></div>
Second item
<div class="circle" style="background: #cc338c"></div>
<div class="circle" style="background: #e6399e"></div>
Third item
<div class="circle" style="background: #de9900"></div>
<div class="circle" style="background: #ff9500"></div>
Fourth item
<div class="circle" style="background: #000"></div>
<div class="circle" style="background: #bf00ff"></div>
Fifth item
</div>

<br /><br />
<span class="lead">older features:</span>
<section id="hotkeys">
<h2>Keyboard shortcuts / Hotkeys</h2>

<h3>Default:</h3>
<!-- <img class="option-key" src="images/option-key.png"> -->
<div class="hotkey">
Shortct/hotkey
Shortcut/hotkey
<span id="windows">Windows</span>
<span id="macOS">macOS</span>
</div>
Expand All @@ -83,7 +142,7 @@ <h3>Default:</h3>
<p>
The hotkeys work even when the extension is closed. By default you will get a notification and see a
number in the extension icon (see badges above). You can disable the notifications by clicking the
slashed bell in the top-left corner.
slashed bell in the top-right corner.
</p>
<br />

Expand Down
35 changes: 28 additions & 7 deletions public/welcome.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,32 +13,38 @@
body {
background: var(--light-color);
margin: 0 auto;
text-align: center;
text-align: left;
padding: 2rem;
font-size: 1rem;
line-height: 1.6rem;
font-family: 'Open Sans', Arial, sans-serif;
/* font-family: Arial, Helvetica, sans-serif; */
color: #333;
font-weight: 400;
max-width: 1024px;
}

h1,
h3,
h4 {
padding: 1rem;
padding: 1rem 0;
}

h1 {
font-size: 2rem;
font-weight: normal;
margin-bottom: 1rem;
text-align: center;
}

h2 {
color: rgb(49, 34, 255);
padding: 1.5rem 0;
margin-top: 1.5rem;
padding: 1rem 0;
margin-top: 1rem;
}

h2::before {
content: '💎 ';
}

a,
Expand All @@ -54,6 +60,9 @@ a:hover {
.lead {
font-size: 2rem;
font-weight: 200;
text-align: center;
margin-top: 1rem;
display: block;
}

.py {
Expand All @@ -74,6 +83,10 @@ a:hover {
margin: 0 0.3rem 0 1rem;
}

.circle:first-of-type {
margin-left: 0;
}

.hotkey {
text-align: center;
width: 500px;
Expand All @@ -82,7 +95,7 @@ a:hover {
align-content: center;
align-items: center;
justify-content: space-between;
margin: 1rem auto;
margin: 1rem 0;
}

.hotkey #macOS {
Expand Down Expand Up @@ -122,6 +135,14 @@ a:hover {
color: red;
}

.bold {
font-weight: bold;
}

.italic {
font-style: italic;
}

#welcome h1 strong {
margin-left: 0.5rem;
}
Expand All @@ -148,8 +169,8 @@ a:hover {
}

#circles {
margin: 1rem;
margin: 1rem 1rem 1rem 0;
display: flex;
align-items: center;
justify-content: center;
justify-content: start;
}
58 changes: 52 additions & 6 deletions public/welcome.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,26 +70,72 @@ <h2>Introducing dark mode</h2>
<h2>Mute notifications</h2>
Are you using the hotkeys (more information above) and you hate the notifications poping when the extension is
closed? Mute notifications with the
<span style="font-weight: bold"> toggle in the top-left corner! </span> Click the slashed bell icon and live
<span style="font-weight: bold"> toggle in the top-right corner! </span> Click the slashed bell icon and live
peacefully again.
<h2>Color icon badges</h2>
Since you can mute notifications now, it would be nice if you had some visual feedback when pressing the hotkey.
Introducing badges, handy little things that appear under the extension icon when you press the hotkey!
<div class="py"><img src="images/badge.gif" /></div>
Badges have different backgrounds based on the order of the item you pressed the hotkey for:
<div id="circles">
<div class="circle" style="background: #1f7fe0"></div>
<div class="circle" style="background: #0090f0"></div>
First item
<div class="circle" style="background: #29a470"></div>
<div class="circle" style="background: #2ab580"></div>
Second item
<div class="circle" style="background: #cc338c"></div>
<div class="circle" style="background: #e6399e"></div>
Third item
<div class="circle" style="background: #de9900"></div>
<div class="circle" style="background: #ff9500"></div>
Fourth item
<div class="circle" style="background: #000"></div>
<div class="circle" style="background: #bf00ff"></div>
Fifth item
</div>

<h2>Reorder your items</h2>
<p>
You can now reorder your items easily! Click the reorder icon in the top-left corner to enter reorder mode.
</p>
<div class="py"><img src="images/reorder-mode.gif" alt="Reorder mode demonstration" /></div>
<p>
In reorder mode, simply drag and drop items to rearrange them. Click "Save order" when you're done. If you
click away or close the extension without saving, nothing is changed.
</p>

<h3>Hotkeys and badge colors</h3>
<p>
<span class="danger bold">IMPORTANT!</span>
Remember, hotkeys are linked to item positions, not the items themselves. This can lead to unintended
behavior - for example if you moved the third item to the first place and still pressing the third hotkey,
you would be updating a different item. To illustrate what item is linked to which hotkey/badge, the drag
icons are matching the <a href="#badges">badge</a> colors: <br />
</p>
<div id="reorder-circles">
<div class="reorder-item">
<i class="fas fa-arrows-alt" style="color: #0090f0"></i>
First item
</div>
<div class="reorder-item">
<i class="fas fa-arrows-alt" style="color: #2ab580"></i>
Second item
</div>
<div class="reorder-item">
<i class="fas fa-arrows-alt" style="color: #e6399e"></i>
Third item
</div>
<div class="reorder-item">
<i class="fas fa-arrows-alt" style="color: #ff9500"></i>
Fourth item
</div>
<div class="reorder-item">
<i class="fas fa-arrows-alt" style="color: #bf00ff"></i>
Fifth item
</div>
</div>
<br />
<p class="danger">
If you prefer to keep using the same keys for specific items after reordering, you need to customize your
hotkeys!
</p>

<section>
<h2>Export</h2>
You can export your data to .csv via the export button:
Expand Down
Loading

0 comments on commit 7983e19

Please sign in to comment.