initial commit - cross reference with 5th port - obviously has compile errors
This commit is contained in:
LetterJay
@@ -0,0 +1,16 @@
|
||||
<script>
|
||||
component.exports = {
|
||||
oninit () {
|
||||
this.observe('value', (newkey, oldkey, keypath) => {
|
||||
const { min, max } = this.get()
|
||||
const value = Math.clamp(min, max, newkey)
|
||||
this.animate('percentage', Math.round((value - min) / (max - min) * 100))
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class='bar'>
|
||||
<div class='barFill {{state}}' style='width: {{percentage}}%'></div>
|
||||
<span class='barText'>{{yield}}</span>
|
||||
</div>
|
||||
@@ -0,0 +1,32 @@
|
||||
context = selector()
|
||||
|
||||
.bar
|
||||
display: inline-block
|
||||
position: relative
|
||||
vertical-align: middle
|
||||
width: 100%
|
||||
height: 20px
|
||||
line-height: @height - 3px
|
||||
padding: 1px
|
||||
|
||||
border: 1px solid bar-color-border
|
||||
background: bar-color-background
|
||||
|
||||
.barText
|
||||
@extend {context} $fontReset
|
||||
position: absolute
|
||||
top: 0
|
||||
right: 3px
|
||||
|
||||
.barFill
|
||||
display: block
|
||||
height: 100%
|
||||
|
||||
transition: background-color 1s
|
||||
background-color: bar-color-normal
|
||||
&.good
|
||||
background-color: bar-color-good
|
||||
&.average
|
||||
background-color: bar-color-average
|
||||
&.bad
|
||||
background-color: bar-color-bad
|
||||
@@ -0,0 +1,59 @@
|
||||
<script>
|
||||
import { UI_INTERACTIVE } from 'util/constants'
|
||||
import { act } from 'util/byond'
|
||||
|
||||
component.exports = {
|
||||
computed: {
|
||||
clickable () {
|
||||
if (this.get('enabled') && !this.get('state')) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
enabled () {
|
||||
if (this.get('config.status') === UI_INTERACTIVE) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
styles () {
|
||||
let extra = ''
|
||||
if (this.get('tooltip-side'))
|
||||
extra = ` tooltip-${this.get('tooltip-side')}`
|
||||
if (this.get('grid'))
|
||||
extra += ' gridable'
|
||||
if (this.get('enabled')) {
|
||||
const state = this.get('state')
|
||||
const style = this.get('style')
|
||||
if (!state) {
|
||||
return `active normal ${style} ${extra}`
|
||||
} else {
|
||||
return `inactive ${state} ${extra}`
|
||||
}
|
||||
} else {
|
||||
return `inactive disabled ${extra}`
|
||||
}
|
||||
}
|
||||
},
|
||||
oninit () {
|
||||
this.on('press', (event) => {
|
||||
const { action, params } = this.get()
|
||||
act(this.get('config.ref'), action, params)
|
||||
event.node.blur()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<span class='button {{styles}}'
|
||||
unselectable='on'
|
||||
{{#clickable}}tabindex='0'{{/}}
|
||||
data-tooltip='{{tooltip}}'
|
||||
on-mouseover-mousemove='hover'
|
||||
on-mouseleave='unhover'
|
||||
on-click-enter='{{#clickable}}press{{/}}'>
|
||||
{{#if icon}}
|
||||
<i class='fa fa-{{icon}}'></i>
|
||||
{{/if}}
|
||||
{{yield}}
|
||||
</span>
|
||||
@@ -0,0 +1,41 @@
|
||||
context = selector()
|
||||
|
||||
buttoncolor(selector, color)
|
||||
&.{selector}
|
||||
transition: background-color 0.5s
|
||||
background-color: color
|
||||
&.{selector}.active:hover,
|
||||
&.{selector}.active:focus
|
||||
transition: background-color 0.25s
|
||||
background-color: lighten(color, button-lighten-hover)
|
||||
outline: 0
|
||||
|
||||
span.button
|
||||
@extend {context} $fontReset
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
height: 20px
|
||||
line-height: @height - 3px
|
||||
padding: 0 5px
|
||||
white-space: nowrap
|
||||
|
||||
border: 1px solid button-color-border
|
||||
|
||||
.fa
|
||||
padding-right: 2px
|
||||
|
||||
buttoncolor(normal, button-color-normal)
|
||||
buttoncolor(disabled, button-color-disabled)
|
||||
buttoncolor(selected, button-color-selected)
|
||||
buttoncolor(caution, button-color-caution)
|
||||
buttoncolor(danger, button-color-danger)
|
||||
|
||||
&.gridable
|
||||
width: 125px
|
||||
margin: 2px 0
|
||||
|
||||
span:not(.button) + span.button
|
||||
margin-left: 5px
|
||||
|
||||
span.button + span:not(.button)
|
||||
margin-left: 5px
|
||||
@@ -0,0 +1,13 @@
|
||||
<div class='display'>
|
||||
{{#if title}}
|
||||
<header>
|
||||
<h3>{{title}}</h3>
|
||||
{{#if button}}
|
||||
<div class='buttonRight'>{{yield button}}</div>
|
||||
{{/if}}
|
||||
</header>
|
||||
{{/if}}
|
||||
<article>
|
||||
{{yield}}
|
||||
</article>
|
||||
</div>
|
||||
@@ -0,0 +1,29 @@
|
||||
div.display
|
||||
width: 100%
|
||||
padding: 4px
|
||||
margin: 6px 0
|
||||
|
||||
background-color: display-color-background // Transparent background.
|
||||
box-shadow: inset 0 0 5px display-color-shadow
|
||||
|
||||
header
|
||||
display: block
|
||||
position: relative
|
||||
width: 100%
|
||||
padding: 0 4px
|
||||
margin-bottom: 6px
|
||||
|
||||
color: display-color-title
|
||||
|
||||
border-bottom: rule-size solid rule-color-normal
|
||||
|
||||
.buttonRight
|
||||
position: absolute
|
||||
bottom: 6px
|
||||
right: 4px
|
||||
|
||||
article
|
||||
display: table
|
||||
width: 100%
|
||||
|
||||
border-collapse: collapse;
|
||||
@@ -0,0 +1,13 @@
|
||||
<script>
|
||||
component.exports = {
|
||||
oninit () {
|
||||
this.on('clear', () => {
|
||||
this.set('value', '')
|
||||
this.find('input').focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<input type='text' value='{{value}}' placeholder='{{placeholder}}'/>
|
||||
<ui-button icon='refresh' on-press='clear'/>
|
||||
@@ -0,0 +1,16 @@
|
||||
input
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
height: 20px
|
||||
line-height: @height - 3px
|
||||
padding: 0 5px
|
||||
white-space: nowrap
|
||||
|
||||
color: input-color-text
|
||||
background-color: input-color-background
|
||||
border: 1px solid input-color-border
|
||||
|
||||
&::placeholder
|
||||
color: input-color-placeholder
|
||||
&::-ms-clear
|
||||
display: none
|
||||
@@ -0,0 +1,88 @@
|
||||
<script>
|
||||
component.exports = {
|
||||
data: {
|
||||
graph: require('paths-js/smooth-line'),
|
||||
xaccessor: point => point.x,
|
||||
yaccessor: point => point.y
|
||||
},
|
||||
computed: {
|
||||
size () {
|
||||
const points = this.get('points')
|
||||
return points[0].length
|
||||
},
|
||||
scale () {
|
||||
const points = this.get('points')
|
||||
return Math.max(...Array.map(points, a => Math.max(...Array.map(a, p => p.y))))
|
||||
},
|
||||
xaxis () {
|
||||
const xinc = this.get('xinc')
|
||||
const size = this.get('size')
|
||||
return Array.from(Array(size).keys()).filter(num => num && num % xinc == 0)
|
||||
},
|
||||
yaxis () {
|
||||
const yinc = this.get('yinc')
|
||||
const scale = this.get('scale')
|
||||
return Array.from(Array(yinc).keys()).map(num => Math.round((scale * (++num / 100)) * 10))
|
||||
}
|
||||
},
|
||||
oninit () {
|
||||
this.on({
|
||||
enter (event) {
|
||||
this.set('selected', event.index.count)
|
||||
},
|
||||
exit (event) {
|
||||
this.set('selected')
|
||||
}
|
||||
})
|
||||
window.addEventListener('resize', (event) => {
|
||||
this.set('width', this.el.clientWidth)
|
||||
})
|
||||
},
|
||||
onrender () {
|
||||
this.set('width', this.el.clientWidth)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svg class='linegraph' width='100%' height='{{height + 10}}'>
|
||||
<g transform='translate(0, 5)'>
|
||||
{{#graph({data: points, xaccessor: xaccessor, yaccessor: yaccessor, width: width, height: height})}}
|
||||
{{#each xaxis}}
|
||||
<line x1='{{xscale(.)}}' x2='{{xscale(.)}}' y1='0' y2='{{height}}' stroke='darkgray'/>
|
||||
{{#if @index % 2 == 0}}
|
||||
<text x='{{xscale(.)}}' y='{{height - 5}}' text-anchor='middle' fill='white'>{{(size - .) * xfactor}} {{xunit}}</text>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
{{#each yaxis}}
|
||||
<line x1='0' x2='{{width}}' y1='{{yscale(.)}}' y2='{{yscale(.)}}' stroke='darkgray'/>
|
||||
<text x='0' y='{{yscale(.) - 5}}' text-anchor='begin' fill='white'>{{. * yfactor}} {{yunit}}</text>
|
||||
{{/each}}
|
||||
{{#each curves:curve}}
|
||||
<path d='{{area.path.print()}}' fill='{{colors[curve]}}' opacity='0.1'/>
|
||||
{{/each}}
|
||||
{{#each curves:curve}}
|
||||
<path d='{{line.path.print()}}' stroke='{{colors[curve]}}' fill='none'/>
|
||||
{{/each}}
|
||||
{{#each curves:curve}}
|
||||
{{#each line.path.points():count}}
|
||||
<circle transform='translate({{.}})' r='{{selected == count ? 10 : 4}}' fill='{{colors[curve]}}' on-mouseenter='enter' on-mouseleave='exit'/>
|
||||
{{/each}}
|
||||
{{/each}}
|
||||
{{#each curves:curve}}
|
||||
{{#each line.path.points():count}}
|
||||
{{#if selected == count }}
|
||||
<text transform='translate({{.}}) {{count <= size / 2 ? "translate(15, 4)" : "translate(-15, 4)"}}' text-anchor='{{count <= size / 2 ? "start" : "end"}}' fill='white'>
|
||||
{{item[count].y * yfactor}} {{yunit}} @ {{(size - item[count].x) * xfactor}} {{xunit}}
|
||||
</text>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
{{/each}}
|
||||
{{#each curves:curve}}
|
||||
<g transform='translate({{(width / (curves.length + 1)) * (@index + 1)}}, 10)'>
|
||||
<circle r='4' fill='{{colors[curve]}}'/>
|
||||
<text x='8' y='4' fill='white'>{{legend[curve]}}</text>
|
||||
</g>
|
||||
{{/each}}
|
||||
{{/graph}}
|
||||
</g>
|
||||
</svg>
|
||||
@@ -0,0 +1,2 @@
|
||||
svg.linegraph
|
||||
overflow: hidden
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class='notice'>
|
||||
{{yield}}
|
||||
</div>
|
||||
@@ -0,0 +1,27 @@
|
||||
div.notice
|
||||
margin: 8px 0
|
||||
padding: 4px
|
||||
|
||||
box-shadow: none
|
||||
|
||||
color: text-color-inverse
|
||||
font-weight: bold
|
||||
font-style: italic
|
||||
|
||||
background-color: notice-color-first
|
||||
background-image: repeating-linear-gradient(
|
||||
-45deg,
|
||||
notice-color-first,
|
||||
notice-color-first 10px,
|
||||
notice-color-second 10px,
|
||||
notice-color-second 20px
|
||||
)
|
||||
|
||||
.label
|
||||
color: text-color-inverse
|
||||
|
||||
.content:only-of-type
|
||||
padding: 0
|
||||
|
||||
hr
|
||||
background-color: rule-color-dark
|
||||
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { winset } from 'util/byond'
|
||||
import { resize } from 'util/dragresize'
|
||||
|
||||
component.exports = {
|
||||
oninit () {
|
||||
const onresize = resize.bind(this)
|
||||
const onrelease = () => this.set({ resize: false, x: null, y: null })
|
||||
|
||||
this.observe('config.fancy', (newkey, oldkey, keypath) => {
|
||||
winset(this.get('config.window'), 'can-resize', !newkey)
|
||||
|
||||
if (newkey) {
|
||||
document.addEventListener('mousemove', onresize)
|
||||
document.addEventListener('mouseup', onrelease)
|
||||
} else {
|
||||
document.removeEventListener('mousemove', onresize)
|
||||
document.removeEventListener('mouseup', onrelease)
|
||||
}
|
||||
})
|
||||
|
||||
this.on('resize', () => this.toggle('resize'))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{{#if config.fancy}}
|
||||
<div class='resize' on-mousedown='resize'></div>
|
||||
{{/if}}
|
||||
@@ -0,0 +1,12 @@
|
||||
div.resize
|
||||
position: fixed
|
||||
bottom: 0
|
||||
right: 0
|
||||
width: 0
|
||||
height: 0
|
||||
|
||||
border-style: solid;
|
||||
border-width: 0 0 45px 45px;
|
||||
border-color: transparent transparent resize-color transparent
|
||||
|
||||
transform: rotate(360deg)
|
||||
@@ -0,0 +1,12 @@
|
||||
<section class='{{#candystripe}}candystripe{{/candystripe}}'>
|
||||
{{#if label}}
|
||||
<span class='label' style='{{#labelcolor}}color:{{labelcolor}}{{/labelcolor}}'>{{label}}:</span>
|
||||
{{/if}}
|
||||
{{#if nowrap}}
|
||||
{{yield}}
|
||||
{{else}}
|
||||
<div class='content' style='{{#right}}float:right;{{/right}}'>
|
||||
{{yield}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</section>
|
||||
@@ -0,0 +1,33 @@
|
||||
/$cell
|
||||
display: table-cell
|
||||
margin: 0
|
||||
text-align: left
|
||||
vertical-align: middle
|
||||
padding: 3px 2px
|
||||
|
||||
section
|
||||
display: table-row
|
||||
width: 100%
|
||||
|
||||
&:not(:first-child)
|
||||
padding-top: 4px
|
||||
|
||||
&.candystripe:nth-child(even)
|
||||
background-color: section-color-candystripe
|
||||
|
||||
.label
|
||||
@extend $cell
|
||||
width: 1%
|
||||
padding-right: 32px
|
||||
white-space: nowrap
|
||||
|
||||
color: section-color-label
|
||||
|
||||
.content
|
||||
@extend $cell
|
||||
&:not(:last-child)
|
||||
padding-right: 16px
|
||||
|
||||
.line
|
||||
@extend $cell
|
||||
width: 100%
|
||||
@@ -0,0 +1,11 @@
|
||||
<div class='subdisplay'>
|
||||
{{#if title}}
|
||||
<header>
|
||||
<h4>{{title}}</h4>
|
||||
{{#if button}}{{yield button}}{{/if}}
|
||||
</header>
|
||||
{{/if}}
|
||||
<article>
|
||||
{{yield}}
|
||||
</article>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
context = selector()
|
||||
|
||||
div.subdisplay
|
||||
width: 100%
|
||||
margin: 0
|
||||
|
||||
header
|
||||
@extend {context} div.display header
|
||||
|
||||
article
|
||||
@extend {context} div.display article
|
||||
@@ -0,0 +1,27 @@
|
||||
<link rel='ractive' href='components/tabs/tab.ract'>
|
||||
|
||||
<script>
|
||||
component.exports = {
|
||||
oninit () {
|
||||
this.set('active', this.findComponent('tab').get('name'))
|
||||
this.on('switch', event => {
|
||||
this.set('active', event.node.textContent.trim()) // Hack but it works...
|
||||
})
|
||||
|
||||
this.observe('active', (newkey, oldkey, path) => {
|
||||
for (let tab of this.findAllComponents('tab')) {
|
||||
tab.set('shown', (tab.get('name') === newkey))
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<header>
|
||||
{{#each tabs}}
|
||||
<ui-button pane='{{.}}' on-press='switch'>{{.}}</ui-button>
|
||||
{{/each}}
|
||||
</header>
|
||||
<ui-display>
|
||||
{{>content}}
|
||||
</ui-display>
|
||||
@@ -0,0 +1,3 @@
|
||||
{{#if shown}}
|
||||
{{yield}}
|
||||
{{/if}}
|
||||
@@ -0,0 +1,56 @@
|
||||
<script>
|
||||
import { UI_INTERACTIVE, UI_UPDATE, UI_DISABLED } from 'util/constants'
|
||||
import { href, winset } from 'util/byond'
|
||||
import { drag } from 'util/dragresize'
|
||||
|
||||
component.exports = {
|
||||
computed: {
|
||||
visualStatus () {
|
||||
switch (this.get('config.status')) {
|
||||
case UI_INTERACTIVE: return 'good'
|
||||
case UI_UPDATE: return 'average'
|
||||
case UI_DISABLED: return 'bad'
|
||||
default: return 'bad'
|
||||
}
|
||||
}
|
||||
},
|
||||
oninit () {
|
||||
const ondrag = drag.bind(this)
|
||||
const onrelease = (event) => this.set({ drag: false, x: null, y: null })
|
||||
|
||||
this.observe('config.fancy', (newkey, oldkey, keypath) => {
|
||||
winset(this.get('config.window'), 'titlebar', !newkey)
|
||||
|
||||
if (newkey) {
|
||||
document.addEventListener('mousemove', ondrag)
|
||||
document.addEventListener('mouseup', onrelease)
|
||||
} else {
|
||||
document.removeEventListener('mousemove', ondrag)
|
||||
document.removeEventListener('mouseup', onrelease)
|
||||
}
|
||||
})
|
||||
|
||||
this.on({
|
||||
drag () {
|
||||
this.toggle('drag')
|
||||
},
|
||||
close () {
|
||||
winset(this.get('config.window'), 'is-visible', false)
|
||||
window.location.href = href({command: `uiclose ${this.get('config.ref')}`}, 'winset')
|
||||
},
|
||||
minimize () {
|
||||
winset(this.get('config.window'), 'is-minimized', true)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<header class='titlebar' on-mousedown='drag'>
|
||||
<i class='statusicon fa fa-eye fa-2x {{visualStatus}}'></i>
|
||||
<span class='title'>{{yield}}</span>
|
||||
{{#if config.fancy}}
|
||||
<i class='minimize fa fa-minus fa-2x' on-click='minimize'></i>
|
||||
<i class='close fa fa-close fa-2x' on-click='close'></i>
|
||||
{{/if}}
|
||||
</header>
|
||||
@@ -0,0 +1,65 @@
|
||||
context = selector()
|
||||
|
||||
$titleButton
|
||||
display: inline-block
|
||||
position: relative
|
||||
padding: 7px // To make a bigger clickable area.
|
||||
margin: -7px
|
||||
|
||||
color: titlebar-color-button;
|
||||
|
||||
&:hover
|
||||
color: lighten(titlebar-color-button, button-lighten-hover)
|
||||
|
||||
header.titlebar
|
||||
position: fixed;
|
||||
z-index: 1
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
|
||||
background-color: titlebar-color-background
|
||||
border-bottom: 1px solid titlebar-color-coreshadow
|
||||
box-shadow: 0 3px 3px titlebar-color-shadow
|
||||
|
||||
.statusicon
|
||||
position: absolute
|
||||
top: 4px
|
||||
left: 12px
|
||||
transition: color 0.5s
|
||||
|
||||
.title
|
||||
position: absolute
|
||||
top: 6px
|
||||
left: 46px
|
||||
|
||||
color: titlebar-color-text
|
||||
font-size: 16px
|
||||
white-space: nowrap
|
||||
|
||||
.minimize
|
||||
@extend {context} $titleButton
|
||||
position: absolute
|
||||
top: 6px
|
||||
right: 46px
|
||||
.close
|
||||
@extend {context} $titleButton
|
||||
position: absolute
|
||||
top: 4px
|
||||
right: 12px
|
||||
|
||||
/.no-icons header.titlebar
|
||||
.statusicon
|
||||
font-size: 20px
|
||||
&::after
|
||||
content: "O"
|
||||
.minimize
|
||||
top: -2px
|
||||
font-size: 20px
|
||||
&::after
|
||||
content: "—"
|
||||
.close
|
||||
font-size: 20px
|
||||
&::after
|
||||
content: "X"
|
||||
@@ -0,0 +1,47 @@
|
||||
<script>
|
||||
const versions = [11, 10, 9, 8]
|
||||
|
||||
component.exports = {
|
||||
data: {
|
||||
userAgent: navigator.userAgent
|
||||
},
|
||||
computed: {
|
||||
ie () {
|
||||
if (document.documentMode) return document.documentMode
|
||||
for (let version in versions) {
|
||||
const div = document.createElement('div')
|
||||
div.innerHTML = `<!--[if IE ${version}]><span></span><![endif]-->`
|
||||
if (div.getElementsByTagName('span').length) return version
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
},
|
||||
oninit () {
|
||||
this.on('debug', () => this.toggle('debug'))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{{#if config.fancy && ie && ie < 11}}
|
||||
<ui-notice>
|
||||
<span>You have an old (IE{{ie}}), end-of-life (click 'EOL Info' for more information) version of Internet Explorer installed.</span><br/>
|
||||
<span>To upgrade, click 'Upgrade IE' to download IE11 from Microsoft.</span><br/>
|
||||
<span>If you are unable to upgrade directly, click 'IE VMs' to download a VM with IE11 or Edge from Microsoft.</span><br/>
|
||||
<span>Otherwise, click 'No Frills' below to disable potentially incompatible features (and this message).</span>
|
||||
<hr/>
|
||||
<ui-button icon='close' action='tgui:nofrills'>No Frills</ui-button>
|
||||
<ui-button icon='internet-explorer' action='tgui:link' params='{"url": "http://windows.microsoft.com/en-us/internet-explorer/download-ie"}'>
|
||||
Upgrade IE</ui-button>
|
||||
<ui-button icon='edge' action='tgui:link' params='{"url": "https://dev.windows.com/en-us/microsoft-edge/tools/vms"}'>
|
||||
IE VMs</ui-button>
|
||||
<ui-button icon='info' action='tgui:link' params='{"url": "https://support.microsoft.com/en-us/lifecycle#gp/Microsoft-Internet-Explorer"}'>
|
||||
EOL Info</ui-button>
|
||||
<ui-button icon='bug' on-press='debug'>Debug Info</ui-button>
|
||||
{{#if debug}}
|
||||
<hr/>
|
||||
<span>Detected: IE{{ie}}</span><br/>
|
||||
<span>User Agent: {{userAgent}}</span>
|
||||
{{/if}}
|
||||
</ui-notice>
|
||||
{{/if}}
|
||||
Reference in New Issue
Block a user