portable-service: optimize sciter cm buttons
Signed-off-by: 21pages <pages21@163.com>
This commit is contained in:
parent
9f73b89f21
commit
bee19bfe17
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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}>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user