Skip to content

Commit

Permalink
modal added to tell what's new in an update
Browse files Browse the repository at this point in the history
  • Loading branch information
@pramjeet
pramjeet committed Mar 26, 2017
1 parent e34035b commit f78d150
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 51 deletions.
59 changes: 56 additions & 3 deletions app.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
html, body {
html,
body {
margin: 0;
font-family: 'Rubik', sans-serif;
overflow: hidden;
Expand Down Expand Up @@ -253,7 +254,7 @@ html, body {

.tab.active {
/*border-color: #2e7fb9;*/
background: rgba(46, 127, 185, 0.04);
background: rgba(46, 127, 185, 0.04);
/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
color: #2e7fb9;
}
Expand All @@ -278,7 +279,6 @@ html, body {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}

.highlight {
Expand Down Expand Up @@ -307,4 +307,57 @@ html, body {

.tab.active .close-icon {
display: block;
}

#announcement-container {
position: absolute;
width: 100%;
bottom: 0;
padding: 0;
background: #d3eae0;
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2);
transform: translateY(100%);
transition: 0.3s;
}

#announcement_header {
height: 40px;
border-bottom: 1px solid #cacaca;
width: 100%;
display: flex;
align-items: center;
}

#announcement-title {
margin: 0;
flex: 1;
padding: 10px 10px 10px 15px;
}

#announcement-close-icon {
width: 15px;
background: #e05454;
border-radius: 50%;
margin-right: 10px;
padding: 2px;
cursor: pointer;
}

#announcement-body {
padding: 10px;
}

#announcement-list {
margin: 0;
padding-left: 20px;
}

#announcement-list li {
font-size: 13px;
margin-bottom: 6px;
color: #00733d;
}

#announcement-container.visible {
transform: translateY(0)
}
103 changes: 56 additions & 47 deletions app.html
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,80 @@
<!doctype html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
<title>Peek a tab</title>
<link href="fonts/stylesheet.css" rel="stylesheet" type="text/css">
<link href="app.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="app"
@keyup.esc="closeWindow"
@keydown.down="makeNextTabActive"
@keydown.up="makePreviousTabActive"
@keyup.enter="shiftAndCloseTabId(activeTabId)">
<div id="app">

<div id="options-header">
<div id="search-div">
<img id="search-icon" src="./images/search.png"/>
<input placeholder="search title and url"
id="search-input" type="text"
v-model="searchText"/>
</div>
<div id="options-header">
<div id="search-div">
<img id="search-icon" src="./images/search.png" />
<input placeholder="search title and url" id="search-input" type="text" v-model="searchText" />
</div>

<div id="options">
<div class="option">
<div class="option-inner">
<img class="option-icon" id="mouse-behavior-image" src="./images/cursor-pointer-hover.png"/>
</div>
<div id="options">
<div class="option">
<div class="option-inner">
<img class="option-icon" id="mouse-behavior-image" src="./images/cursor-pointer-hover.png" />
</div>

<div class="option-body" id="mouse-behavior-options-container">
<div class="option-body" id="mouse-behavior-options-container">

<div class="option-choice mouse-behavior-option" data-mouse-behavior="hover">
<img class="option-choice-image" src="./images/cursor-pointer-hover.png"/>
<p class="option-choice-text">Change Tab on hover, single click to shift to the tab and close tabs
list.</p>
</div>
<div class="option-choice mouse-behavior-option" data-mouse-behavior="hover">
<img class="option-choice-image" src="./images/cursor-pointer-hover.png" />
<p class="option-choice-text">Change Tab on hover, single click to shift to the tab and close tabs list.
</p>
</div>

<div class="option-choice mouse-behavior-option" data-mouse-behavior="single-click">
<img class="option-choice-image" src="./images/cursor-pointer-single-click.png"/>
<p class="option-choice-text">Shift to the tab and close tabs list with a single click.</p>
</div>
<div class="option-choice mouse-behavior-option" data-mouse-behavior="single-click">
<img class="option-choice-image" src="./images/cursor-pointer-single-click.png" />
<p class="option-choice-text">Shift to the tab and close tabs list with a single click.</p>
</div>

<div class="option-choice mouse-behavior-option" data-mouse-behavior="click">
<img class="option-choice-image" src="./images/cursor-pointer-click.png" />
<p class="option-choice-text">Change Tab on click, double click to shift to the tab and close tabs list.</p>
</div>

<div class="option-choice mouse-behavior-option" data-mouse-behavior="click">
<img class="option-choice-image" src="./images/cursor-pointer-click.png"/>
<p class="option-choice-text">Change Tab on click, double click to shift to the tab and close
tabs list.</p>
</div>

<!--<div class="option-hint">-->
<!--<p class="option-hint-text">-->
<!--<span>-->
<!--Change mouse behavior-->
<!--</span>-->
<!--</p>-->

<!--<button class="option-hint-button">-->
<!--ok-->
<!--</button>-->
<!--</div>-->
</div>
</div>
</div>

<!--<div class="option-hint">-->
<!--<p class="option-hint-text">-->
<!--<span>-->
<!--Change mouse behavior-->
<!--</span>-->
<!--</p>-->
<ul id="tabs-list">
</ul>

<!--<button class="option-hint-button">-->
<!--ok-->
<!--</button>-->
<!--</div>-->
<div id="announcement-container">
<div id="announcement_header">
<h3 id="announcement-title">What's New</h3>
<img id="announcement-close-icon" src="images/close_icon.png" />
</div>
<div id="announcement-body">
<ul id="announcement-list">
<li>Close tab with 'delete' and 'backspace' keys</li>
<li>Better keyboard navigation</li>
<li>This awesome area to tell about what's new in an update ;)</li>
</ul>
</div>
</div>
</div>

<ul id="tabs-list">

</ul>
</div>
<script src="app.js"></script>
<script src="app.js"></script>
</body>

</html>
30 changes: 30 additions & 0 deletions app.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
/**
* Created by pramj on 1/9/2017.
*/

const THIS_VERSION = '1.5.4'

document.addEventListener('DOMContentLoaded', function () {

var activeWindowId = window.initialWindowId
Expand Down Expand Up @@ -368,4 +371,31 @@ document.addEventListener('DOMContentLoaded', function () {


populateTabs()

// anoouncements related stuff
let announcementEl = document.getElementById('announcement-container')
let announcementCloseIconEl = document.getElementById('announcement-close-icon')
function showAnnouncement() {
announcementEl.classList.add('visible')
}

function hideAnnouncement() {
announcementEl.classList.remove('visible')
}

chrome.storage.sync.get(null, function (items) {
if (items.announcementShowedForVersion != THIS_VERSION) {
setTimeout(function () {
showAnnouncement()
}, 300)

announcementCloseIconEl.addEventListener('click', function () {
hideAnnouncement()

chrome.storage.sync.set({
announcementShowedForVersion: THIS_VERSION
})
})
}
})
})
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"manifest_version": 2,
"name": "Peek-a-tab, Tabs Manager for Google Chrome™",
"description": "Search, preview, jump across, and close tabs quickly in your chrome browser.",
"version": "1.5.3",
"version": "1.5.4",
"icons": {
"128": "icon_128.png"
},
Expand Down

0 comments on commit f78d150

Please sign in to comment.