Image picker re-style.

e107_handlers/admin_ui.php

@@ -1586,7 +1586,7 @@ class e_admin_dispatcher
 		}
 		elseif(deftrue('e_CURRENT_PLUGIN'))
 		{
-			$icon = e107::getPlugin()->getIcon(e_CURRENT_PLUGIN, 32, '');
+			$icon = e107::getPlug()->load(e_CURRENT_PLUGIN)->getIcon(32);
 		}
 
 		return e107::getNav()->admin($icon."<span>".$this->menuTitle."</span>", $selected, $var);

e107_handlers/form_handler.php

@@ -955,11 +955,15 @@ class e_form
 		}
 		else
 		{
-				$title = LAN_EDIT;
+			$title = LAN_EDIT;
 		}
 
+		$class = !empty($extras['class']) ? $extras['class']." " : '';
+		$title = !empty($extras['title']) ? $extras['title'] : $title;
+
+
 	//	$ret = "<a title=\"{$title}\" rel='external' class='e-dialog' href='".$url."'>".$label."</a>"; // using colorXXXbox. 
-	 $ret = "<a title=\"{$title}\" class='e-modal' data-modal-caption='".LAN_EFORM_007."' data-cache='false' data-target='#uiModal' href='".$url."'>".$label."</a>"; // using bootstrap. 
+	    $ret = "<a title=\"{$title}\" class='".$class."e-modal' data-modal-caption='".LAN_EFORM_007."' data-cache='false' data-target='#uiModal' href='".$url."'>".$label."</a>"; // using bootstrap.
 
 	
 	//	$footer = "<div style=\'padding:5px;text-align:center\' <a href=\'#\' >Save</a></div>";
@@ -1114,7 +1118,7 @@ class e_form
 
 
 	/**
-	 * FIXME {IMAGESELECTOR} rewrite
+	 * Image Picker
 	
 	 * @param string $name input name
 	 * @param string $default default value
@@ -1141,6 +1145,10 @@ class e_form
 			if(strpos($sc_parameters, '=') === false) $sc_parameters = 'media='.$sc_parameters;
 			parse_str($sc_parameters, $sc_parameters);
 		}
+		elseif(empty($sc_parameters))
+		{
+			$sc_parameters = array();
+		}
 
 
 		if(empty($sc_parameters['media']))
@@ -1204,17 +1212,18 @@ class e_form
 			$ret = "<div class='imgselector-container'  style='display:block;width:64px;min-height:64px'>";
 			$thpath = isset($sc_parameters['nothumb']) || vartrue($hide) ? $default : $default_thumb;
 			
-			$label = "<div id='{$name_id}_prev' class='text-center well well-small image-selector img-responsive img-fluid' >";			
+			$label = "<div id='{$name_id}_prev' class='text-center well well-small image-selector icon-selector img-responsive img-fluid' >";
 			$label .= $tp->toIcon($default_url,array('class'=>'img-responsive img-fluid'));
 
             //$label = "<div id='{$name_id}_prev' class='text-center well well-small image-selector' >";			
 			//$label .= $tp->toIcon($default_url);
 			
-			$label .= "				
+			$label .= "</div>";
-			</div>";
 			
 		//	$label = "<img id='{$name_id}_prev' src='{$default_url}' alt='{$default_url}' class='well well-small image-selector' style='{$style}' />";
-				
+
+
+			$ret = $this->mediaUrl($cat, $label, $name_id, $sc_parameters);
 		}
 		else // Images 
 		{
@@ -1235,35 +1244,40 @@ class e_form
 			 	$cat = $cat . "_image";		
 			}
 
+			$sc_parameters['class'] = 'btn btn-sm btn-default';
 
-		}
+			if($blank === true)
+			{
+				$sc_parameters['title'] = LAN_ADD;
+				$editIcon        = $this->mediaUrl($cat, $tp->toGlyph('fa-plus', array('fw'=>1)), $name_id,$sc_parameters);
+				$previewIcon     = '';
 
-		if(!empty($previewURL))
+				// @todo drag-n-drop upload code in here.
-		{
+			}
-			$default_url = $previewURL;
+			else
+			{
+				$editIcon       = $this->mediaUrl($cat, $tp->toGlyph('fa-edit', array('fw'=>1)), $name_id,$sc_parameters);
+				$previewIcon    = "<a title='".LAN_PREVIEW."' class='btn btn-sm btn-default e-modal' data-modal-caption='".LAN_PREVIEW."' href='".$default_url."'>".$tp->toGlyph('fa-search', array('fw'=>1))."</a>";
+			}
+
+			$ret .= $label; // image
+
+			$ret .= '<div class="overlay">
+				    <div class="text">'.$editIcon.$previewIcon.'</div>
+				  </div>';
 		}
 
 
-		$ret .= $this->mediaUrl($cat, $label,$name_id,$sc_parameters);
-
-		if($cat != '_icon' && $blank == false) // ICONS
-		{
-			$ret .= "<div class='text-right'><a title='".LAN_PREVIEW."' class='btn btn-sm btn-default btn-block e-modal' data-modal-caption='".LAN_PREVIEW."' href='".$default_url."'>".$tp->toGlyph('fa-search')."</a></div>";
-		}
 		$ret .= "</div>\n";
 		$ret .=	"<input type='hidden' name='{$name}' id='{$name_id}' value='{$default}' />"; 
 		$ret .=	"<input type='hidden' name='mediameta_{$name}' id='{$meta_id}' value='' />"; 
-	//	$ret .=	$this->text($name,$default); // to be hidden eventually. 
-		return $ret;
-		
 
-		
+		return $ret;
-		
-		
-		// ----------------
 
 	}
 
+
+
 	private function imagepickerDefault($path, $parms=array())
 	{
 		$tp = e107::getParser();

e107_themes/bootstrap3/admin_style.css

@@ -261,8 +261,52 @@ td.right, th.right 			{ text-align:right }
 #cboxTitle					{ font-weight:bold; color: black }
 .chzn-container				{ border: 1px solid #ddd; }
 
+
+/* image picker */
+
+.imgselector-container {
+	position: relative;
+}
+
+.imgselector-container .overlay {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  background-color: rgba(0,0,0,0.8);
+  overflow: hidden;
+  width: 100%;
+  height:0;
+  transition: .5s ease;
+  border-radius: 4px;
+}
+
+.imgselector-container:hover .overlay {
+  bottom: 0;
+  height: 100%;
+}
+
+.imgselector-container .text {
+  white-space: nowrap;
+  color: white;
+  font-size: 30px;
+  position: absolute;
+  overflow: hidden;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+}
+
+.imgselector-container .text .btn-sm {
+	font-size: 20px;
+}
+
+
+
+
 /* icon-picker */
-div.image-selector			{ width:100px; height:60px ; font-size:32px; line-height:40px  }
+div.image-selector.icon-selector { width: 64px; height:64px; margin-bottom:0; font-size:32px; line-height:40px }
 div.imgselector-container a	{ color: inherit;  }
 #link-button_prev i 		{ line-height:40px; }