Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

option page design #389

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

option page design #389

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 71 additions & 68 deletions options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@

<head>
<link rel="stylesheet" type="text/css" href="css/options.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

<link rel="stylesheet" type="text/css" href="css/colorpicker/colorpicker.css" />
<script src="lib/3rdparty/jquery.js"></script>
<script src="lib/3rdparty/colorpicker.js"></script>
Expand All @@ -18,7 +20,8 @@
</head>
<body>

<h1 class="i18n" id="options_title">Silver Bird Options</h1>
<div class="hero-unit" id="options_title" style="width: 860px;margin: 0 auto;">
<h1 style="margin-top: -38px;margin-bottom: 26px;color: silver;text-align:center;"><a href="http://cezarsa.github.com/silver_bird/" target="_blank" style="text-decoration: none;">Silver Bird Options</a></h1>

<div id="saved_notice">
<span class="i18n" id="conf_saved">Your configuration has been successfully saved!</span>
Expand All @@ -28,8 +31,8 @@ <h1 class="i18n" id="options_title">Silver Bird Options</h1>
(This will reset your unread tweets count.)
</span>
<br>
<input type="button" class="i18n" id="Yes" value="Yes">
<input type="button" class="i18n" id="No" value="No">
<input type="button" class="i18n btn btn-info btn-small" id="Yes" value="Yes">
<input type="button" class="i18n btn btn-danger btn-small" id="No" value="No">
</div>
</div>
<div id="main_area">
Expand All @@ -39,7 +42,7 @@ <h1 class="i18n" id="options_title">Silver Bird Options</h1>
<a id="nerds_link" href="#" class="i18n">API Hits stats (for nerds)</a>
<canvas id="nerds" width="650" height="500" style="display: none;"></canvas>
</p>
<fieldset>
<div class="alert alert-info clearfix">
<legend id="g_ui" class="i18n">UI</legend>
<label for="name_attribute" id="l_name_attribute" class="i18n">Name in tweets:</label>
<select name="name_attribute">
Expand Down Expand Up @@ -73,30 +76,31 @@ <h1 class="i18n" id="options_title">Silver Bird Options</h1>
<label for="hover_timeout" class="i18n" id="l_hover_timeout">Hover to read time (ms):</label>
<input type="text" name="hover_timeout" validator="required,number,positive"><br>
<label for="show_expanded_urls" class="i18n" id="l_show_expanded_urls">Expand shortened URLs:</label>
<input type="checkbox" id="show_expanded_urls" name="show_expanded_urls" /><br>
<input type="checkbox" id="show_expanded_urls" name="show_expanded_urls" style="margin-top: -11px;"/><br>
<label for="reply_all" class="i18n" id="l_reply_all">Reply to all mentioned:</label>
<input type="checkbox" id="reply_all" name="reply_all" /><br/>
<input type="checkbox" id="reply_all" name="reply_all" style="margin-top: -10px;" /><br/>
<label for="show_hits_in_popup" class="i18n" id="l_show_hits_in_popup">Show API hits count:</label>
<input type="checkbox" id="show_hits_in_popup" name="show_hits_in_popup" /><br/>
<input type="checkbox" id="show_hits_in_popup" name="show_hits_in_popup" style="margin-top: -8px;" /><br/>
<label for="show_user_autocomplete" class="i18n" id="l_show_user_autocomplete">Autocomplete usernames:</label>
<input type="checkbox" style="margin-bottom: 7px;" id="show_user_autocomplete" name="show_user_autocomplete" /><br/>
<input type="checkbox" id="show_user_autocomplete" name="show_user_autocomplete" style="margin-top: -15px;"/><br/>

<label id="l_icon_color" class="i18n">Icon color:</label>
<canvas name="idle_color" width="19" height="19" class="color_selector" must_restart></canvas><br/>
<canvas name="idle_color" width="19" height="19" style="margin-bottom: 2px;" class="color_selector" must_restart></canvas><br/>

