Skip to content

Commit

Permalink
Merge branch 'dev-header'
Browse files Browse the repository at this point in the history
  • Loading branch information
annndruha committed Mar 9, 2022
2 parents 9bbecf5 + bf2b52d commit fd61637
Show file tree
Hide file tree
Showing 18 changed files with 21,625 additions and 29 deletions.
1 change: 0 additions & 1 deletion css/bottom-menu.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
height: 20px;
color: white;
text-shadow: 0 0 3px black;
flex-direction: row-reverse;
}

.bottom-menu-left {
Expand Down
91 changes: 91 additions & 0 deletions css/header.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
#header-row {
padding-top: 10px;
}

.header-left {
padding-top: 3px;
height: 18px;
color: white;
text-shadow: 0 0 3px black;
text-overflow: ellipsis;
overflow:hidden;
}

.header-item {
padding-top: 8px;
padding-right: 15px;
padding-bottom: 8px;
}

.header-item:hover {
cursor: pointer;
opacity: 0.6;
}

.header-right {
padding-left: 3px;
padding-right: 5px;
filter: invert(1) drop-shadow(0px 0px 3px rgb(0 0 0 / 0.4));
width: 18px;
height: 18px;
}

.header-right:hover {
cursor: pointer;
opacity: 0.6;
}

#root_popup {
top: 40px;
max-height: 600px;
max-width: 700px;
position:fixed;
overflow-y:auto;
background-color: white;
border-radius: 1em;
box-shadow: 0 0 3px black;
}

.header-text {
text-overflow: ellipsis;
overflow:hidden;
white-space: nowrap;
height: 20px;
border-radius: 10px;
padding-left: 5px;
padding-top: 2px;
}

.header-text:hover {
background-color: #eee;
}

.pseudo-list-icon{
position: relative;
width: 0;
height: 0;
}

.list-icon {
position: absolute;
width: 20px;
height: 20px;
left: -16px;
}

.site-icon {
position: absolute;
width: 15px;
height: 15px;
left: -13px;
top: 3px;
}

li {
cursor: pointer;
padding-right: 20px;
}
ul{
padding-left: 30px;
list-style: none;
}
6 changes: 6 additions & 0 deletions css/main-grid.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ body {
}

.app-container {
padding: 0;
transition: margin 500ms, padding 500ms;
height: 100vh;
}

.content {
padding: 100px 0 0 0;
transition: margin 500ms, padding 500ms;
}
Expand Down
4 changes: 2 additions & 2 deletions css/settings.css
Original file line number Diff line number Diff line change
Expand Up @@ -106,12 +106,12 @@
height: 24px;
}

#save-to-file, #load-from-file, #save-to-cloud, #load-from-cloud, #show-quick, #new-tab, #range-rows, #range-cols {
.rowhover {
cursor: pointer;
border-radius: 1em;
}

#save-to-file:hover, #load-from-file:hover, #save-to-cloud:hover, #load-from-cloud:hover, #show-quick:hover, #new-tab:hover {
.rowhover:hover {
background-color: #eee;
}

