composants

plugin/hackpoint/css/main.css

@@ -262,4 +262,77 @@ div.hackpoint-type-image[data-type="dropzone"] > ul > li > i.pointer{
 	box-sizing: border-box;
 	border-radius: 100%;
 	transform: translateY(0px);
+}
+#parts{
+	margin:0;
+	padding:0;
+}
+#parts li{
+	width:15%;
+	display: inline-block;
+	padding:0px;
+	margin:5px 5px 5px 0;
+}
+#parts li .part{
+	background-color: #2b2f35;
+	border-radius: 3px;
+	padding: 15px;
+	color:#cecece;
+	min-height: 250px;
+	position: relative;
+}
+
+#parts li .part input{
+	background-color: #343940;
+	border-color: #343940;
+	color:#fefefe;
+}
+
+#sketch-workspace .part [data-type="dropzone"]{
+	border:2px dashed #3e4750;
+	height:100px;
+	text-align: center;
+	text-transform: uppercase;
+	font-weight: bold;
+	color:#5e6671;
+	margin-top:10px;
+}
+
+#parts li .part .btn-delete{
+	color:#cecece;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	opacity:0.4;
+	transition:all 0.2s ease-in-out;
+}
+
+#parts li .part .btn-delete:hover{
+	opacity:0.9;
+	transform: translateY(-5px) rotate(25deg);
+}
+
+#parts li .part .price{
+	font-weight: bold;
+}
+
+#parts li .part .link{
+	color:#cecece;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	padding:5px 10px;
+	opacity:0.4;
+	transition:all 0.2s ease-in-out;
+}
+
+#parts li .part .brand{
+	font-size: 10px;
+	float:right;
+	margin-top: 5px;
+	color:#4c7cad;
+}
+#parts li .part .link:hover{
+	opacity:0.9;
+	transform:  rotate(180deg);
 }

plugin/hackpoint/types/PartType.class.php

@@ -73,29 +73,22 @@ class PartType {
 				<div class="col-md-12">
 					
 
+					<div class="btn btn-dark"><i class="far fa-plus-square pr-1"></i> Ajouter un composant</div>
 
-					<div class="input-group col-md-8 pl-0">
-					  <div class="input-group-prepend">
-					    <span class="input-group-text" id="basic-addon1">Rechercher</span>
-					  </div>
-					  <input type="text" data-type="part" class="form-control">
-					  <div class="input-group-prepend ml-2">
-					    <span class="input-group-text" style="background:transparent;border:0;">OU</span>
-					  </div>
-					  <div class="input-group-prepend ml-2">
-					    <div class="btn btn-dark"><i class="far fa-plus-square pr-1"></i> Ajouter un composant inexistant</div>
-					  </div>
-					 
-					</div>
 					
 
-
 					<ul  id="parts" data-entity-search="hackpoint_part_search">
-						<li data-id="{{id}}" class="hidden">
-			                {{label}} - {{brand}}
-			                {{price}} €
-			                {{link}}
-			                 <div class="btn btn-danger " onclick="hackpoint_part_delete(this);"><i class="far fa-trash-alt"></i></div>
+						<li data-id="{{id}}" class="">
+							<div class="part">
+							  	<input type="text" data-type="part" placeholder="Nom du composant" value="{{label}}" class="form-control">
+							  	<div data-type="dropzone"  data-label="Image" data-delete="part_delete_document" data-save="part_add_document" data-allowed="jpeg,jpg,bmp,gif,png" class="form-control" id="document" name="document">
+				<?php echo json_encode($contact->documents()); ?></div>
+				                <span class="price">{{price}} €</span>
+				                <span class="brand">{{brand}}</span>
+				               
+				                <a href="{{link}}" class="link"><i class="fas fa-globe-americas"></i></a>
+				                 <div class="btn btn-delete" onclick="hackpoint_part_delete(this);"><i class="far fa-trash-alt"></i></div>
+			                 </div>
 						</li>
 					</ul>
 				</div>