<label for="tweets_color_only_unified" id="l_tweets_color_only_unified" class="i18n">Colors only in unified:</label>
<input type="checkbox" name="tweets_color_only_unified" /><br/>
<table class="tweet_color">
<input type="checkbox" name="tweets_color_only_unified" style="margin-top: -12px;"/><br/>
<table class="table table-bordered">
<tbody>
<tr>
<th></th>
<th class="i18n" id="w_Home">Home</th>
<th class="i18n" id="w_Mentions">Mentions</th>
<th class="i18n" id="w_DM">DMs</th>
<th class="i18n" id="w_Lists">Lists</th>
<th class="i18n" id="w_Favorites">Favorites</th>
<th class="i18n" id="w_Search">Search</th>
<tr>
<td class="label i18n" id="l_tweet_color">Tweet color:</td>
<th class="i18n" id="w_Home" style="margin-left: 105px;">Home</th>
<th class="i18n" id="w_Mentions" style="margin-left: 46px;">Mentions</th>
<th class="i18n" id="w_DM" style="margin-left: 43px;">DMs</th>
<th class="i18n" id="w_Lists" style="margin-left: 60px;">Lists</th>
<th class="i18n" id="w_Favorites" style="margin-left: 46px;">Favorites</th>
<th class="i18n" id="w_Search" style="margin-left: 36px;">Search</th>
</tr>
<td class="i18n" id="l_tweet_color">Tweet color:</td>
<td>
<div class="color_selector checkerboard"></div>
<div name="home_tweets_color" class="color_selector"></div>
Expand All @@ -122,67 +126,70 @@ <h1 class="i18n" id="options_title">Silver Bird Options</h1>
<div name="search_tweets_color" class="color_selector"></div>
</td>
</tr>
</tbody>
</table><br>
<input type="button" value="Reset Popup Size" class="i18n" id="btn_reset_popup_size">
</fieldset>
<input type="button" value="Reset Popup Size" class="i18n btn" id="btn_reset_popup_size">
</div>

<fieldset>
<div class="alert alert-error clearfix">
<legend class="i18n" id="g_notifications">Notifications</legend>
<table class="notifications">
<table class="table table-striped">
<tr>
<th></th>
<th class="i18n" id="l_tweet_notificacion">Tweet Notification</th>
<th class="i18n" id="l_change_icon">Change Icon</th>
<th class="i18n" id="l_icon_color_column">Icon Color</th>
<tr>
<td class="label i18n" id="notif_home">Home:</td>
<td class="i18n" id="notif_home">Home:</td>
<td><input type="checkbox" name="home_on_page"></td>
<td><input type="checkbox" name="home_icon"></td>
<td><canvas name="home_color" width="19" height="19" class="color_selector"></canvas></td>
</tr>
<tr>
<td class="label i18n" id="notif_mentions">Mentions:</td>
<td class="i18n" id="notif_mentions">Mentions:</td>
<td><input type="checkbox" name="mentions_on_page"></td>
<td><input type="checkbox" name="mentions_icon"></td>
<td><canvas name="mentions_color" width="19" height="19" class="color_selector"></canvas></td>
</tr>
<tr>
<td class="label i18n" id="notif_dms">DMs:</td>
<td class="i18n" id="notif_dms">DMs:</td>
<td><input type="checkbox" name="dms_on_page"></td>
<td><input type="checkbox" name="dms_icon"></td>
<td><canvas name="dms_color" width="19" height="19" class="color_selector"></canvas></td>
</tr>
<tr>
<td class="label i18n" id="notif_lists">Lists:</td>
<td class="i18n" id="notif_lists">Lists:</td>
<td><input type="checkbox" name="lists_on_page"></td>
<td><input type="checkbox" name="lists_icon"></td>
<td><canvas name="lists_color" width="19" height="19" class="color_selector"></canvas></td>
</tr>
<tr>
<td class="label i18n" id="notif_search">Search:</td>
<td class="i18n" id="notif_search">Search:</td>
<td><input type="checkbox" name="search_on_page"></td>
<td><input type="checkbox" name="search_icon"></td>
<td><canvas name="search_color" width="19" height="19" class="color_selector"></canvas></td>
</tr>
</table><br>

