Refs #1490

 * all INPUT, SELECT, TEXTAREA, submit use same design across admin UI and main UI
 * fixed other small ui issues
 * removed brown title next to Piwik on all pages, as it was too ugly to look at

core/View.php

@@ -114,7 +114,6 @@ public function render()
 	{
 		try {
 			$this->currentModule = Piwik::getModule();
-			$this->currentPluginName = Piwik::getCurrentPlugin()->getClassName();
 			$this->userLogin = Piwik::getCurrentUserLogin();
 
 			$sites = Piwik_SitesManager_API::getInstance()->getSitesWithAtLeastViewAccess(Zend_Registry::get('config')->General->site_selector_max_sites);

plugins/CoreAdminHome/templates/generalSettings.tpl

@@ -100,15 +100,14 @@
 		<tr>
 			<td><label for="mailPassword">{'General_SmtpPassword'|translate}</label><br>
 				<span class="form-description">{'General_OnlyEnterIfRequiredPassword'|translate}<br/>
-				{'General_WarningPasswordStored'|translate}</span>
+				{'General_WarningPasswordStored'|translate:"<strong>":"</strong>"}</span>
 			</td>
 			<td>
 				<input type="password" id="mailPassword" value = "{$mail.password}" >
 			</td>
 		</tr>
 	</table>
 </div>
-</div>
 
 </table>
 <input type="submit" value="{'General_Save'|translate}" id="generalSettingsSubmit" class="submit" />

plugins/CoreAdminHome/templates/styles.css

@@ -1,9 +1,6 @@
 .admin img {
 	vertical-align: baseline;
 }
-textarea {
-	font-size: 1em;
-}
 .admin a {
 	color: black;
 }
@@ -64,21 +61,6 @@ table.admin  tbody td:hover, table.admin  tbody th:hover {
 	text-decoration: none;
 }
 
-#submit input {
-	font-size: 2em;
-	border-top: 2px solid #8cb648;
-	border-left: 2px solid #8cb648;
-	border-bottom: 2px solid #4a6026;
-	border-right: 2px solid #4a6026;
-	background-color: #6c8c37;
-	color: #fff;
-}
-
-#submit {
-	padding-top: 10px;
-	padding-left: 70px;
-}
-
 .warning {
 	border: 1px dotted gray;
 	padding: 15px;
@@ -106,20 +88,6 @@ table.admin  tbody td:hover, table.admin  tbody th:hover {
 	line-height:140%;
 	padding-bottom:20px;
 }
-.admin textarea, .admin input, .admin select {
-	background-color:#FFFFFF;
-	border-color:#939EA5;
-	-moz-border-radius:4px;
-	-webkit-border-radius:4px;
-	border-style:solid;
-	border-width:1px;
-	margin:1px;
-	padding:3px;
-}
-
-input[disabled] {
-	background-color:#F7F7F7;
-}
 .adminTable {
 	border-width: 1px;
 	border-style: solid;

plugins/CoreHome/templates/autocomplete.js

@@ -1,23 +1,23 @@
 
 $('.but').bind('click', function(e)
 {
-	if($('#keyword').val() != '')
-		$('#keyword').autocomplete('search', $('#keyword').val() + '%%%');
+	if($('#websiteSearch').val() != '')
+		$('#websiteSearch').autocomplete('search', $('#websiteSearch').val() + '%%%');
 	return false;
 });
 $(function() {
-	$("#keyword").click(function(e)
+	$("#websiteSearch").click(function(e)
 	{
 		$(this).val('');
 	});
-	$('#keyword').keyup(function(e)
+	$('#websiteSearch').keyup(function(e)
 	{
 		if(parseInt($(this).val().length) == 0)
 		{
 			reset();
 		}
 	});
-	$("#keyword").autocomplete({
+	$("#websiteSearch").autocomplete({
 		minLength: 1,
 		source: '?module=SitesManager&action=getSitesForAutocompleter',
 		select: function(event, ui) {
@@ -33,7 +33,7 @@ $(function() {
 			return false;
 		},
 		focus: function(event, ui) {
-			$('#keyword').val(ui.item.name);
+			$('#websiteSearch').val(ui.item.name);
 			return false;
 		},
 		search: function(event, ui) {
@@ -64,7 +64,7 @@ $(function() {
 	});
 	function reset()
 	{
-		$('#keyword').val('');
+		$('#websiteSearch').val('');
 		$('.custom_select_ul_list').show();
 		$(".ui-autocomplete").hide();
 		$("#reset").hide();

plugins/CoreHome/templates/datatable.css

@@ -12,6 +12,9 @@
 	z-index:1;
 }
 
+.widget p {
+	margin-left:10px;
+}
 /* container of each table */
 .dataTableWrapper {
 	width: 450px;

plugins/CoreHome/templates/datatable.js

@@ -697,15 +697,15 @@ dataTable.prototype =
 			truncationOffset = 0;
 		}
 		var truncationLimit = 50;
-/*		Different truncation limit for different datatable types?
+		// Different truncation limit for different datatable types?
  		// in a subtable
 		if(typeof self.param.idSubtable != 'undefined') {}
 		// when showing all columns
 		if(typeof self.param.idSubtable == 'undefined'
-			&& self.param.viewDataTable == 'tableAllColumns') {}
+			&& self.param.viewDataTable == 'tableAllColumns') { truncationLimit = 25; }
 		// when showing all columns in a subtable, space is restricted
 		else if(self.param.viewDataTable == 'tableAllColumns') {}		
-*/		
+
 		truncationLimit += truncationOffset;
 
 		$(domElemToTruncate).truncate(truncationLimit);
@@ -920,9 +920,6 @@ actionDataTable.prototype =
 				// label (first column of a data row) or not
 				$("td:first-child:odd", this).addClass('label labeleven');
 				$("td:first-child:even", this).addClass('label labelodd');
-				// we truncate the labels columns from the second row
-//				$("td:first-child", this).truncate(30);
-//			    $('.truncated', this).tooltip();
 			})
 			.removeClass('rowToProcess');
 	},

plugins/CoreHome/templates/logo.tpl

@@ -2,5 +2,4 @@
 <a href="index.php" title="Piwik # {'General_OpenSourceWebAnalytics'|translate}" style="text-decoration: none;">
 	<span style="color: rgb(245, 223, 114);">P</span><span style="color: rgb(241, 175, 108);">i</span><span style="color: rgb(241, 117, 117);">w</span><span style="color: rgb(155, 106, 58);">i</span><span style="color: rgb(107, 50, 11);">k</span>
 </a>
-{if $currentModule != 'CoreHome'}<span style="padding-left:1em;font-size: 20pt; letter-spacing: -1pt; color: rgb(107, 50, 11);">&rsaquo; {$currentPluginName}</span>{/if}
 </span>

plugins/CoreHome/templates/sites_selection.tpl

@@ -1,6 +1,5 @@
 {if !$show_autocompleter}
 <div class="sites_selection">
-<span id="sitesSelectionWrapper" style="display:none;" >
 	<label>{'General_Website'|translate}</label><span id="selectedSiteName" style="display:none">{$siteName}</span>
 	<span id="sitesSelection">
 		<form action="{url idSite=null}" method="get">
@@ -61,7 +60,7 @@
 			</div>
 
             <div class="custom_select_search">
-                <input type="text" length="15" id="keyword" class="inp">
+                <input type="text" length="15" id="websiteSearch" class="inp">
                 <input type="hidden" class="max_sitename_width" id="max_sitename_width" value="130" />
                 <input type="submit" value="Search" class="but">
 				<img title="Clear" id="reset" style="position: relative; top: 4px; left: -44px; cursor: pointer; display: none;" src="plugins/CoreHome/templates/images/reset_search.png"/>
@@ -72,6 +71,8 @@
 	{literal}<script type="text/javascript">
 $("#sitesSelectionSearch .custom_select_main_link").click(function(){
 	$("#sitesSelectionSearch .custom_select_block").toggleClass("custom_select_block_show");
+	
+		$('#websiteSearch').focus();
 	return false;
 });
     </script>{/literal}

plugins/Dashboard/templates/dashboard.css

@@ -228,14 +228,6 @@ ol#menuList li, ul#widgetList li .button{
 }
 #addWidget .widget_button .arr{ vertical-align:top; }
 
-.widget input {
-	background: #F7F7FF none repeat scroll 0% 50%;
-	border: 1px solid #B3B3B3;
-	color: #0C183A;
-	font-size: 0.7em;
-	padding: 2px;
-}
-
 #widgetChooser {
 	padding-top:10px;
 }

plugins/ExampleFeedburner/templates/feedburner.tpl

@@ -63,7 +63,7 @@ $(document).ready(function(){
 </table>
 {/if}
 
-<center>
+<div class='center entityContainer'>
 	<input id="feedburnerName" type="text" value="{$feedburnerFeedName}" />
-	<input id="feedburnerSubmit" type="submit" value="{'General_Ok'|translate}" />
-</center>
+	<input class="submit" id="feedburnerSubmit" type="submit" value="{'General_Ok'|translate}" />
+</div>

plugins/ExamplePlugin/ExamplePlugin.php

@@ -74,8 +74,8 @@ class Piwik_ExamplePlugin_Controller extends Piwik_Controller
 	 */
 	function helloWorld()
 	{
-		echo "Hello world! <br />";
-		echo "Happy coding with Piwik :)";
+		echo "<p>Hello world! <br />";
+		echo "Happy coding with Piwik :)</p>";
 	}
 
 	/**
@@ -85,11 +85,12 @@ function helloWorld()
 	 */
 	function exampleWidget()
 	{
-		echo "Hello world! <br /> You can output whatever you want in widgets, and put them on dashboard or everywhere on the web (in your blog, website, etc.).
+		echo "<p>Hello world! <br /> You can output whatever you want in widgets, and put them on dashboard or everywhere on the web (in your blog, website, etc.).
 		<br />Widgets can include graphs, tables, flash, text, images, etc.
 		<br />It's very easy to create a new plugin and widgets in Piwik. Have a look at this example file (/plugins/ExamplePlugin/ExamplePlugin.php).
 		<div id='happycoding'><i>Happy coding!</i></div>
 		<div id='jsenabled'>You can easily use Jquery in widgets</div>
+		<p>
 		<script type=\"text/javascript\">$('#happycoding').hide().fadeIn(5000);$('#jsenabled').hide().css({'color':'red'}).fadeIn(10000);</script>";
 	}
 

plugins/Feedback/templates/index.tpl

@@ -56,7 +56,7 @@ $(function() {
       	<label>{'Feedback_MyMessage'|translate}<br /><i>{'Feedback_DetailsPlease'|translate}</i></label>
         <textarea name="body" cols="57" rows="10"></textarea><br />
       	<label><a href="#" id="feedback-home"><img src="plugins/Feedback/images/go-previous.png" border="0" title="{'General_Previous'|translate}" alt="[{'General_Previous'|translate}]" /></a></label>
-      <input id="feedback-form-submit" class="feedback-submit" type="submit" value="{'Feedback_SendFeedback'|translate}" />
+      <input id="feedback-form-submit" type="submit" class='submit' value="{'Feedback_SendFeedback'|translate}" />
     </form>
   </div>
   <div id="feedback-sent" style="display:none;">

plugins/Feedback/templates/styles.css

@@ -1,25 +1,10 @@
-#feedback-form input, #feedback-form textarea, #feedback-sent textarea, #feedback-form select{
-	font-family: Arial, Helvetica, sans-serif;
-	font-size:12px;
-	border:1px solid #d4d4d4;
-	margin:0 0 20px 0;
-	padding:5px 12px;
-	border-radius:2px;
-	-moz-border-radius:2px;
-	-webkit-border-radius:2px;
-	color:#255792;
-	background: url("../../../themes/default/images/inp_bg.png") repeat-x 0 0;
-
-}
-
 #feedback-faq, #feedback-form, #feedback-sent {
 	font-family: Arial, Helvetica, sans-serif;
 	color:#5e5e5c;
 	font-size:14px;
 	line-height:24px;
 	padding:0px 20px 15px 0;
 }
-
 #feedback-faq strong, #feedback-sent strong {
 	color:#5e5e5c;
 }
@@ -54,20 +39,6 @@
 	padding: 10px;
 }
 
-#feedback-form .feedback-submit{
-	background: #B5B0A7 url("../../../themes/default/images/dashboard_h_bg_hover.png") repeat-x 0 0;
-	color:#fff;
-	border:0;
-	padding:5px 20px;
-	margin:0;
-	border-radius:3px;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
-	cursor:pointer; 
-	display:inline-block; 
-	margin:0;
-}
-
 #feedback-form { font-size:12px; line-height:18px;}
 #feedback-form label{ float:left; width:135px; padding:4px 15px 0 0; text-align:right; position:relative;  }
 #feedback-form label i{ font-style:normal; color:#cbcbcb; }

plugins/Goals/templates/GoalForm.js

@@ -2,9 +2,9 @@
 function showAddNewGoal()
 {
 	hideForms();
-	$("#entityAddContainer").show();
+	$(".entityAddContainer").show();
 	showCancel();
-	piwikHelper.lazyScrollTo("#entityContainer", 400);
+	piwikHelper.lazyScrollTo(".entityContainer", 400);
 	return false;
 }
 
@@ -13,13 +13,13 @@ function showEditGoals()
 	hideForms();
 	$("#entityEditContainer").show();
 	showCancel();
-	piwikHelper.lazyScrollTo("#entityContainer", 400);
+	piwikHelper.lazyScrollTo(".entityContainer", 400);
 	return false;
 }
 
 function hideForms()
 {
-	$("#entityAddContainer").hide();
+	$(".entityAddContainer").hide();
 	$("#entityEditContainer").hide();
 }
 
@@ -97,7 +97,7 @@ function bindGoalForm()
 function getAjaxDeleteGoal(idGoal)
 {
 	var ajaxRequest = piwikHelper.getStandardAjaxConf('goalAjaxLoading');
-	piwikHelper.lazyScrollTo("#entityContainer", 400);
+	piwikHelper.lazyScrollTo(".entityContainer", 400);
 
 	var parameters = {};
 	parameters.idSite = piwik.idSite;
@@ -113,7 +113,7 @@ function getAjaxDeleteGoal(idGoal)
 function getAjaxAddGoal()
 {
 	var ajaxRequest = piwikHelper.getStandardAjaxConf('goalAjaxLoading');
-	piwikHelper.lazyScrollTo("#entityContainer", 400);
+	piwikHelper.lazyScrollTo(".entityContainer", 400);
 	var parameters = {};
 
 	parameters.idSite = piwik.idSite;

plugins/Goals/templates/add_edit_goal.tpl

@@ -19,7 +19,7 @@
 {ajaxErrorDiv}
 {ajaxLoadingDiv id=goalAjaxLoading}
 
-<div id="entityContainer">
+<div class="entityContainer">
 	{if !isset($onlyShowAddNewGoal)}
 		{include file="Goals/templates/list_goal_edit.tpl"}
 	{/if}

plugins/Goals/templates/form_add_goal.tpl

@@ -1,4 +1,4 @@
-<div id='entityAddContainer' style="display:none;">
+<div class='entityAddContainer' style="display:none;">
 <form>
 <table class="dataTable entityTable">
 	<thead>
@@ -68,6 +68,6 @@
 </table>
         <input type="hidden" name="methodGoalAPI" value="" />	
         <input type="hidden" name="goalIdUpdate" value="" />
-        <input type="submit" value="" name="submit" id="goal_submit" class="but_submit" />
+        <input type="submit" value="" name="submit" id="goal_submit" class="submit" />
 </form>
 </div>

plugins/PDFReports/templates/add.tpl

@@ -1,4 +1,4 @@
-<div id='entityAddContainer' style='display:none'>
+<div class='entityAddContainer' style='display:none'>
 <div class='entityCancel'>
 	{'PDFReports_CancelAndReturnToPDF'|translate:"<a class='entityCancelLink'>":"</a>"}
 </div>
@@ -80,7 +80,7 @@
 	</tbody>
 </table>
 <input type="hidden" id="report_idreport" value="">
-<input type="submit" value="{'PDFReports_CreatePDFReport'|translate}" name="submit" id="report_submit" class="but_submit" />
+<input type="submit" value="{'PDFReports_CreatePDFReport'|translate}" name="submit" id="report_submit" class="submit" />
 </form>
 <div class='entityCancel'>
 	{'General_OrCancel'|translate:"<a class='entityCancelLink'>":"</a>"}

plugins/PDFReports/templates/index.tpl

@@ -9,7 +9,7 @@
 <div class="centerLargeDiv">
 	<h2>{'PDFReports_ManagePdfReports'|translate}</h2>
 
-	<div id="entityContainer">
+	<div class="entityContainer">
 		{ajaxErrorDiv}
 		{ajaxLoadingDiv}
 		{include file="PDFReports/templates/list.tpl"}