PCSS Redbasic

5 files changed, 374 insertions, 48 deletions

diff --git a/view/theme/redbasic/css/fancy.css b/view/theme/redbasic/css/fancy.css
new file mode 100644
index 000000000..f5316e31e
--- /dev/null
+++ b/view/theme/redbasic/css/fancy.css
@@ -0,0 +1,184 @@
+/* There's probably some stuff in here we don't need, and maybe some missing stuff we do need.  We can clean it up incrementaly, just get the heavy lifting done for now */
+
+aside {
+border-radius: 0px 0px 20px 0px;}
+
+
+.tab {
+    height: auto;
+    background-color: #f00;
+    color: #fff !important;
+    font-weight: bold;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 20px;
+    margin: 0;
+    width: auto;
+    margin-left: 8px;
+    padding: 4px;
+    text-align: center;
+}
+.tab:hover, .tab.active:hover {
+    background: #d00;
+    color: #fff; 
+ ;
+}
+.tab:active {
+    background: #fff;
+    color: #f00;
+}
+.tab.active {
+    background: #f00;
+    color: #fff; 
+    box-shadow: 3px 3px 3px #333 inset;
+    padding: 5px; /* strageness of the human mind - has to be larger than inactive tabs, or it looks smaller than them */
+}
+
+
+
+/* Give the top level post bigger shadows than the comments.  This makes them appear "higher" and the comments "lower", which separates posts from each other reasonably without literally drawing a line under it */
+
+.wall-item-content-wrapper {
+	position: relative;
+	background: #fff;
+	border-radius: 10px;
+	box-shadow: 8px 8px 8px #000;
+	border: 1px solid #eec;
+}
+
+.thread-wrapper .thread-wrapper {
+	margin-left: 50px;
+}
+
+.thread-end-wrapper {
+    margin-left: 50px;
+}
+
+
+/* This shadow isn't quite right - not sure if it's colour or size */
+
+.wall-item-content-wrapper.comment {
+	background: #fff;
+	border-left: 1px solid #e0e0e0;
+	margin-left: 50px;
+	margin-top: 15px;
+	box-shadow: 5px 5px 5px #222;
+
+}
+
+.wall-item-info {
+	display: block;
+	float: left;
+	width:110px;
+	margin-right:10px;
+}
+.comment .wall-item-info {
+	width: 70px;
+}
+
+.wall-item-photo-wrapper {
+	margin-top: 10px;
+	margin-left: 10px;
+	margin-bottom: 10px;
+	width: 100px;
+}
+
+.wall-item-content img {
+  max-height: 95% !important;
+  max-width: 95% !important;
+  box-shadow: 8px 8px 8px #666;
+}
+
+.wall-item-content img.smiley {
+  box-shadow: none;
+}
+
+.wall-item-like:hover, .wall-item-dislike:hover{
+opacity: 1;
+}
+
+.wall-item-author {
+	margin-top: 10px;
+}
+
+.comment-edit-wrapper {
+	margin-top: 15px;
+	background: #ffffff;
+	margin-left: 50px;
+}
+
+.comment-edit-text-empty, .comment-edit-text-full {
+	float: left;
+	margin-top: 10px;
+	padding: 3px 1px 1px 3px;
+	border: 1px solid #ccc;
+	padding: 8px;
+	border-radius: 5px 5px 5px 5px;
+	box-shadow: 5px 5px 5px #666 inset;
+}
+
+.comment-edit-text-empty {
+color: gray;
+height: 1.5em;
+width: 80%; /*Too wide? */
+overflow: auto;
+margin-bottom: 10px;
+}
+
+.comment-edit-text-full {
+	color: black;
+	height: 150px;
+	width: 80%;
+	overflow: auto;
+}
+
+
+#profile-jot-text {
+	height: 20px;
+	color:#000;
+	border: 1px solid #cccccc;
+	padding: 10px;
+	width: 90%;
+	border-radius: 20px;	
+	box-shadow: 4px 4px 3px 0 #666 inset;
+}
+
+#profile-jot-submit {
+    height: auto;
+    background-color: #dd0000;
+    color: #eeeeec;
+    font-weight: bold;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    border: 2px outset #222420 !important;
+    margin: 0;
+    float: right;
+    text-shadow: 1px 1px #111;
+    width: auto;
+    box-shadow: 5px 5px 5px #444;
+}
+ul.menu-popup {
+  position: absolute;
+  display: none;
+  width: 10em;
+  background: #dd0000;
+  color: #eec;
+  padding: 0px;
+  list-style: none;
+  border-radius: 0px 0px 20px 20px;
+  z-index: 100000;
+  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+  -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+}
+ul.menu-popup a {
+  display: block;
+  color: #eec;
+  padding: 5px 10px;
+  text-decoration: none;
+}
+ul.menu-popup a:hover {
+  background-color: #eec;
+  color: #f00;
+}
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index db73e27d5..b45000a3d 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -256,7 +256,7 @@ header #banner #logo-text {
   font-size: 22px;
 }
 