Expand Down
1 change: 1 addition & 0 deletions images/icons/arrow_drop.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/icons/arrow_right.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 6 additions & 1 deletion js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ function initSettingsValues(fromfile = false) {
chrome.storage.local.set({'version': json['version']}, () => {})
})
}
chrome.storage.local.get(['cols', 'rows', 'new-tab', 'show-quick'], function (res) {
chrome.storage.local.get(['cols', 'rows', 'new-tab', 'show-quick', 'show-header'], function (res) {
document.getElementById('cols').innerText = res['cols']
document.getElementById('range-cols').setAttribute('value', res['cols'])
document.getElementById('rows').innerText = res['rows']
Expand All @@ -21,6 +21,11 @@ function initSettingsValues(fromfile = false) {
} else {
document.getElementById('checkbox-show-quick').removeAttribute('checked')
}
if (res['show-header']) {
document.getElementById('checkbox-show-header').setAttribute('checked', '')
} else {
document.getElementById('checkbox-show-header').removeAttribute('checked')
}
makeGrid(parseInt(res['cols']), parseInt(res['rows']), fromfile)
})
}
Expand Down
2 changes: 1 addition & 1 deletion js/background.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ chrome.runtime.onInstalled.addListener(() => {
initSettingsValues(true)
}
else {
const json = JSON.parse("{\"10\":{\"0\":{\"link\":\"https://drive.google.com/drive/u/0/my-drive\"}},\"11\":{\"0\":{\"link\":\"https://twitter.com/\"}},\"12\":{\"0\":{\"link\":\"https://youtube.com/\"}},\"13\":{\"0\":{\"link\":\"https://www.instagram.com/\"}},\"14\":{\"0\":{\"link\":\"https://www.spotify.com/\"}},\"15\":{\"0\":{\"link\":\"https://mail.yandex.ru/touch\"}},\"20\":{\"0\":{\"link\":\"https://www.facebook.com/\"}},\"21\":{\"0\":{\"link\":\"https://www.amazon.com/\"}},\"22\":{\"0\":{\"link\":\"https://www.pinterest.com/\"}},\"23\":{\"0\":{\"link\":\"https://www.imdb.com/\"}},\"24\":{\"0\":{\"link\":\"https://github.com/Annndruha/pulchra-bookmarks\"}},\"25\":{\"0\":{\"link\":\"mail.ximc.ru\"}},\"00\":{\"0\":{\"link\":\"http://www.google.com/\"}},\"01\":{\"0\":{\"link\":\"https://wikipedia.org/\"}},\"02\":{\"0\":{\"link\":\"https://translate.google.com/\"}},\"03\":{\"0\":{\"link\":\"https://netflix.com\"}},\"04\":{\"0\":{\"link\":\"https://www.reddit.com/\"}},\"05\":{\"0\":{\"link\":\"https://mail.google.com/mail\"}},\"cols\":5,\"new-tab\":false,\"rows\":3,\"show-quick\":true,\"version\":\"0.4.0\"}")
const json = JSON.parse("{\"10\":{\"0\":{\"link\":\"https://drive.google.com/drive/u/0/my-drive\"}},\"11\":{\"0\":{\"link\":\"https://twitter.com/\"}},\"12\":{\"0\":{\"link\":\"https://youtube.com/\"}},\"13\":{\"0\":{\"link\":\"https://www.instagram.com/\"}},\"14\":{\"0\":{\"link\":\"https://www.spotify.com/\"}},\"15\":{\"0\":{\"link\":\"https://mail.yandex.ru/touch\"}},\"20\":{\"0\":{\"link\":\"https://www.facebook.com/\"}},\"21\":{\"0\":{\"link\":\"https://www.amazon.com/\"}},\"22\":{\"0\":{\"link\":\"https://www.pinterest.com/\"}},\"23\":{\"0\":{\"link\":\"https://www.imdb.com/\"}},\"24\":{\"0\":{\"link\":\"https://github.com/Annndruha/pulchra-bookmarks\"}},\"25\":{\"0\":{\"link\":\"mail.ximc.ru\"}},\"00\":{\"0\":{\"link\":\"http://www.google.com/\"}},\"01\":{\"0\":{\"link\":\"https://wikipedia.org/\"}},\"02\":{\"0\":{\"link\":\"https://translate.google.com/\"}},\"03\":{\"0\":{\"link\":\"https://netflix.com\"}},\"04\":{\"0\":{\"link\":\"https://www.reddit.com/\"}},\"05\":{\"0\":{\"link\":\"https://mail.google.com/mail\"}},\"cols\":5,\"new-tab\":false,\"rows\":3,\"show-header\":true,\"show-quick\":true,\"version\":\"0.6.0\"}")
chrome.storage.local.clear()
chrome.storage.local.set(json, () => {})
}
Expand Down
3 changes: 2 additions & 1 deletion js/bookmarks.js
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,7 @@ function makeGrid(cols, rows, fromfile=false) {

beautyfyView()
updateBottomMenu(cols)
updateHeaderMenu()
loadAllIcons()
}

Expand Down Expand Up @@ -221,7 +222,7 @@ function beautyfyView() {
} else if (states[3] >= windowWidth) {
key = 4
}
$('.app-container').css('padding-right', keys[key]['pb']).css('padding-left', keys[key]['pb'])
$('.content').css('padding-right', keys[key]['pb']).css('padding-left', keys[key]['pb'])
$('.grid-item').css('padding-right', keys[key]['pi']).css('padding-left', keys[key]['pi'])
$('.pseudo-grid-item').css('padding-right', keys[key]['pi']).css('padding-left', keys[key]['pi'])
})
Expand Down
15 changes: 2 additions & 13 deletions js/bottom-menu.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
function updateNottomMenuBinds() {
function updateBottomMenuBinds() {
$('#chrome-downloads').off('click').on('click', () => {openLink('chrome://downloads/')})
$('#chrome-bookmarks').off('click').on('click', () => {openLink('chrome://bookmarks/')})
$('#chrome-history').off('click').on('click', () => {openLink('chrome://history/')})
Expand All @@ -12,7 +12,6 @@ function addBootomMenu(cols) {
let item = document.createElement('div')
item.id = 'grid-item-settings'
chrome.storage.local.get(['show-quick'], function (res) {
item = makeSettingsButton(item)
if (res['show-quick']) {
item = makeBottonMenuLeft(item)
}
Expand All @@ -21,7 +20,7 @@ function addBootomMenu(cols) {
grid_row.id = 'row-settings'
grid.appendChild(grid_row).className = 'grid-row'
$('#grid-item-settings').css("width", (220 * cols - 20).toString() + "px")
updateNottomMenuBinds()
updateBottomMenuBinds()
})
}

Expand Down Expand Up @@ -51,16 +50,6 @@ function makeBottonMenuLeft(parent) {
return parent
}

function makeSettingsButton(parent) {
let bottom_menu = document.createElement('div')
let settings = document.createElement('img')
settings.id = 'settings-open-button'
settings.src = 'images/icons/settings.svg'
bottom_menu.appendChild(settings).className = 'bm-item right'
parent.appendChild(bottom_menu).className = 'bottom-menu-right'
return parent
}

function deleteBottomMenu() {
if (document.getElementById('row-settings')) {
document.getElementById('row-settings').remove()
Expand Down
118 changes: 118 additions & 0 deletions js/header.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
function updateHeaderMenu() {
deleteHeaderMenu()
chrome.storage.local.get(['show-header'], function (res) {
if (res['show-header']) {
createBookmarks()
}
})
}

function deleteHeaderMenu() {
$('#bookmarks').empty()
}

function createBookmarks() {
chrome.bookmarks.getTree((bookmarkTreeNodes) => {
let root = bookmarkTreeNodes[0]["children"][0]["children"]
for (let i = 0; i < root.length; i++) {
let root_str = '<span class="header-item" id="root-header-' + root[i].id + '">'
let root_item = $(root_str)
// if (hasChields(root[i].id)){
// $('#bookmarks').append(getListIcon())
// }
$('#bookmarks').append(root_item.text(root[i].title))
$('#root-header-' + root[i].id).on('click', createRootElementTree)
$('.app-container').on('click', deleteRootElementTree)
}
})
}

function hasChields(item){
return !!(item.children && item.children.length > 0);
}

function deleteRootElementTree() {
document.getElementById("root_popup").remove();
}

function createRootElementTree() {
let root_id = this.id.replace('root-header-', '')
chrome.bookmarks.getSubTree(root_id, (rootitemNodes) => {
if (rootitemNodes[0].children) {
let root_popup = document.createElement('div')
let app_container = document.getElementById('app-container')
root_popup.id = "root_popup"
app_container.appendChild(root_popup).className = 'root_popup'
let root_item = document.getElementById(this.id)
$(root_popup).css('left', root_item.offsetLeft + 'px')
$(root_popup).append(dumpTreeNodes(rootitemNodes[0]['children']))
} else {
openLink(rootitemNodes[0].url)
}
})
}

function dumpTreeNodes(bookmarkNodes) {
let list = $('<ul class="sublist">')
for (let i = 0; i < bookmarkNodes.length; i++) { //bookmarkNodes.length
list.append(dumpNode(bookmarkNodes[i]))
}
return list
}

function getListIcon(status='closed', link='none'){
let pseudofoldericon = $('<div class="pseudo-list-icon">')
let foldericon = $('<img class="list-icon">')
if (status === 'closed')
{
foldericon.attr('src', 'images/icons/arrow_right.svg')
pseudofoldericon.append(foldericon)
}
else if (status === 'opened'){
foldericon.attr('src', 'images/icons/arrow_drop.svg')
pseudofoldericon.append(foldericon)
}
else if (status === 'site'){
// foldericon.attr('src', 'images/icons/language.svg')
foldericon.attr('class', 'site-icon')
foldericon.attr('src', 'https://s2.googleusercontent.com/s2/favicons?domain=' + getOpenLink(link) + '&sz=128')
pseudofoldericon.append(foldericon)
}
return pseudofoldericon
}

function dumpNode(bookmarkNode) {
if (bookmarkNode.title) {
let anchor = $('<div class="header-text">')
anchor.text(bookmarkNode.title)
let span = $('<span class="span-header">')
span.hover().append(anchor) //

let pseudoli = $('<div class="pseudoli">')
let li = $(bookmarkNode.title ? '<li>' : '<div>')
li.attr('status', 'closed')
li.append(span)
if (bookmarkNode.children && bookmarkNode.children.length > 0) {
li.on('click', (e) => {
e.stopPropagation()
if (li.attr('status') === 'closed') {
li.attr('status', 'opened')
li.append(dumpTreeNodes(bookmarkNode.children, li.attr('status')))
} else {
li.attr('status', 'closed')
li.children('.sublist').remove()
}
})
pseudoli.append(getListIcon(li.attr('status')))

} else {
anchor.attr('link', bookmarkNode.url)
anchor.on('click', (e) => {
e.stopPropagation()
openLink(anchor.attr('link'))
})
pseudoli.append(getListIcon('site', anchor.attr('link')))
}
return pseudoli.append(li);
}
}
19 changes: 18 additions & 1 deletion js/settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ function openSettings() {
$('.app-container').css('margin-right', '370px')
$('.settings.window').css('right', '0px')
$('.settings.cancel-overlay').css('right', '370px')
$('#settings-open-button').css('opacity', '0')
}

function closeSettings() {
$('.app-container').css('margin-right', '0px')
$('.settings.window').css('right', '-500px')
$('.settings.cancel-overlay').css('right', '5000px')
$('#settings-open-button').css('opacity', '1')
}

$('#range-rows').on('input', function (e) {
Expand All @@ -31,7 +33,7 @@ $('#close-settings-button, .cancel-overlay').on('click', function (e) {
closeSettings()
})

$('#checkbox-new-tab, #checkbox-show-quick').on('click', () => {}, true) // Super important string with true
$('#checkbox-new-tab, #checkbox-show-quick, #checkbox-show-header').on('click', () => {}, true) // Super important string with true

$('#new-tab').on('click', (e) => {
e.stopPropagation()
Expand Down Expand Up @@ -60,4 +62,19 @@ $('#show-quick').on('click', (e) => {
}
updateBottomMenu(res['cols'])
})
})

$('#show-header').on('click', (e) => {
e.stopPropagation()
e.preventDefault()
chrome.storage.local.get(['show-header'], function (res) {
if (res['show-header']) {
chrome.storage.local.set({['show-header']: false}, () => {})
document.getElementById('checkbox-show-header').removeAttribute('checked')
} else {
chrome.storage.local.set({['show-header']: true}, () => {})
document.getElementById('checkbox-show-header').setAttribute('checked', '')
}
updateHeaderMenu()
})
})
Loading

0 comments on commit fd61637

Please sign in to comment.