Allow card header click to close header.

immense · May 15, 2021 · 536f7d4 · 536f7d4
1 parent 0d5c4c3
commit 536f7d4
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 42 deletions.
diff --git a/Server/Components/Devices/DeviceCard.razor b/Server/Components/Devices/DeviceCard.razor
@@ -8,7 +8,9 @@
      @oncontextmenu:preventDefault="GetCardState() == DeviceCardState.Normal"
      @oncontextmenu:stopPropagation="GetCardState() == DeviceCardState.Normal">
 
-    <div class="card-header">
+    <div class="card-header" @onclick="HandleHeaderClick" 
+         @onclick:stopPropagation="GetCardState() == DeviceCardState.Expanded"
+         @onclick:preventDefault="GetCardState() == DeviceCardState.Expanded">
         <div>
             @if (Device.IsOnline)
             {
@@ -37,15 +39,10 @@
         <div class="text-right">
             @if (IsExpanded)
             {
-                <button class="btn btn-sm mr-2" title="Collapse"
-                        @onclick:stopPropagation="true"
-                        @onclick="SetCardStateNormal">
-                    <i class="oi oi-fullscreen-exit"></i>
-                </button>
                 <button class="btn btn-sm mr-2" title="Open in New Tab"
                         @onclick:stopPropagation="true"
                         @onclick="OpenDeviceDetails">
-                    <i class="oi oi-external-link"></i>
+                    <i class="oi oi-external-link" style="font-size: 1.3em"></i>
                 </button>
             }
             <input type="checkbox"

diff --git a/Server/Components/Devices/DeviceCard.razor.cs b/Server/Components/Devices/DeviceCard.razor.cs
@@ -45,20 +45,19 @@ public partial class DeviceCard : AuthComponentBase, IDisposable
         [Inject]
         private IDataService DataService { get; set; }
 
-        [Inject]
-        private IModalService ModalService { get; set; }
-
         private bool IsExpanded => GetCardState() == DeviceCardState.Expanded;
 
-        private bool IsSelected => AppState.DevicesFrameSelectedDevices.Contains(Device.ID);
-
         private bool IsOutdated =>
-            Version.TryParse(Device.AgentVersion, out var result) && 
+            Version.TryParse(Device.AgentVersion, out var result) &&
             result < ParentFrame.HighestVersion;
 
+        private bool IsSelected => AppState.DevicesFrameSelectedDevices.Contains(Device.ID);
+
         [Inject]
         private IJsInterop JsInterop { get; set; }
 
+        [Inject]
+        private IModalService ModalService { get; set; }
         [Inject]
         private IToastService ToastService { get; set; }
 
@@ -85,18 +84,16 @@ private void AppState_PropertyChanged(object sender, System.ComponentModel.Prope
             }
         }
 
-        private string GetProgressMessage(string key)
+        private void ContextMenuOpening(MouseEventArgs args)
         {
-            if (_fileUploadProgressLookup.TryGetValue(key, out var value))
+            if (GetCardState() == DeviceCardState.Normal)
             {
-                return $"{MathHelper.GetFormattedPercent(value)} - {key}";
+                JsInterop.OpenWindow($"/device-details/{Device.ID}", "_blank");
             }
-
-            return string.Empty;
         }
 
         private async Task ExpandCard(MouseEventArgs args)
-        {  
+        {
             if (AppState.DevicesFrameFocusedDevice == Device.ID)
             {
                 if (AppState.DevicesFrameFocusedCardState == DeviceCardState.Normal)
@@ -113,14 +110,6 @@ private async Task ExpandCard(MouseEventArgs args)
             await CircuitConnection.TriggerHeartbeat(Device.ID);
         }
 
-        private void ContextMenuOpening(MouseEventArgs args)
-        {
-            if (GetCardState() == DeviceCardState.Normal)
-            {
-                JsInterop.OpenWindow($"/device-details/{Device.ID}", "_blank");
-            }
-        }
-
         private DeviceCardState GetCardState()
         {
             if (AppState.DevicesFrameFocusedDevice == Device.ID)
@@ -141,6 +130,37 @@ private string GetCardStateClass(Device device)
             return string.Empty;
         }
 
+        private string GetProgressMessage(string key)
+        {
+            if (_fileUploadProgressLookup.TryGetValue(key, out var value))
+            {
+                return $"{MathHelper.GetFormattedPercent(value)} - {key}";
+            }
+
+            return string.Empty;
+        }
+
+        private void HandleHeaderClick()
+        {
+            if (IsExpanded)
+            {
+                SetCardStateNormal();
+            }
+        }
+        private async Task HandleValidSubmit()
+        {
+            DataService.UpdateDevice(Device.ID,
+                  Device.Tags,
+                  Device.Alias,
+                  Device.DeviceGroupID,
+                  Device.Notes,
+                  Device.WebRtcSetting);
+
+            ToastService.ShowToast("Device settings saved.");
+
+            await CircuitConnection.TriggerHeartbeat(Device.ID);
+        }
+
         private async Task OnFileInputChanged(InputFileChangeEventArgs args)
         {
             ToastService.ShowToast("File upload started.");
@@ -173,21 +193,6 @@ private void OnFileInputProgress(double percentComplete, string fileName)
             _fileUploadProgressLookup.AddOrUpdate(fileName, percentComplete, (k, v) => percentComplete);
             InvokeAsync(StateHasChanged);
         }
-
-        private async Task HandleValidSubmit()
-        {
-            DataService.UpdateDevice(Device.ID,
-                  Device.Tags,
-                  Device.Alias,
-                  Device.DeviceGroupID,
-                  Device.Notes,
-                  Device.WebRtcSetting);
-
-            ToastService.ShowToast("Device settings saved.");
-
-            await CircuitConnection.TriggerHeartbeat(Device.ID);
-        }
-
         private void OpenDeviceDetails()
         {
             JsInterop.OpenWindow($"/device-details/{Device.ID}", "_blank");

diff --git a/Server/Components/Devices/DeviceCard.razor.css b/Server/Components/Devices/DeviceCard.razor.css
@@ -21,6 +21,10 @@
             transition: .25s ease all;
         }
 
+        .device-card.expanded .card-header {
+            cursor: pointer;
+        }
+
     .device-card:hover {
         transition: all .25s;
     }