<label for="tweets_notification_style" class="i18n" id="l_tweets_notification_style">Notification Style:</label>
<input type="radio" name="tweets_notification_style" value="on_page" id="noti_on_page"> <label for="noti_on_page" class="radio_opt i18n" id="l_noti_on_page">Notify on Page</label>
<input type="radio" name="tweets_notification_style" value="desktop" id="noti_desktop"> <label for="noti_desktop" class="radio_opt i18n" id="l_noti_desktop">Desktop Notifications</label><br>
<input type="radio" name="tweets_notification_style" value="on_page" id="noti_on_page" style="float: left;
margin-right: 7px;"> <label for="noti_on_page" class="radio_opt i18n" id="l_noti_on_page" style="width: 160px;">Notify on Page</label>
<input type="radio" name="tweets_notification_style" value="desktop" id="noti_desktop" style="float: left;
margin-right: 7px;"> <label for="noti_desktop" class="radio_opt i18n" id="l_noti_desktop" style="width: 160px;">Desktop Notifications</label><br>
<label for="notification_fade_timeout" class="i18n" id="l_notification_fade_timeout">Notification Timeout (s):</label>
<input type="text" name="notification_fade_timeout" validator="required,number,positive" converter="RefreshInterval"><br>

<label for="notification_max_popups" class="i18n" id="l_notification_max_popups">Notifications at once (-1: all):</label>
<input type="text" name="notification_max_popups" validator="required,number"><br>

<label for="notify_retweets" class="i18n" id="l_notify_retweets">Notify retweets of my tweets?</label>
<input type="radio" name="notify_retweets" value="always" id="notify_rt_always"> <label for="notify_rt_always" class="radio_opt i18n" id="l_notify_rt_always">Always</label>
<input type="radio" name="notify_retweets" value="only_first" id="notify_rt_only_first"> <label for="notify_rt_only_first" class="radio_opt i18n" id="l_notify_rt_only_first">First One Only</label>
<input type="radio" name="notify_retweets" value="never" id="notify_rt_never"> <label for="notify_rt_never" class="radio_opt i18n" id="l_notify_rt_never">Never</label><br>
<input type="radio" name="notify_retweets" value="always" id="notify_rt_always" style="float: left;margin-right: 4px;"> <label for="notify_rt_always" class="radio_opt i18n" id="l_notify_rt_always" style="width: 100px;">Always</label>
<input type="radio" name="notify_retweets" value="only_first" id="notify_rt_only_first" style="float: left;margin-right: 4px;"> <label for="notify_rt_only_first" class="radio_opt i18n" id="l_notify_rt_only_first" style="width: 155px;">First One Only</label>
<input type="radio" name="notify_retweets" value="never" id="notify_rt_never" style="float: left;margin-right: 4px;"> <label for="notify_rt_never" class="radio_opt i18n" id="l_notify_rt_never">Never</label><br>

</fieldset>
</div>

<fieldset>
<div class="alert alert-warning clearfix">
<legend class="i18n" id="g_shortener">Shortener</legend>
<label for="url_shortener" class="i18n" id="l_url_shortener">URL Shortener:</label>
<select name="url_shortener"></select><br>
Expand All @@ -205,106 +212,100 @@ <h1 class="i18n" id="options_title">Silver Bird Options</h1>
<input type="checkbox" name="shortener_oauth"><br/>
</p>
<label for="share_include_title" class="i18n" id="l_share_include_title">Include page title (sharing):</label>
<input type="checkbox" name="share_include_title"><br>
</fieldset>
<input type="checkbox" name="share_include_title" style="margin-bottom: 14px;"><br>

<fieldset>

<legend class="i18n" id="g_image_service">Image Service</legend>
<label for="url_shortener" class="i18n" id="l_image_up_service">Image Upload Service:</label>
<select name="image_upload_service"></select>
</fieldset>


