Archives/ohwgiles_laminar
1
0
Fork 0
mirror of https://github.com/ohwgiles/laminar.git synced 2024-10-27 20:34:20 +00:00
Code Issues Projects Releases Wiki Activity

replace gif status indicators with unicode symbols

Browse Source
This commit is contained in:
David Kalnischkies 2017-12-28 15:57:57 +01:00 committed by Oliver Giles
parent 6e4c89bd73
commit ae961b97cb
7 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CMakeLists.txt
View File

@ -58,7 +58,7 @@ add_custom_command(OUTPUT laminar.capnp.c++ laminar.capnp.h
# Zip and compile statically served resources # Zip and compile statically served resources
generate_compressed_bins(${CMAKE_SOURCE_DIR}/src/resources index.html js/app.js generate_compressed_bins(${CMAKE_SOURCE_DIR}/src/resources index.html js/app.js
favicon.ico favicon-152.png icon.png tick.gif cross.gif spin.gif) favicon.ico favicon-152.png icon.png)
# Download 3rd-party frontend JS libs... # Download 3rd-party frontend JS libs...
file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js

4
src/resources.cpp
View File

@ -27,7 +27,6 @@
#define CONTENT_TYPE_HTML "text/html; charset=utf-8" #define CONTENT_TYPE_HTML "text/html; charset=utf-8"
#define CONTENT_TYPE_ICO "image/x-icon" #define CONTENT_TYPE_ICO "image/x-icon"
#define CONTENT_TYPE_PNG "image/png" #define CONTENT_TYPE_PNG "image/png"
#define CONTENT_TYPE_GIF "image/gif"
#define CONTENT_TYPE_JS "application/javascript; charset=utf-8" #define CONTENT_TYPE_JS "application/javascript; charset=utf-8"
#define CONTENT_TYPE_CSS "text/css; charset=utf-8" #define CONTENT_TYPE_CSS "text/css; charset=utf-8"
@ -37,9 +36,6 @@ Resources::Resources()
INIT_RESOURCE("/favicon.ico", favicon_ico, CONTENT_TYPE_ICO); INIT_RESOURCE("/favicon.ico", favicon_ico, CONTENT_TYPE_ICO);
INIT_RESOURCE("/favicon-152.png", favicon_152_png, CONTENT_TYPE_PNG); INIT_RESOURCE("/favicon-152.png", favicon_152_png, CONTENT_TYPE_PNG);
INIT_RESOURCE("/icon.png", icon_png, CONTENT_TYPE_PNG); INIT_RESOURCE("/icon.png", icon_png, CONTENT_TYPE_PNG);
INIT_RESOURCE("/tick.gif", tick_gif, CONTENT_TYPE_GIF);
INIT_RESOURCE("/cross.gif", cross_gif, CONTENT_TYPE_GIF);
INIT_RESOURCE("/spin.gif", spin_gif, CONTENT_TYPE_GIF);
INIT_RESOURCE("/js/app.js", js_app_js, CONTENT_TYPE_JS); INIT_RESOURCE("/js/app.js", js_app_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/Chart.HorizontalBar.js", js_Chart_HorizontalBar_js, CONTENT_TYPE_JS); INIT_RESOURCE("/js/Chart.HorizontalBar.js", js_Chart_HorizontalBar_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/ansi_up.js", js_ansi_up_js, CONTENT_TYPE_JS); INIT_RESOURCE("/js/ansi_up.js", js_ansi_up_js, CONTENT_TYPE_JS);

BIN
src/resources/cross.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 178 B

18
src/resources/index.html
View File

@ -48,6 +48,22 @@
right: 10px; right: 10px;
padding: 20px; padding: 20px;
} }
span.status {
display: inline-block;
width: 1em;
text-align: center;
font-family: sans-serif;
}
span.success { color: forestgreen; }
span.failed { color: firebrick; }
span.aborted { color: indigo; }
span.spin {
color: steelblue;
animation: 2s linear infinite spin;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style> </style>
</head> </head>
<body> <body>
@ -229,7 +245,7 @@
</nav> </nav>
<a v-on:click="toggleNotifications(!notify)" v-show="supportsNotifications" class="bell pull-right" :class="{'active':notify}" :title="(notify?'Disable':'Enable')+' notifications'">&#128276;</a> <a v-on:click="toggleNotifications(!notify)" v-show="supportsNotifications" class="bell pull-right" :class="{'active':notify}" :title="(notify?'Disable':'Enable')+' notifications'">&#128276;</a>
<router-view></router-view> <router-view></router-view>
<div v-show="!connected" id="popup-connecting"><img src="/spin.gif">&nbsp;Connecting...</div> <div v-show="!connected" id="popup-connecting"><span class="status spin">⚙&#xfe0e;</span>&nbsp;Connecting...</div>
</div> </div>
</body> </body>
</html> </html>

10
src/resources/js/app.js
View File

@ -75,7 +75,15 @@ const WebsocketHandler = function() {
const Utils = { const Utils = {
methods: { methods: {
runIcon(result) { runIcon(result) {
return result === "success" ? '<img src="/tick.gif">' : result === "failed" || result === "aborted" ? '<img src="/cross.gif">' : '<img src="/spin.gif">'; var marker = '⚙';
var classname = result;
if (result === 'success')
marker = '✔';
else if (result === 'failed' || result === 'aborted')
marker = '✘';
else
classname = 'spin';
return '<span title="' + result + '" class="status ' + classname + '">' + marker + '&#xfe0e;</span>';
}, },
formatDate: function(unix) { formatDate: function(unix) {
// TODO: reimplement when toLocaleDateString() accepts formatting options on most browsers // TODO: reimplement when toLocaleDateString() accepts formatting options on most browsers

BIN
src/resources/spin.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/resources/tick.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 114 B