arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updated toolbar icons

Browse Source
This commit is contained in:
Tobias Reich 2014-12-26 01:23:56 +01:00
parent 9d12f2ce54
commit 5b6ad09f98
7 changed files with 103 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/main.css vendored
View File

Binary file not shown.

BIN
dist/main.js vendored
View File

Binary file not shown.

75
index.html
View File

@ -29,39 +29,72 @@
<!-- Header --> <!-- Header -->
<header> <header>
<!-- Title -->
<a id="title"></a>
<!-- Buttons --> <!-- Buttons -->
<div id="tools_albums"> <div class="toolbar" id="tools_albums">
<a class="button left icon-cog" id="button_settings" title="Settings"></a> <a class="button left" id="button_settings" title="Settings">
<a class="button left icon-signout" id="button_signin" title="Sign In"></a> <svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#cog"></use></svg>
</a>
<a class="button left" id="button_signin" title="Sign In">
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#account-login"></use></svg>
</a>
<a id="hostedwith">Hosted with Lychee</a> <a id="hostedwith">Hosted with Lychee</a>
<a class="button right icon icon-plus button_add" title="Add"></a> <a class="button right button_add" title="Add">
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#plus"></use></svg>
</a>
<a class="button_divider"></a> <a class="button_divider"></a>
<input id="search" type="text" name="search" placeholder="Search …"> <input id="search" type="text" name="search" placeholder="Search …">
<a id="clearSearch" class="button right">&times;</a> <a id="clearSearch" class="button right">&times;</a>
</div> </div>
<div id="tools_album"> <div class="toolbar" id="tools_album">
<a class="button left icon-arrow-left" id="button_back_home" title="Close Album"></a> <a class="button left" id="button_back_home" title="Close Album">
<a class="button right icon icon-plus button_add" title="Add"></a> <svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#chevron-left"></use></svg>
</a>
<a class="button right button_add" title="Add">
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#plus"></use></svg>
</a>
<a class="button_divider"></a> <a class="button_divider"></a>
<div class="tools" id="button_trash_album" title="Delete Album"><a class="icon-trash"></a></div> <a class="button right" id="button_trash_album" title="Delete Album">
<div class="tools" id="button_info_album" title="Show Info"><a class="icon-info-sign"></a></div> <svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#trash"></use></svg>
<div class="tools" id="button_archive" title="Download Album"><a class="icon-circle-arrow-down"></a></div> </a>
<div class="tools" id="button_share_album" title="Share Album"><a class="icon-share"></a></div> <a class="button right" id="button_info_album" title="Show Info">
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#info"></use></svg>
</a>
<a class="button right" id="button_archive" title="Download Album">
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#cloud-download"></use></svg>
</a>
<a class="button right" id="button_share_album" title="Share Album">
<svg viewBox="0 0 8 8" class="iconic iconic--eye"><use xlink:href="src/images/iconic.svg#eye"></use></svg>
</a>
</div> </div>
<div id="tools_photo"> <div class="toolbar" id="tools_photo">
<a class="button left icon-arrow-left" id="button_back" title="Close Photo"></a> <a class="button left" id="button_back" title="Close Photo">
<div class="tools" id="button_more" title="More"><a class="icon-caret-down"></a></div> <svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#chevron-left"></use></svg>
</a>
<a class="button right" id="button_more" title="More">
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#ellipses"></use></svg>
</a>
<a class="button_divider"></a> <a class="button_divider"></a>
<div class="tools" id="button_trash" title="Delete"><a class="icon-trash"></a></div> <a class="button right" id="button_trash" title="Delete">
<div class="tools" id="button_move" title="Move"><a class="icon-folder-open"></a></div> <svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#trash"></use></svg>
<div class="tools" id="button_info" title="Show Info"><a class="icon-info-sign"></a></div> </a>
<a class="button right" id="button_info" title="Show Info">
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#info"></use></svg>
</a>
<a class="button right" id="button_move" title="Move">
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#folder"></use></svg>
</a>
<a class="button_divider"></a> <a class="button_divider"></a>
<div class="tools" id="button_share" title="Share Photo"><a class="icon-share"></a></div> <a class="button right button--eye" id="button_share" title="Share Photo">
<div class="tools" id="button_star" title="Star Photo"><a class="icon-star-empty"></a></div> <svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#eye"></use></svg>
</a>
<a class="button right button--star" id="button_star" title="Star Photo">
<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#star"></use></svg>
</a>
</div> </div>
<a id="title"></a>
</header> </header>
<!-- Content --> <!-- Content -->

