From bee19bfe176c7032d59248182e1d7767037f7446 Mon Sep 17 00:00:00 2001
From: 21pages <pages21@163.com>
Date: Fri, 11 Nov 2022 20:44:16 +0800
Subject: [PATCH] portable-service: optimize sciter cm buttons

Signed-off-by: 21pages <pages21@163.com>
---
 src/ui/cm.css | 42 +++++++++++++++++++++++++++++++++---------
 src/ui/cm.tis | 18 +++++++++++-------
 2 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/src/ui/cm.css b/src/ui/cm.css
index fccdb155f..ff4d422e4 100644
--- a/src/ui/cm.css
+++ b/src/ui/cm.css
@@ -112,20 +112,44 @@ icon.recording {
     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAANpJREFUWEftltENAiEMhtsJ1NcynG6gI+gGugEOR591gppeQoIYSDBILxEeydH/57u2FMF4obE+TAOTwLoIhBDOAHBExG2n6rgR0akW640AM0sn4SWMiDycc7s8JjN7Ijro/k8NqAAR5RoeAPZxv2ggP9hCJiWZxtGbq3hqbJiBVHy4gVx8qAER8Yi4JFy6huVAKXemgb8icI+1b5KEitq0DOO/Nm1EEX1TK27p/bVvv36MOhl4EtHHbFF7jq8AoG1z08OAiFycczrkFNe6RrIet26NMQlMAuYEXiayryF/QQktAAAAAElFTkSuQmCC');
 }
 
-div.buttons {
-    width: *;
-    border-spacing: 0.5em;
-    text-align: center;
+div.outer_buttons {
+    flow:vertical;
+    border-spacing:8;
 }
 
-div.buttons button {
-    width: 80px;
-    height: 40px;
-    margin: 0.5em;
+div.inner_buttons {
+    flow:horizontal;
+    border-spacing:8;
+}
+
+button.control {
+    width: *;
+}
+
+button.elevate {
+    background:green;
+}
+
+button.elevate:active {
+    background: rgb(2, 104, 2);
+    border-color: color(hover-border);
+}
+
+button.elevate>span {
+    flow:horizontal;
+    width: *;
+}
+
+button.elevate>span>span {
+    margin-left:*; 
+    margin-right:*;
+}
+
+button.elevate>span>span>span {
+    vertical-align: middle;
 }
 
 button#disconnect {
-    width: 160px;
     background: color(blood-red);
     border: none;
 }
diff --git a/src/ui/cm.tis b/src/ui/cm.tis
index 5238ab91a..035b58650 100644
--- a/src/ui/cm.tis
+++ b/src/ui/cm.tis
@@ -4,6 +4,7 @@ var body;
 var connections = [];
 var show_chat = false;
 var show_elevation = true;
+var svg_elevate = <svg t="1667992597853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1850" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M892.761 160.724v426.504c0 25.588-6.419 51.036-19.177 76.339-12.798 25.336-29.547 49.86-50.254 73.627-20.707 23.79-44.372 46.296-70.97 67.516-26.589 21.244-53.543 40.177-80.921 56.768-27.363 16.623-53.968 30.461-79.801 41.438-25.809 11.008-48.433 18.547-67.871 22.64l-9.203 1.53-8.43-1.53c-19.958-4.093-43.094-11.632-69.432-22.64-26.337-10.969-53.708-24.816-82.080-41.438-28.388-16.591-56.256-35.524-83.618-56.768-27.378-21.219-51.776-43.725-73.265-67.516-21.488-23.759-38.868-48.291-52.155-73.627-13.319-25.305-19.974-50.759-19.974-76.339v-426.504l31.455-4.629 352.892-65.97 359.784 65.97 23.017 4.629zM510.028 151.884l-4.211-0.844-302.89 51.476v269.101h307.102v-319.734zM815.434 471.634h-305.406v383.031c19.682-4.51 41.052-11.411 64.141-20.692 23.033-9.249 45.815-20.234 68.304-32.867 22.513-12.672 44.159-26.739 64.969-42.203 20.818-15.472 39.23-32.047 55.277-49.797 16.024-17.703 28.822-36.131 38.386-55.222 9.549-19.131 14.328-38.553 14.328-58.235v-124.015z" p-id="1851" fill="#ffffff"></path></svg>;
 
 class Body: Reactor.Component
 {
@@ -56,14 +57,17 @@ class Body: Reactor.Component
                 }
                 {c.port_forward ? <div>Port Forwarding: {c.port_forward}</div> : ""}
                 <div style="size:*"/>
-                <div .buttons>
-                    {!auth && show_elevation_btn ? <button .button tabindex="-1" #elevate_accept style="width:50;background-color:green;">{translate('Elevate')}</button> : "" }
-                    {auth ? "" : <button .button tabindex="-1" style={!auth && show_elevation_btn ? "width:50;" : ""} #accept>{translate('Accept')}</button>}
-                    {auth ? "" : <button .button tabindex="-1" style={!auth && show_elevation_btn ? "width:50;" : ""} .outline #dismiss>{translate('Dismiss')}</button>}
-                    {auth && !disconnected && show_elevation_btn ? <button .button tabindex="-1" #elevate style="width:50;background-color:green;">{translate('Elevate')}</button> : "" }
-                    {auth && !disconnected ? <button .button tabindex="-1" #disconnect style={auth && show_elevation_btn ? "width:50;" : ""} >{translate('Disconnect')}</button> : ""}
-                    {auth && disconnected ? <button .button tabindex="-1" #close>{translate('Close')}</button> : ""}
+                <div .outer_buttons>
+                    {!auth && !disconnected && show_elevation_btn ? <button #elevate_accept .control .elevate .button><span><span><span>{svg_elevate}</span><span>{translate('Accept')}</span></span></span></button> : "" }
+                    {auth && !disconnected && show_elevation_btn ? <button #elevate .control .elevate .button><span><span><span>{svg_elevate}</span><span>{translate('Elevate')}</span></span></span></button> : "" }
+                    <div .inner_buttons style={auth ? "display:none;":""}>
+                        {!auth ? <button #accept .control .button>{translate('Accept')}</button> : "" }
+                        {!auth ? <button #dismiss .control .outline>{translate('Dismiss')}</button> : "" }
+                    </div>
+                    {auth && !disconnected ? <button #disconnect .control .button>{translate('Disconnect')}</button> : "" }
+                    {auth && disconnected ? <button #close .control .button>{translate('Close')}</button> : "" }
                 </div>
+                <div style={!show_elevation_btn ? "height:1 em;" : "display:none;"}></div>
                 {c.is_file_transfer || c.port_forward ? "" : <div .chaticon>{svg_chat}</div>}
             </div>
             <div .right-panel style={right_style}>