Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Ui front #111

Merged
merged 3 commits into from

2 participants

@rbouajram

No description provided.

@mohamedmansour

It looks better with different colors?

@mohamedmansour

Would be nice to remove the dead images too! like the options.png

@mohamedmansour mohamedmansour merged commit e8b70f5 into from
@mohamedmansour

Beautiful!

@rbouajram

The users will have control of the color. Shadow effects for the icons are currently in the works to allow fluid theme modifications, coming next commit (along with a ui-gallery branch).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 47 additions and 23 deletions.
  1. +36 −18 css/popup.css
  2. BIN  img/menuicons.png
  3. +11 −5 popup.html
View
54 css/popup.css
@@ -6,7 +6,6 @@ body, html {
overflow-y: hidden;
}
#hangout-bar {
- background-color: rgba(0,0,0,0.05);
border-bottom:1px solid #ccc;
box-shadow:0px 0px 8px #999;
margin: 0;
@@ -14,31 +13,32 @@ body, html {
position:relative;
top: 0px;
left: 0px;
- z-index: 9999;
+ z-index: 999;
width: 100%;
line-height: 30px;
-webkit-user-select: none;
- text-shadow:1px 1px 1px rgba(255,255,255,0.5);
+ text-shadow:0px 0px 4px rgba(0,0,0,0.5);
+ background:rgba(34,34,34,0.87);
+ color:#fff;
}
#hangout-bar-left {
float: left;
- margin-left: 10px;
- margin-top:10px;
- font-size:1.2em;
+ margin-top:6px;
+ font-size:1.6em;
font-weight:bold;
}
#hangout-bar-right {
float: right;
margin-right: 10px;
+ margin-top: 10px;
}
#hangout-bar span {
- font-family: 'Droid Sans', sans-serif;
- color: #000;
+ font-family: Arial, sans-serif;
display: inline-block;
- padding: 0 5px;
+ margin:4px 16px 0;
}
-#hangout-bar-head { height:60px; }
+#hangout-bar-head { height:48px; }
#hangout-filter { border-top:1px solid #ccc; height: 30px; padding:2px 10px; font-size:0.9em; clear: both; }
#hangout-filter span { margin:0 8px 0 0; padding:0; float: left; color:#555;}
@@ -57,33 +57,51 @@ body, html {
#version {
font-size: 0.8em;
}
-
+/*
.menu-item {
display: inline-block;
height: 27px;
border-top: 3px solid transparent;
cursor: pointer;
+ opacity:0.5;
}
.menu-item:hover {
- background-color: #dadada;
+ border-radius:4px;
+ opacity:1;
}
.menu-item.selected {
border-color: #dd4b39;
+ opacity:1;
}
+*/
-#menu-options {
- background-image: url(/img/options.png);
- background-position: center center;
+.menu-item {
+ display: inline;
+ background-image: url(/img/menuicons.png);
+ height:21px;
+ width:21px;
+ cursor: pointer;
+ opacity:0.5;
background-repeat: no-repeat;
- width: 14px;
}
+.menu-item:hover {
+ opacity:0.92;
+}
+.menu-item.selected {
+ opacity:1;
+ background-position-y:-28px;
+}
+
+#menu-hangouts { background-position-x: 0px; }
+#menu-maps { background-position-x: -25px; }
+#menu-gallery { background-position-x: -50px; }
+#menu-options { background-position-x: -75px; }
.popup-page {
width: 100%;
position: absolute;
display:none;
overflow-x: hidden;
- overflow-y: scroll;
}
.popup-page h2 {
@@ -93,7 +111,7 @@ body, html {
#hangouts-container {
left: 0;
- height:504px !important;
+ height:550px !important;
}
#maps-container > h2 {
View
BIN  img/menuicons.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
16 popup.html
@@ -21,16 +21,22 @@
<div id="hangout-bar">
<div id="hangout-bar-head">
<div id="hangout-bar-left">
- <img src="/img/hangout-extras.png"/>
- <span class="menu-item tip" id="menu-extensionpage" title="Visit My Hangouts Website">+My Hangouts</span>
- <span id="version"></span>
+ <!-- <img src="/img/hangout-extras.png"/> -->
+ <span class="tip" id="menu-extensionpage" title="Visit My Hangouts Website">+My Hangouts</span>
+ <!-- <span id="version"></span> -->
</div>
<div id="hangout-bar-right">
- <span class="menu-item tip selected" id="menu-hangouts" title="All the current hangouts.">Hangouts</span>
+ <!--
+ <span class="menu-item tip selected" id="menu-hangouts" title="See all the current hangouts.">Hangouts</span>
<span class="menu-item tip" id="menu-maps" title="Map view based on a person's location.">Map</span>
<span class="menu-item tip" id="menu-gallery" title="Gallery where you will <br /> find your captured moments.">Gallery</span>
<span class="menu-item tip" id="menu-options" title="Customize My Hangouts <br /> The settings screen!">&nbsp;</span>
<span class="menu-item tip" id="menu-notifications" title="Current hangouts that were notified <br /> from the circles you setup in options.">Notifications</span>
+ -->
+ <span class="menu-item tip selected" id="menu-hangouts" title="See all the current hangouts."></span>
+ <span class="menu-item tip" id="menu-maps" title="Map view based on a person's location."></span>
+ <span class="menu-item tip" id="menu-gallery" title="Gallery where you will <br /> find your captured moments."></span>
+ <span class="menu-item tip" id="menu-options" title="Customize My Hangouts <br /> The settings screen!"></span>
</div>
</div>
<!--
@@ -53,7 +59,7 @@
<h2>Hangouts Around the World <span id="popup-subtitle">Click each image to see which hangout they are in!</span><span id="popup-open" title="Open map in new window."></span><span id="date"></span></h2>
<div id="map-error">Google has disabled this feature for the extension without giving any reasons. Check back soon.</div>
<div id="map-canvas"></div>
- </div>
+ </div>
<div id="options-container" class="popup-page">
<h2>Notification preferences</h2>
<p><label for="option-circles-notify"><input id="option-circles-notify" type="checkbox" /> Notify me when a user in my circles below entered a hangout.</label></p>
Something went wrong with that request. Please try again.