From 7a1bd660c4c7a12b81b2fae022c4eef5083e5dd6 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 28 Jun 2022 16:57:59 +0200
Subject: [PATCH] Prepare ofn-drop-down to have a "disabled" state and a
 "prepend" element

---
 .../dropdown/directives/dropdown.js.coffee    |  1 +
 app/webpacker/css/admin/dropdown.scss         | 49 +++++++++++++++++--
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/admin/dropdown/directives/dropdown.js.coffee b/app/assets/javascripts/admin/dropdown/directives/dropdown.js.coffee
index f26894afbc..83eb397a35 100644
--- a/app/assets/javascripts/admin/dropdown/directives/dropdown.js.coffee
+++ b/app/assets/javascripts/admin/dropdown/directives/dropdown.js.coffee
@@ -10,6 +10,7 @@
           scope.$emit "offClick"
 
     element.click (event) ->
+      return if event.target.closest(".ofn-drop-down").classList.contains "disabled" || event.target.classList.contains "disabled" 
       if !scope.expanded
         event.stopPropagation()
         scope.deregistrationCallback = scope.$on "offClick", ->
diff --git a/app/webpacker/css/admin/dropdown.scss b/app/webpacker/css/admin/dropdown.scss
index 4a991cbffe..51ec736099 100644
--- a/app/webpacker/css/admin/dropdown.scss
+++ b/app/webpacker/css/admin/dropdown.scss
@@ -11,14 +11,12 @@
 	color: #575757;
 }
 
-.ofn-drop-down {
+@mixin ofn-drop-down-style {
 	padding: 7px 15px;
 	border-radius: 3px;
 	border: 1px solid #d4d4d4;
 	background-color: #f5f5f5;
-	position: relative;
 	display: block;
-	float: left;
 	color: #828282;
 	cursor: pointer;
 	-moz-user-select: none;
@@ -29,6 +27,51 @@
 	text-align: center;
   margin-right: 10px;
 
+	&.disabled {
+		opacity: 0.5;
+		
+		&:hover {
+			cursor: default;
+			border-color: #d4d4d4;
+			color: #828282;
+		}
+	}
+}
+
+.ofn-drop-down-with-prepend {
+	display: flex;
+
+	&.right {
+		float: right;
+
+		.ofn-drop-down-prepend {
+			margin-left: 10px;
+			margin-right: 0;
+		}
+	}
+	
+	.ofn-drop-down {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	.ofn-drop-down-prepend {
+		@include ofn-drop-down-style;
+		
+		border-right: none;
+		margin-left: 0;
+		margin-right: 10px;
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+		cursor: default;
+	}
+}
+
+.ofn-drop-down {
+	@include ofn-drop-down-style;
+	position: relative;
+	float: left;
+
 	&.right {
 		float: right;
     margin-right: 0px;