<fieldset>
<legend class="i18n" id="g_trending_topics">Trending Topics</legend>
<label for="trending_topics_woeid" class="i18n" id="l_trending_topics_woeid">Trending Topics Locale:</label>
<select name="trending_topics_woeid"></select>
</fieldset>
</div>

<fieldset>
<div class="alert alert-success clearfix">
<legend class="i18n" id="g_timelines">Timelines</legend>
<p class="notice i18n htmlSafe" style="text-align: center; color: black;" id="notice_api_hits">
<p class="well well-small i18n htmlSafe" style="text-align: center; color: black;" id="notice_api_hits">
You should keep API hits <span style="color: red;">below <span class="__hourly_limit"></span></span>! Otherwise Silver Bird will stop working properly and timelines won't update anymore.<br>
<span style="color: red;">Remember</span> that if you're using multiple Twitter clients you'll need to keep your API hits even lower.
</p>
<p class="hits_notice">
<span class="i18n" id="l_hits_notice">API hits per hour: </span><span id="predicted_hits_count"></span> / <span class="__hourly_limit"></span>
</p>
<table class="timelines">
<table class="table table-bordered">
<tr>
<th></th>
<th id="l_visible" class="i18n">Visible</th>
<th id="l_refresh_interval" class="i18n">Refresh Interval (s)</th>
<th id="l_include_in_unified" class="i18n">Include in unified timeline</th>
<tr>
<td class="label i18n" id="l_unified_timeline">Unified Timeline:</td>
<td class="i18n" id="l_unified_timeline">Unified Timeline:</td>
<td><input type="checkbox" name="unified_visible" validator="unifiedValidator"></td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td class="label i18n" id="notif_home">Home:</td>
<td class="i18n" id="notif_home">Home:</td>
<td><input type="checkbox" name="home_visible"></td>
<td><input type="text" name="home_refresh_interval" validator="required,number,minRefresh" converter="RefreshInterval"></td>
<td><input type="checkbox" name="home_include_unified"></td>
</tr>
<tr>
<td class="label i18n" id="notif_mentions">Mentions:</td>
<td class="i18n" id="notif_mentions">Mentions:</td>
<td><input type="checkbox" name="mentions_visible"></td>
<td><input type="text" name="mentions_refresh_interval" validator="required,number,minRefresh" converter="RefreshInterval"></td>
<td><input type="checkbox" name="mentions_include_unified"></td>
</tr>
<tr>
<td class="label i18n" id="notif_dms">DM:</td>
<td class="i18n" id="notif_dms">DM:</td>
<td><input type="checkbox" name="dms_visible"></td>
<td><input type="text" name="dms_refresh_interval" validator="required,number,minRefresh" converter="RefreshInterval"></td>
<td><input type="checkbox" name="dms_include_unified"></td>
</tr>
<tr>
<td class="label i18n" id="notif_lists">Lists:</td>
<td class="i18n" id="notif_lists">Lists:</td>
<td><input type="checkbox" name="lists_visible"></td>
<td><input type="text" name="lists_refresh_interval" validator="required,number,minRefresh" converter="RefreshInterval"></td>
<td><input type="checkbox" name="lists_include_unified"></td>
</tr>
<tr>
<td class="label i18n" id="notif_search">Search:</td>
<td class="i18n" id="notif_search">Search:</td>
<td><input type="checkbox" name="search_visible"></td>
<td><input type="text" name="search_refresh_interval" validator="required,number,minRefresh" converter="RefreshInterval"></td>
<td><input type="checkbox" name="search_include_unified"></td>
</tr>
<tr>
<td class="label i18n" id="tml_favorites">Favorites:</td>
<td class="i18n" id="tml_favorites">Favorites:</td>
<td><input type="checkbox" name="favorites_visible"></td>
<td><input type="text" name="favorites_refresh_interval" validator="required,number,minRefresh" converter="RefreshInterval"></td>
<td><input type="checkbox" name="favorites_include_unified"></td>
</tr>
<tr>
<td class="label i18n" id="l_blocked_users">Blocked Users:</td>
<td class="i18n" id="l_blocked_users">Blocked Users:</td>
<td>-</td>
<td><input type="text" name="blockedusers_refresh_interval" validator="required,number,minRefresh" converter="RefreshInterval"></td>
<td>-</td>
</tr>
</table>
<p id="notice_right_click_change" class="notice i18n" style="color: black;">
<p id="notice_right_click_change" class="well well-small i18n" style="color: black;">
* Hey, now you can use the right-click context menu to change most of this settings directly into the popup window. Just get
out of here! :)
</p>
</fieldset>

