New REM client: REM-Client 8db8f8c, 64-bit (modern REM UI for all windows, switchable with modern_ui: main menu, options, dealers, nav map, inventory, chat with history and settings, PM windows, notifications, flight HUD in FL's shape with HUD editor, colour themes; NeuroNet icons fly to the screen's middle; cursor / crosshair colour presets; dealers open at bases with real dealer rooms; text fields take typed keys)
This commit is contained in:
D4rkl1ght3r
@@ -0,0 +1,83 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Servers</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; margin-top: 10dp; }
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.side { flex: 0 0 34%; margin-left: 18dp; }
|
||||
.bar { display: flex; flex-direction: row; align-items: center; min-height: 36dp; margin-bottom: 6dp; }
|
||||
.bar .search { flex: 1; margin-right: 10dp; min-width: 0; }
|
||||
.bar .search input.text { display: block; width: 100%; }
|
||||
.bar .chip { margin-left: 6dp; }
|
||||
.chip.on { border-color: #f2b13c; color: #f2b13c; }
|
||||
.table .c1 img { width: 14dp; height: 14dp; margin-left: 6dp; }
|
||||
.table .c2 { width: 26%; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; }
|
||||
.table .c3 { width: 90dp; }
|
||||
.table .c4 { width: 80dp; margin-right: 0; }
|
||||
.table .head span { cursor: pointer; }
|
||||
.table .head span:hover { color: #5cc8f0; }
|
||||
.table .head span.sorted { color: #f2b13c; }
|
||||
.table .row.old { color: #5d6e80; }
|
||||
.table .row.full .c3 { color: #e05a4f; }
|
||||
.table .row .tag { font-family: "IBM Plex Mono"; font-size: 11dp; color: #5cc8f0; margin-left: 8dp; }
|
||||
.facts { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; color: #8197ad; margin-bottom: 10dp; }
|
||||
.desc { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.pick-name { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; margin-bottom: 6dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="serverlist">
|
||||
<div class="win-head">
|
||||
<span class="title">{{ title }}</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Shown <span class="v">{{ rows.size }}</span> / <span class="v">{{ total }}</span></span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="bar">
|
||||
<div class="search"><input class="text" type="text" data-value="search" placeholder="Search name or address" maxlength="48"/></div>
|
||||
<span class="chip" data-class-on="hide_full" data-action="toggle" data-arg="full">Hide full</span>
|
||||
<span class="chip" data-class-on="hide_locked" data-action="toggle" data-arg="locked">Hide locked</span>
|
||||
<span class="chip" data-class-on="known_only" data-action="toggle" data-arg="known">My servers</span>
|
||||
</div>
|
||||
<div class="split">
|
||||
<div class="colm">
|
||||
<div class="table" style="flex: 1;">
|
||||
<div class="head">
|
||||
<span class="c1" data-class-sorted="sort == 1 || sort == -1" data-action="sort" data-arg="1">Server</span>
|
||||
<span class="c2">Address</span>
|
||||
<span class="c3" data-class-sorted="sort == 2 || sort == -2" data-action="sort" data-arg="2">Players</span>
|
||||
<span class="c4" data-class-sorted="sort == 3 || sort == -3" data-action="sort" data-arg="3">Ping</span>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="empty" data-if="rows.size == 0">No servers yet. {{ status }}</div>
|
||||
<div class="row" data-for="r : rows" data-class-selected="r.selected" data-class-old="r.old" data-class-full="r.full" data-action="pick" data-attr-data-arg="r.key">
|
||||
<span class="c1">{{ r.name }}<span class="tag" data-if="r.locked">LOCK</span><span class="tag" data-if="r.known">CHAR</span></span>
|
||||
<span class="c2">{{ r.address }}</span>
|
||||
<span class="c3">{{ r.players }}</span>
|
||||
<span class="c4">{{ r.ping }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm side">
|
||||
<div data-if="has_pick">
|
||||
<div class="pick-name">{{ pick_name }}</div>
|
||||
<div class="facts">{{ pick_facts }}</div>
|
||||
</div>
|
||||
<div class="desc" data-if="has_pick">{{ pick_text }}</div>
|
||||
<div class="hint" data-if="!has_pick">Pick a server. A double click joins it.</div>
|
||||
<div class="actions" style="margin-top: 12dp;">
|
||||
<div class="btn primary" data-class-disabled="!can_connect" data-action="connect">Connect<div class="tip">Joins the picked server; a locked one asks for its password.</div></div>
|
||||
<div class="btn" data-action="refresh">Refresh<div class="tip">Asks the list server again.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
<div class="btn" data-action="back">Back</div>
|
||||
<span class="status">{{ status }}</span>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
Reference in New Issue
Block a user