portable-service: optimize sciter cm buttons

Signed-off-by: 21pages <pages21@163.com>
This commit is contained in:
21pages 2022-11-11 20:44:16 +08:00
parent 9f73b89f21
commit bee19bfe17
2 changed files with 44 additions and 16 deletions

View File

@ -112,20 +112,44 @@ icon.recording {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAANpJREFUWEftltENAiEMhtsJ1NcynG6gI+gGugEOR591gppeQoIYSDBILxEeydH/57u2FMF4obE+TAOTwLoIhBDOAHBExG2n6rgR0akW640AM0sn4SWMiDycc7s8JjN7Ijro/k8NqAAR5RoeAPZxv2ggP9hCJiWZxtGbq3hqbJiBVHy4gVx8qAER8Yi4JFy6huVAKXemgb8icI+1b5KEitq0DOO/Nm1EEX1TK27p/bVvv36MOhl4EtHHbFF7jq8AoG1z08OAiFycczrkFNe6RrIet26NMQlMAuYEXiayryF/QQktAAAAAElFTkSuQmCC'); background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAANpJREFUWEftltENAiEMhtsJ1NcynG6gI+gGugEOR591gppeQoIYSDBILxEeydH/57u2FMF4obE+TAOTwLoIhBDOAHBExG2n6rgR0akW640AM0sn4SWMiDycc7s8JjN7Ijro/k8NqAAR5RoeAPZxv2ggP9hCJiWZxtGbq3hqbJiBVHy4gVx8qAER8Yi4JFy6huVAKXemgb8icI+1b5KEitq0DOO/Nm1EEX1TK27p/bVvv36MOhl4EtHHbFF7jq8AoG1z08OAiFycczrkFNe6RrIet26NMQlMAuYEXiayryF/QQktAAAAAElFTkSuQmCC');
} }
div.buttons { div.outer_buttons {
width: *; flow:vertical;
border-spacing: 0.5em; border-spacing:8;
text-align: center;
} }
div.buttons button { div.inner_buttons {
width: 80px; flow:horizontal;
height: 40px; border-spacing:8;
margin: 0.5em; }
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 { button#disconnect {
width: 160px;
background: color(blood-red); background: color(blood-red);
border: none; border: none;
} }

View File

@ -4,6 +4,7 @@ var body;
var connections = []; var connections = [];
var show_chat = false; var show_chat = false;
var show_elevation = true; 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 class Body: Reactor.Component
{ {
@ -56,14 +57,17 @@ class Body: Reactor.Component
} }
{c.port_forward ? <div>Port Forwarding: {c.port_forward}</div> : ""} {c.port_forward ? <div>Port Forwarding: {c.port_forward}</div> : ""}
<div style="size:*"/> <div style="size:*"/>
<div .buttons> <div .outer_buttons>
{!auth && show_elevation_btn ? <button .button tabindex="-1" #elevate_accept style="width:50;background-color:green;">{translate('Elevate')}</button> : "" } {!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 ? "" : <button .button tabindex="-1" style={!auth && show_elevation_btn ? "width:50;" : ""} #accept>{translate('Accept')}</button>} {auth && !disconnected && show_elevation_btn ? <button #elevate .control .elevate .button><span><span><span>{svg_elevate}</span><span>{translate('Elevate')}</span></span></span></button> : "" }
{auth ? "" : <button .button tabindex="-1" style={!auth && show_elevation_btn ? "width:50;" : ""} .outline #dismiss>{translate('Dismiss')}</button>} <div .inner_buttons style={auth ? "display:none;":""}>
{auth && !disconnected && show_elevation_btn ? <button .button tabindex="-1" #elevate style="width:50;background-color:green;">{translate('Elevate')}</button> : "" } {!auth ? <button #accept .control .button>{translate('Accept')}</button> : "" }
{auth && !disconnected ? <button .button tabindex="-1" #disconnect style={auth && show_elevation_btn ? "width:50;" : ""} >{translate('Disconnect')}</button> : ""} {!auth ? <button #dismiss .control .outline>{translate('Dismiss')}</button> : "" }
{auth && disconnected ? <button .button tabindex="-1" #close>{translate('Close')}</button> : ""} </div>
{auth && !disconnected ? <button #disconnect .control .button>{translate('Disconnect')}</button> : "" }
{auth && disconnected ? <button #close .control .button>{translate('Close')}</button> : "" }
</div> </div>
<div style={!show_elevation_btn ? "height:1 em;" : "display:none;"}></div>
{c.is_file_transfer || c.port_forward ? "" : <div .chaticon>{svg_chat}</div>} {c.is_file_transfer || c.port_forward ? "" : <div .chaticon>{svg_chat}</div>}
</div> </div>
<div .right-panel style={right_style}> <div .right-panel style={right_style}>