<fieldset>
<legend class="i18n" id="g_timelines">Timelines</legend>
<label for="tweets_per_page" class="i18n" id="l_tweets_per_page">Tweets per Page:</label>
<input type="text" name="tweets_per_page" validator="required,number,positive" must_restart><br>
<label for="max_cached_tweets" class="i18n" id="l_max_cached_tweets">Max Shown Tweets:</label>
<input type="text" name="max_cached_tweets" validator="required,number,positive" must_restart><br>
</fieldset>
</div>

<fieldset>
<div class="well">
<legend class="i18n" id="g_microblogging_service">Microblogging Service</legend>
<input type="radio" name="microblogging_service" value="twitter" id="service_twitter" must_restart> <label for="service_twitter" class="radio_opt">Twitter</label>
<input type="radio" name="microblogging_service" value="identica" id="service_identica" must_restart> <label for="service_identica" class="radio_opt">identi.ca</label>
</fieldset>
<input type="radio" name="microblogging_service" value="twitter" style="float: left;margin-right: 4px;" id="service_twitter" must_restart> <label for="service_twitter" class="radio_opt">Twitter</label>
<input type="radio" name="microblogging_service" value="identica" style="float: left;margin-right: 4px;" id="service_identica" must_restart> <label for="service_identica" class="radio_opt">identi.ca</label>

<fieldset>
<legend class="i18n" id="g_advanced">Advanced</legend>

<label for="request_timeout" class="i18n" id="l_request_timeout">Request Timeout (ms):</label>
Expand All @@ -315,7 +316,7 @@ <h1 class="i18n" id="options_title">Silver Bird Options</h1>
<input type="text" name="base_oauth_url" style="width: 300px;" validator="required,url" must_restart><br>

<label for="same_signing_urls" class="i18n" id="l_same_signing_urls">Same signing URLs:</label>
<input type="checkbox" name="same_signing_urls"><br>
<input type="checkbox" name="same_signing_urls" style="margin-top: -12px;"><br>

<label for="base_signing_url" class="i18n" id="l_base_signing_url">API Signing URL:</label>
<input type="text" name="base_signing_url" style="width: 300px;" validator="required,url" must_restart><br>
Expand All @@ -326,20 +327,22 @@ <h1 class="i18n" id="options_title">Silver Bird Options</h1>
<input type="text" name="base_search_url" style="width: 300px;" validator="required,url" must_restart><br>

<label for="use_streaming_api" class="i18n" id="l_use_streaming_api">Use streaming API:</label>
<input type="checkbox" name="use_streaming_api" must_restart><br>
<input type="checkbox" style="margin-top: -10px;" name="use_streaming_api" must_restart><br>

<label for="user_stream_url" class="i18n" id="l_user_stream_url">User Stream URL:</label>
<input type="text" name="user_stream_url" style="width: 300px;" validator="required,url" must_restart><br>
</fieldset>


<br>
<div id="buttons_area">
<input type="button" class="i18n" value="Save" id="btn_save">
<input type="button" class="i18n" value="Reset" id="btn_reset">
<input type="button" class="i18n" value="Reset to default" id="btn_default">
<input type="button" class="i18n btn btn-info" value="Save" id="btn_save">
<input type="button" class="i18n btn" value="Reset" id="btn_reset">
<input type="button" class="i18n btn btn-danger" value="Reset to default" id="btn_default">
<a class="btn btn-inverse" href="locales.html">Locales Report</a>
</div>
</div>
</div>

<a class="locales_report" href="locales.html">Locales Report</a>
</div>
</body>
</html>