1
src/images/iconic.svg Executable file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

18
src/scripts/view.js
View File

@ -447,14 +447,14 @@ view.photo = {
star: function() { star: function() {
$('#button_star a').removeClass('icon-star-empty icon-star');
if (photo.json.star==1) { if (photo.json.star==1) {
// Starred // Starred
$('#button_star a').addClass('icon-star'); $('#button_star')
$('#button_star').attr('title', 'Unstar Photo'); .addClass('active')
.attr('title', 'Unstar Photo');
} else { } else {
// Unstarred // Unstarred
$('#button_star a').addClass('icon-star-empty'); $('#button_star').removeClass('active');
$('#button_star').attr('title', 'Star Photo'); $('#button_star').attr('title', 'Star Photo');
} }
@ -464,13 +464,15 @@ view.photo = {
if (photo.json.public==1||photo.json.public==2) { if (photo.json.public==1||photo.json.public==2) {
// Photo public // Photo public
$('#button_share a').addClass('active'); $('#button_share')
$('#button_share').attr('title', 'Share Photo'); .addClass('active')
.attr('title', 'Share Photo');
if (photo.json.init) $('#infobox .attr_visibility').html('Public'); if (photo.json.init) $('#infobox .attr_visibility').html('Public');
} else { } else {
// Photo private // Photo private
$('#button_share a').removeClass('active'); $('#button_share')
$('#button_share').attr('title', 'Make Public'); .removeClass('active')
.attr('title', 'Make Public');
if (photo.json.init) $('#infobox .attr_visibility').html('Private'); if (photo.json.init) $('#infobox .attr_visibility').html('Private');
} }

69
src/styles/_header.scss
View File

@ -55,38 +55,41 @@ header {
&.editable { cursor: pointer; } &.editable { cursor: pointer; }
} }
/* Toolbars ------------------------------------------------*/
.toolbar {
display: none;
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0 10px;
}
/* Button ------------------------------------------------*/ /* Button ------------------------------------------------*/
.button { .button {
color: #888; display: inline-block;
font-family: 'FontAwesome'; padding: 16px 8px 12px;
font-size: 21px; width: 15px;
font-weight: bold;
text-decoration: none !important;
cursor: pointer; cursor: pointer;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
&:hover { &.left { float: left; }
color: #fff;
&.right { float: right; }
.iconic {
fill: #888;
filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) );
transition: fill .2s ease;
} }
&.left { &:hover .iconic { fill: #fff; }
float: left;
position: absolute;
padding: 16px 10px 8px 18px;
}
&.right { &--star.active .iconic { fill: #f0ef77; }
float: right;
position: relative; &--eye.active .iconic { fill: #ff9737; }
padding: 16px 19px 13px 11px;
} &#button_signin { display: none; }
}
#tools_albums,
#tools_album,
#tools_photo,
#button_signin {
display: none;
} }
/* Button Divider ------------------------------------------------*/ /* Button Divider ------------------------------------------------*/
@ -129,24 +132,6 @@ header {
&:hover { opacity: 1; } &:hover { opacity: 1; }
} }
/* Tools ------------------------------------------------*/
.tools {
float: right;
padding: 14px 8px;
color: #888;
font-size: 21px;
text-shadow: 0 -1px 0 #222;
cursor: pointer;
&:first-of-type { margin-right: 6px; }
&:hover a { color: #fff; }
.icon-star { color: #f0ef77; }
.icon-share.active { color: #ff9737; }
}
/* Hosted with Lychee ------------------------------------------------*/ /* Hosted with Lychee ------------------------------------------------*/
#hostedwith { #hostedwith {
float: right; float: right;

5
src/styles/main.scss
View File

@ -42,6 +42,11 @@ input {
user-select: text !important; user-select: text !important;
} }
.iconic {
width: 100%;
height: 100%;
}
@import 'animations'; @import 'animations';
@import 'content'; @import 'content';
@import 'contextmenu'; @import 'contextmenu';