- {gt(svc.shareTypes.length, 1) [}
-
-
-
-
- {eq(svc.shareTypes.length, 2) [}
-
send to {svc.shareTypes[1].name} instead?
- {]}
-
- {. lastType lastToShareType(svc.shareTypes)}
-
-
-
+
+ {]}
+
+ {gt(svc.shareTypes.length, 1) [}
+
+
- {] [}
- {svc.features.direct [}
+
+ {. lastType lastToShareType(svc.shareTypes)}
- {svc.features.subject [}
-
- {]}
- {]}
-
- {]}
-
-
-
- {svc.features.counter [}
-
- {]}
-
- Please specify a recipient
-
-
- Cannot share with all recipients
-
-
+ {]}
+
+
+
+ Please specify a recipient
+
+
+ Cannot share with all recipients
+
+ {svc.features.counter [}
+
+ {]}
+
+
-
-
+
+
diff --git a/web/dev/1/share/panel/scripts/widgets/AccountPanel.js b/web/dev/1/share/panel/scripts/widgets/AccountPanel.js
index 5ffaaa6..45fe288 100644
--- a/web/dev/1/share/panel/scripts/widgets/AccountPanel.js
+++ b/web/dev/1/share/panel/scripts/widgets/AccountPanel.js
@@ -42,10 +42,6 @@ function (object, Widget, $, template,
.delegate('.' + className + ' form.messageForm', 'submit', function (evt) {
Widget.closest(module.id, evt, 'onSubmit');
})
- .delegate('.' + className + ' .shareType2', 'click', function (evt) {
- Widget.closest(module.id, evt, 'selectSecondShareType');
- evt.preventDefault();
- })
.delegate('.' + className + ' [name="to"]', 'blur', function (evt) {
Widget.closest(module.id, evt, 'validateTo');
});
@@ -73,15 +69,14 @@ function (object, Widget, $, template,
// The module name for the Contacts module
contactsName: 'Contacts',
- strings: {
- shareTypeLabel: 'send to'
+ addAccount: function (account) {
+ this.accounts.push(account);
},
onCreate: function (onAsynCreateDone) {
- var profile = this.account.profile,
- name = profile.displayName,
- userName,
- onFinishCreate = this.makeCreateCallback();
+ var profile = this.accounts[0].profile,
+ onFinishCreate = this.makeCreateCallback(),
+ name;
//Set up the svcAccount property
this.svcAccount = profile.accounts[0];
@@ -114,9 +109,9 @@ function (object, Widget, $, template,
//Set up nicer display name
// XXX for email services, we should show the email account, but we
// cannot rely on userid being a 'pretty' name we can display
- userName = this.svcAccount.username;
- if (userName && userName !== name) {
- name = name + " (" + userName + ")";
+ name = this.svcAccount.username;
+ if (!name) {
+ name = profile.displayName;
}
this.displayName = name;
@@ -134,7 +129,7 @@ function (object, Widget, $, template,
//Listen for updates to base64Preview
this.base64PreviewSub = dispatch.sub('base64Preview', fn.bind(this, function (dataUrl) {
- $('[name="picture_base64"]', this.bodyNode).val(jigFuncs.rawBase64(dataUrl));
+ $('[name="picture_base64"]', this.node).val(jigFuncs.rawBase64(dataUrl));
}));
// listen for successful send, and if so, update contacts list, if
@@ -168,20 +163,11 @@ function (object, Widget, $, template,
},
onRender: function () {
- var i, tempNode, acNode;
-
- //Get a handle on the accordion body
- for (i = 0; (tempNode = this.node.childNodes[i]); i++) {
- if (tempNode.nodeType === 1 &&
- tempNode.className.indexOf(this.className) !== -1) {
- this.bodyNode = tempNode;
- break;
- }
- }
+ var acNode;
// Hold onto nodes that are used frequently
- this.toDom = $('[name="to"]', this.bodyNode);
- this.shareButtonNode = $('button.share', this.bodyNode)[0];
+ this.toDom = $('[name="to"]', this.node);
+ this.shareButtonNode = $('button.share', this.node)[0];
if (this.svc.shareTypes.length > 1) {
//Insert a Select widget if it is desired.
@@ -194,7 +180,7 @@ function (object, Widget, $, template,
value: item.type
};
})
- }, $('.shareTypeSelectSection', this.bodyNode)[0]);
+ }, $('.shareTypeSelectSection', this.node)[0]);
// Listen to changes in the Select
this.selectChangeFunc = fn.bind(this, function (evt) {
@@ -211,7 +197,7 @@ function (object, Widget, $, template,
if (this.svc.textLimit) {
this.startCounter();
}
- placeholder(this.bodyNode);
+ placeholder(this.node);
// Set up autocomplete and contacts used for autocomplete.
// Since contacts can have a different
@@ -253,7 +239,7 @@ function (object, Widget, $, template,
store.remove(this.storeId);
//Also clear up the form data.
- var root = $(this.bodyNode);
+ var root = $(this.node);
this.toDom.val('');
root.find('[name="subject"]').val('');
root.find('[name="message"]').val('');
@@ -261,7 +247,7 @@ function (object, Widget, $, template,
root.find('.counter').html('');
}
- placeholder(this.bodyNode);
+ placeholder(this.node);
},
saveData: function () {
@@ -314,8 +300,8 @@ function (object, Widget, $, template,
startCounter: function () {
//Set up text counter
if (!this.counter) {
- this.counter = new TextCounter($('textarea.message', this.bodyNode),
- $('.counter', this.bodyNode),
+ this.counter = new TextCounter($('textarea.message', this.node),
+ $('.counter', this.node),
this.svc.textLimit - this.urlSize);
}
this.updateCounter();
@@ -337,19 +323,19 @@ function (object, Widget, $, template,
* to show.
*/
showStatus: function (className) {
- $('.status.' + className, this.bodyNode).show();
+ $('.status.' + className, this.node)[0].style.display = 'inline';
},
/**
* Hides all status messages that show up near the share button.
*/
hideStatus: function () {
- $('.status', this.bodyNode).hide();
+ $('.status', this.node).hide();
},
//The page options have changed, update the relevant HTML bits.
optionsChanged: function () {
- var root = $(this.bodyNode),
+ var root = $(this.node),
opts = this.options,
formLink = jigFuncs.link(opts),
restoredData = this.memStore[formLink],
@@ -409,11 +395,11 @@ function (object, Widget, $, template,
}
//Kick the placeholder logic to recompute, to avoid gray text issues.
- placeholder(this.bodyNode);
+ placeholder(this.node);
},
getFormData: function () {
- var dom = $('form', this.bodyNode),
+ var dom = $('form', this.node),
data = {};
//Make sure all form elements are trimmed and username exists.
//Then collect the form values into the data object.
@@ -448,16 +434,12 @@ function (object, Widget, $, template,
this.changeShareType(this.svc.shareTypes[0]);
},
- selectSecondShareType: function () {
- this.select.selectIndex(1);
- this.changeShareType(this.svc.shareTypes[1]);
- },
-
changeShareType: function (shareType) {
- var toSectionDom = $('.toSection', this.bodyNode),
- shareTypeSectionDom = $('.shareTypeSelectSection', this.bodyNode),
- shareType2Dom = $('.shareType2', this.bodyNode),
- toInputDom = $('.toSection input', this.bodyNode);
+ var toSectionDom = $('.toSection', this.node),
+ shareTypeDom = $('.shareTypeSection', this.node),
+ actionsDom = $('.accountActions', this.node),
+ shareTypeSelectDom = $('.shareTypeSelectSection', this.node),
+ toInputDom = $('.toSection input', this.node);
//If there is a special to value (like linkedin my connections), drop it in
toInputDom.val(shareType.specialTo ? shareType.specialTo : '');
@@ -465,13 +447,15 @@ function (object, Widget, $, template,
if (shareType.showTo) {
toSectionDom.removeClass('hiddenImportant');
- shareTypeSectionDom.addClass('fixedSize');
- shareType2Dom.addClass('hiddenImportant');
+ shareTypeDom.addClass('wide');
+ actionsDom.addClass('wide');
+ shareTypeSelectDom.addClass('fixedSize');
toInputDom.focus();
} else {
toSectionDom.addClass('hiddenImportant');
- shareTypeSectionDom.removeClass('fixedSize');
- shareType2Dom.removeClass('hiddenImportant');
+ actionsDom.removeClass('wide');
+ shareTypeDom.removeClass('wide');
+ shareTypeSelectDom.removeClass('fixedSize');
}
},
@@ -482,6 +466,8 @@ function (object, Widget, $, template,
//Clear up any error status, make sure share button
//is enabled.
this.resetError();
+
+ dispatch.pub('sizeToContent');
},
onSubmit: function (evt) {
diff --git a/web/dev/1/share/panel/scripts/widgets/AccountPanelLinkedIn.js b/web/dev/1/share/panel/scripts/widgets/AccountPanelLinkedIn.js
index 9292c55..b1a9442 100644
--- a/web/dev/1/share/panel/scripts/widgets/AccountPanelLinkedIn.js
+++ b/web/dev/1/share/panel/scripts/widgets/AccountPanelLinkedIn.js
@@ -32,11 +32,6 @@ function (object, AccountPanel, $) {
*/
return object(AccountPanel, null, function (parent) {
return {
- onCreate: function () {
- //Call Parent logic
- parent(this, "onCreate", arguments);
- this.strings.shareTypeLabel = 'visible to';
- },
onRender: function () {
parent(this, "onRender", arguments);
//Add styling to last item in "visible to" dropdown
diff --git a/web/dev/1/share/panel/scripts/widgets/AddAccount.html b/web/dev/1/share/panel/scripts/widgets/AddAccount.html
new file mode 100644
index 0000000..c62de28
--- /dev/null
+++ b/web/dev/1/share/panel/scripts/widgets/AddAccount.html
@@ -0,0 +1,5 @@
+
+
+
diff --git a/web/dev/1/share/panel/scripts/widgets/AddAccount.js b/web/dev/1/share/panel/scripts/widgets/AddAccount.js
new file mode 100644
index 0000000..0a8939b
--- /dev/null
+++ b/web/dev/1/share/panel/scripts/widgets/AddAccount.js
@@ -0,0 +1,83 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is Raindrop.
+ *
+ * The Initial Developer of the Original Code is
+ * Mozilla Messaging, Inc..
+ * Portions created by the Initial Developer are Copyright (C) 2009
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ * */
+
+/*jslint indent: 2, plusplus: false, nomen: false */
+/*global define: false, document: false, alert: false */
+"use strict";
+
+define([ 'blade/object', 'blade/fn', 'blade/Widget', 'jquery', 'services',
+ 'storage', 'module', 'dispatch', 'Select', 'oauth',
+ 'text!./AddAccount.html'],
+function (object, fn, Widget, $, services,
+ storage, module, dispatch, Select, oauth,
+ template) {
+
+ var className = module.id.replace(/\//g, '-'),
+ store = storage();
+
+ //Define the widget.
+ return object(Widget, null, function (parent) {
+ return {
+ template: template,
+ className: className,
+
+ onRender: function () {
+ //Use a Select widget because web content in a panel on Linux
+ //has a problem with native selects.
+
+ var options = [{name: 'Select type', value: ''}];
+
+ services.domainList.forEach(function (domain) {
+ var svc = services.domains[domain];
+ options.push({
+ name: svc.name,
+ value: domain
+ });
+ });
+
+ this.select = new Select({
+ name: 'accountType',
+ options: options
+ }, $('.add', this.node)[0]);
+
+ //Listen for changes
+ this.select.dom.bind('change', fn.bind(this, function (evt) {
+
+ var selectionName = this.select.val();
+ if (selectionName) {
+ oauth(this.select.val(), true, function (success) {
+ if (success) {
+ //Make sure to bring the user back to this service if
+ //the auth is successful.
+ store.set('lastSelection', selectionName);
+ } else {
+ //TODO: Fix.
+ alert('Login Failed.');
+ }
+ });
+ }
+ }));
+ }
+ };
+ });
+});
diff --git a/web/dev/1/share/panel/scripts/widgets/TabButton.html b/web/dev/1/share/panel/scripts/widgets/TabButton.html
new file mode 100644
index 0000000..cc819dc
--- /dev/null
+++ b/web/dev/1/share/panel/scripts/widgets/TabButton.html
@@ -0,0 +1 @@
+
{name}
diff --git a/web/dev/1/share/panel/scripts/widgets/TabButton.js b/web/dev/1/share/panel/scripts/widgets/TabButton.js
new file mode 100644
index 0000000..eb858b9
--- /dev/null
+++ b/web/dev/1/share/panel/scripts/widgets/TabButton.js
@@ -0,0 +1,43 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is Raindrop.
+ *
+ * The Initial Developer of the Original Code is
+ * Mozilla Messaging, Inc..
+ * Portions created by the Initial Developer are Copyright (C) 2009
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ * */
+
+/*jslint indent: 2, plusplus: false, nomen: false */
+/*global define: false, document: false */
+"use strict";
+
+define([ 'blade/object', 'blade/fn', 'blade/Widget', 'module', 'Select',
+ 'services', 'jquery', 'text!./TabButton.html'],
+function (object, fn, Widget, module, Select,
+ services, $, template) {
+
+ var className = module.id.replace(/\//g, '-');
+
+
+ //Define the widget.
+ return object(Widget, null, function (parent) {
+ return {
+ template: template,
+ className: className
+ };
+ });
+});
diff --git a/web/dev/1/share/panel/style.css b/web/dev/1/share/panel/style.css
index 6140867..03e40c7 100644
--- a/web/dev/1/share/panel/style.css
+++ b/web/dev/1/share/panel/style.css
@@ -155,10 +155,11 @@ body {
font-size: 11px;
line-height: 110%;
overflow: hidden;
- max-width: 400px;
+ min-width: 425px;
width: 100%;
height: 100%;
- background-color: #d4dde5;
+ min-height: 120px;
+ background-color: #505050;
}
noscript {
@@ -169,12 +170,22 @@ noscript {
}
#wrapper {
- width: 100%;
- max-width: 400px;
- min-height: 180px;
+ max-width: 430px;
height: 100%;
}
+
+#tabs {
+ width: 38px;
+ padding: 6px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #515151), color-stop(100%, #2b2b2b));
+ background-image: -moz-linear-gradient(center top , #515151 0%, #2b2b2b 100%);
+}
+
button::-moz-focus-inner {
border: 0;
}
@@ -187,9 +198,9 @@ button {
cursor: pointer;
padding: 0 10px;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #ddd));
background-image: -moz-linear-gradient(center top , #fafafa 0%, #ddd 100%);
@@ -204,6 +215,12 @@ button:active {
background-image: -moz-linear-gradient(center top , #eee 0%, #ccc 100%);
}
+#tabContent {
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6f6f6f), color-stop(100%, #444444));
+ background-image: -moz-linear-gradient(center top , #6f6f6f 0%, #444444 100%);
+
+}
+
h2 {
font-size: 13px;
color: #535f6d;
@@ -217,204 +234,86 @@ h3 {
color: #535f6d;
}
-/*
- header
-*/
-
-header {
- width: 100%;
- padding: 8px 5px 10px 10px;
- background-color: #d4dde5;
-}
-
-header h1 {
- font-size: 11px;
-}
-
-header a {
- text-decoration: none;
- outline: none;
- color: #535F6D;
-}
-
-header a:hover {
- text-decoration: underline;
-}
-
-header nav ul {
- list-style-type: none;
-}
-
-header nav ul li {
- display: inline-block;
- padding: 0 5px;
- float: left;
-}
-
-header nav ul li.settings {
- border-width: 0 1px 0 0;
- border-style: solid;
- border-color: #535f6d;
-}
-
-header span.close {
- width: 12px;
- height: 13px;
- background-image: url("i/sprite.png");
- background-position: center 0;
+/* Tab Buttons */
+.widgets-TabButton {
display: block;
- cursor: pointer;
-}
-
-header span.close:active {
- background-position: center -13px;
-}
-
-header a.new {
- color: #ff5959;
- font-weight: bold;
+ width: 24px;
+ height: 24px;
+ border: 1px solid transparent;
+ font-size: 20px;
+ line-height: 18px;
+ text-decoration: none;
+ text-align: center;
+ color: white;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
}
-#pageInfo, #accounts {
- width: 100%;
-
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4dde5), color-stop(100%, #c6d1da));
- background-image: -moz-linear-gradient(top, #d4dde5 0%, #c6d1da 100%);
+.widgets-TabButton.selected {
+ border: 1px solid #577894;
+ box-shadow: 0 0 5px rgba(87, 120, 148, 1);
+ background-color: #303333;
}
-/*
- page info
-*/
-#pageInfo {
- padding: 10px 10px 20px;
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4dde5), color-stop(100%, #c6d1da));
- background-image: -moz-linear-gradient(top, #d4dde5 0%, #c6d1da 100%);
-}
+/* Service panel widgets */
-#pageInfo .thumbContainer {
- /* Set to be the max values for .thumbnail img */
- width: 90px;
- height: 60px;
- overflow:hidden;
+.widgets-AddAccount {
+ width: 360px;
+ height: 56px;
+ box-sizing: border-box;
+ margin: 14px;
+ text-align: center;
}
-#pageInfo .thumbnail {
- margin: 0 auto;
+.widgets-AddAccount .add {
+ margin: 50px 70px 0px 60px;
}
-#pageInfo .thumbnail img {
- border: none;
- margin: 0 auto;
-
- /* See .thumbContainer styles if these values changed. */
- max-width: 90px;
- max-height: 60px;
+.widgets-AddAccount .add label {
display: block;
-
- border: 1px solid #a6afb6;
-
- -webkit-box-shadow: 1px 1px 0 rgba(255,255,255, 0.5);
- -moz-box-shadow: 1px 1px 0 rgba(255,255,255, 0.5);
- box-shadow: 1px 1px 0 rgba(255,255,255, 0.5);
+ float: left;
+ height: 24px;
+ margin-right: 5px;
+ line-height: 24px;
+ color: #e2e2e2;
}
-#pageInfo .shareInfo {
- padding: 0 0 0 10px;
+.widgets-AddAccount .add li {
+ background-repeat: no-repeat;
+ padding-left: 26px;
}
-#pageInfo .pageTitle {
- line-height: 18px;
- font-size: 13px;
- color: #535f6d;
- text-shadow: 1px 1px 0 rgba(255,255,255, 0.5);
+.widgets-AddAccount .add li[data-value=""] {
+ padding-left: 4px;
}
-#pageInfo .pageDescription {
- padding: 5px 0;
- font-size: 10px;
- color: #535F6D;
-}
+.widgets-AddAccount .add li[data-value="twitter.com"] {
+ background-image: url("/share/i/sprite.png");
+ background-position: 4px -33px;
-#pageInfo .pageDescription:empty {
- display: none;
}
-#pageInfo .url,
-#pageInfo .shorturl {
- font-size: 10px;
- color: #A6AFB6;
- display: table;
- text-decoration: none;
- padding: 3px 5px;
- cursor: default;
+.widgets-AddAccount .add li[data-value="facebook.com"] {
+ background-image: url("/share/i/sprite.png");
+ background-position: 4px -66px;
}
-#pageInfo .url.selected,
-#pageInfo .shorturl.selected {
- background-color: #E1E7ED;
- color: #848B91;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
+.widgets-AddAccount .add li[data-value="google.com"] {
+ background-image: url("/share/i/sprite.png");
+ background-position: 4px -99px;
}
+
/*
generic styles for account panels
*/
-.ui-accordion-header {
- color: #535F6D;
- display: block;
- border-width: 1px 0;
- border-color: #a6afb6;
- border-style: solid;
- margin-top: -1px;
- outline: none;
- padding: 10px;
- cursor: pointer;
- width: 100%;
-
- -moz-user-select: none;
-
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4dde5), color-stop(100%, #c6d1da));
- background-image: -moz-linear-gradient(top, #d4dde5 0%, #c6d1da 100%);
-}
-
-.ui-accordion-header.ui-state-active {
- background-image: none;
- border-bottom: 1px solid transparent;
- background-color: #E9EEF2;
-}
-
-.ui-accordion-content {
- background-color: #e9eef2;
-}
-
.share {
float: right;
}
-img.avatar {
- border: 1px solid #FFFFFF;
- height: 23px;
- margin: 2px 10px 0 0;
- width: 23px;
-
- -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
- -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-}
-
-.shareTypeSection {
- padding: 2px 0 5px;
- height: 52px;
-}
-
-.widgets-AccountPanel .addressing {
- position: relative;
-}
-
.hidden {
display: none;
}
@@ -443,182 +342,168 @@ span.icon {
}
+.icon {
+ background-repeat: no-repeat;
+}
-span.icon.settings {
+.icon.settings {
background-image: url("/share/i/sprite.png");
background-position: center 4px;
}
-span.icon.twitter {
+.icon.twitter {
background-image: url("/share/i/sprite.png");
- background-position: center -37px;
+ background-position: center -33px;
}
-span.icon.facebook {
+.icon.facebook {
background-image: url("/share/i/sprite.png");
- background-position: center -70px;
+ background-position: center -66px;
}
-span.icon.gmail {
+.icon.gmail {
background-image: url("/share/i/sprite.png");
- background-position: center -103px;
+ background-position: center -99px;
}
-span.icon.yahoo {
+.icon.yahoo {
background-image: url("/share/i/sprite.png");
- background-position: center -134px;
+ background-position: center -129px;
}
-span.icon.googleapps {
+.icon.googleapps {
background-image: url("/share/i/sprite.png");
- background-position: center -166px;
+ background-position: center -162px;
}
-span.icon.linkedin {
+.icon.linkedin {
background-image: url("/share/i/LinkedIn_Logo16px.png");
background-position: center;
}
-span.icon.debug {
+.icon.debug {
background-image: url("/share/i/bug_b.png");
background-position: center;
}
+/* Generic AccountPanel styles */
-.ui-accordion-header span.arrow {
- background-position: center -102px;
-}
-
-.ui-accordion-header.ui-state-active span.arrow {
- background-position: center -120px;
-}
-
-.ui-accordion-header:not(.ui-state-active) .username {
- opacity: 0.5;
+.widgets-AccountPanel {
+ margin: 14px;
}
-.ui-accordion-header.ui-state-hover .username {
- opacity: 1.0;
+.widgets-AccountPanel .user {
+ width: 60px;
+ color: #e2e2e2;
+ text-align: center;
}
-.ui-accordion-content .padding {
- padding: 0 10px 10px;
+.widgets-AccountPanel .username {
+ display: block;
}
-.ui-accordion-content textarea,
-.ui-accordion-content input[type="text"] {
- width: 100%;
- font-family: "Lucida Grande", Verdana, Sans-serif;
- font-size: 11px;
- padding: 2px;
- margin: 2px 0;
- border-width: 1px;
- border-style: solid;
- border-color: #A6AFB6;
+img.avatar {
+ border: 1px solid #383838;
+ height: 48px;
+ width: 48px;
- -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15) inset;
- -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15) inset;
- box-shadow: 0 1px 1px rgba(0,0,0,0.15) inset;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
}
-.placeholder {
- color: #aaa;
+.widgets-AccountPanel .addressing {
+ width: 300px;
+ position: relative;
+ padding-left: 8px;
}
-.ui-accordion-content textarea:focus,
-.ui-accordion-content input[type="text"]:focus {
- outline: none;
-
- -webkit-box-shadow: 0 0 0 2px #C2ECFF inset;
- -moz-box-shadow: 0 0 0 2px #C2ECFF inset;
- box-shadow: 0 0 0 2px #C2ECFF inset;
+.widgets-AccountPanel textarea.message {
+ width: 100%;
+ height: 68px;
+ margin: 0 0 4px 0;
+ resize: none;
}
-button:focus {
- outline: 0;
+.widgets-AccountPanel .shareTypeSection {
+ float: left;
+ width: 100px;
}
-.account textarea {
+.widgets-AccountPanel .shareTypeSection.wide {
+ float: none;
width: 100%;
- height: 80px;
}
-.ui-accordion-content input[type="text"] {
- height: 24px;
+.widgets-AccountPanel .shareTypeSection .Select.open ul {
+ top: -20px;
}
-.ui-accordion-content .accountActions {
- width: 100%;
- margin: 8px 0 0 0;
+.shareTypeSelectSection.fixedSize {
+ width: 100px;
}
-.ui-accordion-content span.count {
- line-height: 24px;
- color: #535F6D;
-}
-.ui-accordion-content div.counter {
- float: left;
- line-height: 24px;
- color: #535F6D;
+.shareTypeSelectSection.fixedSize select {
+ width: 100px;
+ margin: 2px 0 0 0;
}
-.ui-accordion-content div.counter.TextCountOver {
- color: #880000
+.toSection {
+ width: 150px;
+ padding-left: 10px;
}
-.ui-accordion-content label {
- display: block;
- margin: 0 0 5px 0;
+body .toSection input[type="text"] {
+ width: 100%;
}
-/* Generic AccountPanel styles */
-
-.shareTypeSection label {
- color: #535F6D;
+.lineSeparatorOption {
+ border-top: 1px solid #CCCCCC;
}
-.shareTypeSelectSection.fixedSize {
- width: 100px;
+.widgets-AccountPanel .inputError[type="text"] {
+ border: 1px solid #C26464;
+ background-color: #893232;
}
-.Select {
- margin: 2px 0 0 0;
+.widgets-AccountPanel .accountActions {
+ width: 190px;
}
-.shareTypeSelectSection.fixedSize select {
- width: 100px;
- margin: 2px 0 0 0;
+.widgets-AccountPanel .accountActions.wide {
+ width: 100%;
+ margin-top: 4px;
}
-.toSection {
- padding-left: 10px;
+.widgets-AccountPanel span.count {
+ line-height: 24px;
+ color: #535F6D;
}
-body .toSection input[type="text"] {
- width: 100%;
+.widgets-AccountPanel label {
+ display: block;
+ margin: 0 0 5px 0;
}
-.shareType2 {
- line-height: 64px;
- padding: 0 0 0 10px;
- text-decoration: none;
- font-style: italic;
- color: #535F6D;
+.widgets-AccountPanel .statusSection {
+ padding-right: 10px;
+ text-align: right;
}
-.lineSeparatorOption {
- border-top: 1px solid #CCCCCC;
+.widgets-AccountPanel div.counter {
+ display: inline;
+ padding-left: 5px;
+ line-height: 24px;
+ color: #e2e2e2;
}
-.widgets-AccountPanel .inputError[type="text"] {
- border: 1px solid red;
+.widgets-AccountPanel div.counter.TextCountOver {
+ color: #880000
}
.widgets-AccountPanel div.status {
display: none;
- float: right;
position: relative;
- margin-right: 10px;
line-height: 24px;
min-height: 0;
width: auto;
@@ -627,13 +512,52 @@ body .toSection input[type="text"] {
}
.widgets-AccountPanel div.status.error {
- color: red;
+ color: #C26464;
background-color: transparent;
box-shadow: none;
}
+.widgets-AccountPanel textarea,
+.widgets-AccountPanel input[type="text"] {
+ width: 100%;
+ font-family: "Lucida Grande", Verdana, Sans-serif;
+ font-size: 11px;
+ padding: 2px;
+ border: 1px solid #383838;
+ border-radius: 4px;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+}
+
+.widgets-AccountPanel .placeholder {
+ color: #aaa;
+}
+
+.widgets-AccountPanel textarea:focus,
+.widgets-AccountPanel input[type="text"]:focus {
+ outline: none;
+ border: 1px solid #577894;
+ box-shadow: 0 0 5px #577894;
+}
+
.widgets-AccountPanel button:focus {
- box-shadow: 0 0 0 3px rgba(0, 162, 255, 0.25);
+ outline: 0;
+}
+
+.widgets-AccountPanel input[type="text"] {
+ height: 24px;
+}
+
+.widgets-AccountPanel button:focus {
+ box-shadow: 0 0 5px #577894;
+}
+
+.widgets-AccountPanel button.share {
+ border: 1px solid #57BCFF;
+ color: #005796;
+ font-weight: bold;
+ text-shadow: 0 1px 1px #47AFF8;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0097F1), color-stop(100%, #545454));
+ background-image: -moz-linear-gradient(center top , #23AEFF 0%, #0097F1 100%);
}
/*
diff --git a/web/dev/tests/1/chrome.html b/web/dev/tests/1/chrome.html
index 7179bc5..b57c4bd 100644
--- a/web/dev/tests/1/chrome.html
+++ b/web/dev/tests/1/chrome.html
@@ -3,35 +3,80 @@
Fake Chrome Container
-
Fake Chrome Container
-
-
+
Share Panel
+
+
+
+
+
+
+