-.nav-commlink {
+.nav-commlink, .nav-login-link  {
     display: block;
     height: 15px;
 	margin-top: 67px;
diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php
index ad5df57ce..24bdc7794 100644
--- a/view/theme/redbasic/php/config.php
+++ b/view/theme/redbasic/php/config.php
@@ -4,13 +4,20 @@
  */
 
 function theme_content(&$a) {
+	// Doesn't yet work for anyone other than the channel owner, and stupid mode isn't finished, so return both for now.
 	if(!local_user()) { return;	}
-
+	if(! feature_enabled(local_user(),'expert')) {return;}
+	
 	$font_size = get_pconfig(local_user(),'redbasic', 'font_size' );
 	$line_height = get_pconfig(local_user(), 'redbasic', 'line_height' );
 	$colour = get_pconfig(local_user(), 'redbasic', 'colour' );
-	
-	return redbasic_form($a, $font_size, $line_height, $colour);
+	$shadow = get_pconfig(local_user(), 'redbasic', 'shadow' );
+	$navcolour = get_pconfig(local_user(), 'redbasic', 'navcolour');
+	$displaystyle = get_pconfig(local_user(), 'redbasic', 'displaystyle');
+	$linkcolour = get_pconfig(local_user(), 'redbasic', 'linkcolour');
+	$iconset = get_pconfig(local_user(), 'redbasic', 'iconset');
+	$shiny = get_pconfig(local_user(), 'redbasic', 'shiny');
+	return redbasic_form($a, $font_size, $line_height, $colour, $shadow, $navcolour, $opaquenav, $displaystyle, $linkcolour, $iconset, $shiny);
 }
 
 function theme_post(&$a) {
@@ -20,26 +27,47 @@ function theme_post(&$a) {
 		set_pconfig(local_user(), 'redbasic', 'font_size', $_POST['redbasic_font_size']);
 		set_pconfig(local_user(), 'redbasic', 'line_height', $_POST['redbasic_line_height']);
 		set_pconfig(local_user(), 'redbasic', 'colour', $_POST['redbasic_colour']);	
+		set_pconfig(local_user(), 'redbasic', 'shadow', $_POST['redbasic_shadow']);	
+		set_pconfig(local_user(), 'redbasic', 'navcolour', $_POST['redbasic_navcolour']);
+		set_pconfig(local_user(), 'redbasic', 'displaystyle', $_POST['redbasic_displaystyle']);
+		set_pconfig(local_user(), 'redbasic', 'linkcolour', $_POST['redbasic_linkcolour']);
+		set_pconfig(local_user(), 'redbasic', 'iconset', $_POST['redbasic_iconset']);
+		set_pconfig(local_user(), 'redbasic', 'shiny', $_POST['redbasic_shiny']);
 	}
 }
 
-function theme_admin(&$a) {
-	$font_size = get_config('redbasic', 'font_size' );
-	$line_height = get_config('redbasic', 'line_height' );
-	$colour = get_config('redbasic', 'colour' );	
-	
-	return redbasic_form($a, $font_size, $line_height, $colour);
-}
+// We probably don't want these if we're having global settings, but we'll comment out for now, just in case
+//function theme_admin(&$a) {	$font_size = get_config('redbasic', 'font_size' );
+//	$line_height = get_config('redbasic', 'line_height' );
+//	$colour = get_config('redbasic', 'colour' );	
+//	$shadow = get_config('redbasic', 'shadow' );	
+//	$navcolour = get_config('redbasic', 'navcolour' );
+//	$opaquenav = get_config('redbasic', 'opaquenav' );
+//	$itemstyle = get_config('redbasic', 'itemstyle' );
+//	$linkcolour = get_config('redbasic', 'linkcolour' );
+//	$iconset = get_config('redbasic', 'iconset' );
+//	$shiny = get_config('redbasic', 'shiny' );
+//	
+//	return redbasic_form($a, $font_size, $line_height, $colour, $shadow, $navcolour, $opaquenav, $itemstyle, $linkcolour, $iconset, $shiny);
+//}
 
-function theme_admin_post(&$a) {
-	if (isset($_POST['redbasic-settings-submit'])) {
-		set_config('redbasic', 'font_size', $_POST['redbasic_font_size']);
-		set_config('redbasic', 'line_height', $_POST['redbasic_line_height']);
-		set_config('redbasic', 'colour', $_POST['redbasic_colour']);
-	}
-}
+//function theme_admin_post(&$a) {
+//	if (isset($_POST['redbasic-settings-submit'])) {
+//		set_config('redbasic', 'font_size', $_POST['redbasic_font_size']);
+//		set_config('redbasic', 'line_height', $_POST['redbasic_line_height']);
+//		set_config('redbasic', 'colour', $_POST['redbasic_colour']);
+//		set_config('redbasic', 'shadow', $_POST['redbasic_shadow']);
+//		set_config('redbasic', 'navcolour', $_POST['redbasic_navcolour']);
+//		set_config('redbasic', 'opaquenav', $_POST['redbasic_opaquenav']);
+//		set_config('redbasic', 'itemstyle', $_POST['redbasic_itemstyle']);
+//		set_config('redbasic', 'linkcolour', $_POST['redbasic_linkcolour']);
+//		set_config('redbasic', 'iconset', $_POST['redbasic_iconset']);
+//		set_config('redbasic', 'shiny', $_POST['redbasic_shiny']);
+//	}
+//}
 
-function redbasic_form(&$a, $font_size, $line_height, $colour) {
+// These aren't all used yet, but they're not bloat - we'll use drop down menus in idiot mode.
+function redbasic_form(&$a, $font_size, $line_height, $colour, $shadow, $navcolour, $opaquenav, $displaystyle, $linkcolour, $iconset, $shiny) {
 	$line_heights = array(
 		"1.3" => "1.3",
 		"---" => "---",
@@ -61,19 +89,54 @@ function redbasic_form(&$a, $font_size, $line_height, $colour) {
 		'12' => '12',
 	);
 	$colours = array(
-		'light' => 'light',		
-		'dark' => 'dark',						
+		'redbasic' => 'light',		
+		'fancyred' => 'dark',						
+	);
+	
+	$shadows = array(
+		  'true' => 'Yes',
+		  'false' => 'No',
 	);
 
-	$t = get_markup_template('theme_settings.tpl');
-	$o .= replace_macros($t, array(
+	$navcolours = array (
+		  'red' => 'red',
+		  'black' => 'black',	
+	);
+	
+	$displaystyles = array (
+		    'fancy' => 'fancy',
+		    'classic' => 'classic',
+	);
+	
+	$linkcolours = array (
+		    'blue' => 'blue',
+		    'red' => 'red',
+	);
+	
+	$iconsets = array (
+		    'default' => 'default',
+	);
+	
+	$shinys = array (
+		    'none' => 'none',
+		    'opaque' => 'opaque',
+	);
+	if(feature_enabled(local_user(),'expert')) {
+	  $t = get_markup_template('theme_settings.tpl');
+	  $o .= replace_macros($t, array(
 		'$submit' => t('Submit'),
 		'$baseurl' => $a->get_baseurl(),
 		'$title' => t("Theme settings"),
 		'$font_size' => array('redbasic_font_size', t('Set font-size for posts and comments'), $font_size, '', $font_sizes),
 		'$line_height' => array('redbasic_line_height', t('Set line-height for posts and comments'), $line_height, '', $line_heights),
 		'$colour' => array('redbasic_colour', t('Set colour scheme'), $colour, '', $colours),	
-	));
+		'$shadow' => array('redbasic_shadow', t('Draw shadows'), $shadow, '', $shadows),
+		'$navcolour' => array('redbasic_navcolour', t('Navigation bar colour'), $navcolour, '', $navcolours),
+		'$displaystyle' => array('redbasic_displaystyle', t('Display style'), $displaystyle, '', $displaystyles),
+		'$linkcolour' => array('redbasic_linkcolour', t('Display colour of links - hex value, do not include the #'), $linkcolour, '', $linkcolours),
+		'$iconset' => array('redbasic_iconset', t('Icons'), $iconset, '', $iconsets),
+		'$shiny' => array('redbasic_shiny', t('Shiny style'), $shiny, '', $shinys),
+	  ));}
 
 	return $o;
 }
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 99ad06c55..450cabc7c 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -1,46 +1,111 @@
 <?php
+  // This needs changing now, if we're going for global settings.  Admin settings have been removed in preparation, You *should* just be able to remove all 
+  // the get_config bits, though this is untested.  
+  // We also need to eventually.  Use the page owners settings for everybody - get_pconfig(page_owner()) or whatever that would look like.
+  
     $line_height = false;
     $redbasic_font_size = false;
     $resolution = false;
     $colour = false;
+    $shadows = false;
+    $navcolour = false;
+    $nav_bg_1 = "f88";
+    $nav_bg_2 = "b00";
+    $displaystyle = false;
+    $linkcolour = false;
+    $shiny = false;
     $site_line_height = get_config("redbasic","line_height");
     $site_redbasic_font_size = get_config("redbasic", "font_size" );
     $site_colour = get_config("redbasic", "colour" );
-
+    $shadows = get_config("redbasic", "shadow" );
+    $navcolour = get_config("redbasic", "navcolour" );
+    $displaystyle = get_config("redbasic", "displaystyle" );
+    $linkcolour = get_config("redbasic", "linkcolour" );
+    $shiny = get_config("redbasic", "shiny" );
+    
     if (local_user()) {
         $line_height = get_pconfig(local_user(), "redbasic","line_height");
         $redbasic_font_size = get_pconfig(local_user(), "redbasic", "font_size");
         $colour = get_pconfig(local_user(), "redbasic", "colour");
+        $shadows = get_pconfig(local_user(), "redbasic", "shadow");
+        $navcolour = get_pconfig(local_user(), "redbasic", "navcolour");
+        $displaystyle = get_pconfig(local_user(), "redbasic", "displaystyle");
+        $linkcolour = get_pconfig(local_user(), "redbasic", "linkcolour");
+        $shiny = get_pconfig(local_user(), "redbasic", "shiny");
     }
 
-    if ($line_height === false) {
-		$line_height = $site_line_height;
-	}
-    if ($line_height === false) {
-		$line_height = "1.2";
-	}
-    if ($redbasic_font_size === false) {
-		$redbasic_font_size = $site_redbasic_font_size;
-	}
-    if ($redbasic_font_size === false) {
-		$redbasic_font_size = "12";
-	}
-    if ($colour === false) {
-		$colour = $site_colour;
-	}
-	if($colour === false) {
-		$colour = "light";
-	}
-    
+
+// This is probably the easiest place to apply global settings.  Don't bother with site line height and such.  Instead, check pconfig for global user settings.  
+// eg, if ($redbasic_font_size === false) {$redbasic_font_size = get_pconfig(local_user(), "global", "font_size");  If it's not set, we'll just use the CSS with no changes.
+// Then all you need to do is add a "Global Settings" tab to settings/display, and make an equivalent of theme_settings.tpl and config.php to be loaded there.  Easy.
+
+    if ($line_height === false) {$line_height = $site_line_height;}
+    if ($line_height === false) {$line_height = "1.2";}
+    if ($redbasic_font_size === false) {$redbasic_font_size = $site_redbasic_font_size;}
+    if ($redbasic_font_size === false) {$redbasic_font_size = "12";}
+    if ($colour === false) {$colour = $site_colour;}
+    if ($colour === false) {$colour = "light";}
+	    if ($navcolour === "black") {$nav_bg_1 = "000";
+			      $nav_bg_2 = "2e2f2e";}
+
 	if(file_exists('view/theme/' . current_theme() . '/css/style.css')) {
 		echo file_get_contents('view/theme/' . current_theme() . '/css/style.css');
     }
     echo "\r\n";
 
-	if(($redbasic_font_size >= 10.0) && ($redbasic_font_size <= 16.0)) {
+    //if($colour != "light" { grab the contents of file $colour which doesn't exist yet, and echo it when it does}  
+    //see the displaystyle bit to see how this works.
+    //Then, grab the "Light" PCSS from KakSte Friendica theme, flip the colours, and the job is 90% done
+    //$colour_scheme (not yet implemented) should be used for idiot mode
+
+
+// Enforce sane limits for expert mode - otherwise we'll end up with "experts" who think font size is a percentage.
+
+	if(($redbasic_font_size >= 8.0) && ($redbasic_font_size <= 20.0)) {
 		echo ".wall-item-content { font-size: $redbasic_font_size; }\r\n";
 	}
 
-	if(($line_height >= 1.0) && ($line_height <= 1.5)) {
+	if(($line_height >= 1.0) && ($line_height <= 2.0)) {
 		echo ".wall-item-content { line-height: $line_height; }\r\n";
 	}	
+
+
+// Minimum value shadows - they shouldn't all be the same size; just get it working, clean up later.
+	if($shadows === "true") {
+		echo "code, blockquote, .wall-item-content-wrapper, .wall-item-content-wrapper.comment, .wall-item-content img, #profile-jot-perms, #profile-jot-submit, .tab, .tab.active, .settings-widget li, .wall-item-photo, .photo, .contact-block-img, .my-comment-photo, #posted-date-selector:hover, .contact-entry-photo img, .profile-match-photo img, #photo-photo img, .directory-photo-img, .photo-album-photo, .photo-top-photo, .group-selected, .nets-selected, .fileas-selected, .categories-selected {
+		box-shadow: 5px 5px 5px #111;}\r\n
+		
+		.tab.active, #jot-title, #jot-category, .comment-edit-text-empty, .comment-edit-text-full, iframe#profile-jot-text_ifr, #profile-jot-text {
+		box-shadow: 5px 5px 5px #666 inset;}\r\n";
+	
+	}
+	
+// Since every change would otherwise require five lines, it's simpler to just set a default and echo this without first checking if we've set it.  
+	echo "nav {background-image: linear-gradient(bottom, #$nav_bg_1 26%, #$nav_bg_2 82%);
+	      background-image: -o-linear-gradient(bottom, #$nav_bg_1 26%, #$nav_bg_2 82%);
+	      background-image: -moz-linear-gradient(bottom, #$nav_bg_1 26%, #$nav_bg_2 82%) !important;
+	      background-image: -webkit-linear-gradient(bottom, #$nav_bg_1 26%, #$nav_bg_2 82%);
+	      background-image: -ms-linear-gradient(bottom, #$nav_bg_1 26%, #$nav_bg_2 82%);}";
+
+// This takes quite a lot of code, so we'll keep it in a separate file, and echo the lot.  Devs still don't have to worry about - it's just overrides.
+// Theme devs can play with it without facing scary PHP.
+
+	if ($displaystyle === "fancy") 
+	      {if (file_exists('view/theme/' . current_theme() . '/css/fancy.css')) {
+		  $fancy = (file_get_contents('view/theme/' . current_theme() . '/css/fancy.css'));
+	      echo "$fancy";}
+	  }
+    
+// Put the # here to force hex colours - if we don't, somebody is going to do something odd, using RGB and we're all going to be confused on the support forums
+// until one of us works out what they've done.
+
+	  if ($linkcolour != false) {
+		    echo "a, a:visited, a:link, .fakelink, .fakelink:visited, .fakelink:link {color: #$linkcolour;}\r\n";
+	}
+	
+// If you want a shiny that just sets a different colour, add an if $shiny != false and handle it as the linkcolour above.
+
+	if ($shiny === opaque) {
+		    echo "div.wall-item-content-wrapper.shiny {opacity: 1;}\r\n
+			 .wall-item-content-wrapper {opacity: 0.8;}";
+	}
\ No newline at end of file
diff --git a/view/theme/redbasic/tpl/theme_settings.tpl b/view/theme/redbasic/tpl/theme_settings.tpl
index d0d153e73..6e7e079e0 100644
--- a/view/theme/redbasic/tpl/theme_settings.tpl
+++ b/view/theme/redbasic/tpl/theme_settings.tpl
@@ -1,6 +1,20 @@
-{{inc field_select.tpl with $field=$font_size}}{{endinc}}
+{{inc field_select.tpl with $field=$colour}}{{endinc}}
 
-{{inc field_select.tpl with $field=$line_height}}{{endinc}}
+{{inc field_input.tpl with $field=$font_size}}{{endinc}}
+
+{{inc field_input.tpl with $field=$line_height}}{{endinc}}
+
+{{inc field_select.tpl with $field=$shadow}}{{endinc}}
+
+{{inc field_select.tpl with $field=$navcolour}}{{endinc}}
+
+{{inc field_select.tpl with $field=$displaystyle}}{{endinc}}
+
+{{inc field_input.tpl with $field=$linkcolour}}{{endinc}}
+
+{{inc field_select.tpl with $field=$iconset}}{{endinc}}
+
+{{inc field_select.tpl with $field=$shiny}}{{endinc}}
 
 <div class="settings-submit-wrapper">
 	<input type="submit" value="$submit" class="settings-submit" name="redbasic-settings-submit" />