Skip to content

Commit

Permalink
UI improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@karliky
karliky committed May 30, 2020
1 parent bc9d1d1 commit 715e48f
Show file tree
Hide file tree
Showing 6 changed files with 153 additions and 136 deletions.
4 changes: 0 additions & 4 deletions src/core/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,14 +200,10 @@ window.launch = launchCore;
// 4.3.4 probably ignore me wow.exe+201937 - F3 0F10 15 6067EF00 - movss xmm2,[wow.exe+7B6760] { (-340282346638528860000000000000000000000.00) }
// 4.3.4 Fog related? wow.exe+4E4BDE - E8 BD70FBFF - call wow.exe+49BCA0
// 4.3.4 This renders a lot of things wow.exe+4E2D30 - E8 8B0EC8FF - call wow.exe+163BC0


// Common pattern 01 00 00 00 3A 12 0A 43 00 40 1C C6 AB 6A 2D 44
// 3.3.5a Wow.exe+393813 - E8 F8C20300 - call Wow.exe+3CFB10
// 4.3.4 may be related with rendering wow.exe+6C3188 - D8 0D E4902301 - fmul dword ptr [wow.exe+7890E4] { (1333788672) }
//wow.exe+35CBA4 - E8 B7AAFFFF - call wow.exe+357660


// 4.3.4 this is environment wow.exe+35D266 - E8 6569FFFF - call wow.exe+353BD0
// 4.3.4 water related wow.exe+328B2D - D9 05 58752701 - fld dword ptr [wow.exe+7C7558] { (0.94) }
// 4.3.4 everything wow.exe+328B9D - E8 DEA90200 - call wow.exe+353580
Expand Down
205 changes: 115 additions & 90 deletions src/renderer/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,114 +342,139 @@
color: #fff;
}
/**
* Select
*/
.select select {
background: #10141c;
color: #e8e8ea;
border: 1px solid #1e2433;
height: 2.2em;
padding-top: 4px;
}
.select select:hover {
border: 1px solid #1e2433;
}
.select:not(.is-multiple):not(.is-loading)::after {
border-color: #626b82;
top: 45%;
}
.select:not(.is-multiple):not(.is-loading):hover::after {
border-color: #ff1a3b;
}
/**
* Tooltip
*/
.tooltip {
display: block !important;
z-index: 10000;
}
display: block !important;
z-index: 10000;
font-size: 0.85em;
}
.tooltip .tooltip-inner {
background: black;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip .tooltip-inner {
background: black;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
z-index: 1;
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
z-index: 1;
}
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"] {
margin-left: 5px;
}
.tooltip[x-placement^="right"] {
margin-left: 5px;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip.popover .popover-inner {
background: #f9f9f9;
color: black;
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
}
.tooltip.popover .popover-inner {
background: #f9f9f9;
color: black;
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
}
.tooltip.popover .popover-arrow {
border-color: #f9f9f9;
}
.tooltip.popover .popover-arrow {
border-color: #f9f9f9;
}
.tooltip[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
.tooltip[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
.tooltip[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
.tooltip[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
/*
* Scrollbar
Expand Down
1 change: 0 additions & 1 deletion src/renderer/components/keyboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,6 @@
const shouldLoop = this.$store.state.camera.loopCinematic;
const store = this.$store;
const easing = this.$store.state.camera.easing;
console.log('# easing', easing);
return playCinematic(steps, speed, store, shouldLoop, easing);
}
},
Expand Down
24 changes: 0 additions & 24 deletions src/renderer/components/navbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,30 +59,6 @@ export default {
}
}
};
document.addEventListener("DOMContentLoaded", () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener("click", () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
});
</script>

<style scoped>
Expand Down
53 changes: 37 additions & 16 deletions src/renderer/components/sections/cinematicBuilder.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@
<div class="columns">
<div class="column is-one-quarter">
<div class="field">
<label class="label">Cinematic duration</label>
<label class="label">Cinematic duration in seconds</label>
<p class="help">This sets how much the cinematic will last.</p>
<div class="control">
<input
class="input"
Expand All @@ -43,12 +44,12 @@
v-on:input="setCinematicSpeed($event)"
placeholder="Value in seconds, defaults to 10.">
</div>
<p class="help">This sets how much the cinematic will last.</p>
</div>
</div>
<div class="column is-one-quarter">
<div class="field">
<label class="label">Easing</label>
<p class="help easing">Open <a v-on:click="open('https://greensock.com/docs/v2/Easing')">Ease Visualizer</a></p>
<div class="control">
<div class="select">
<select v-on:change="setEasing">
Expand All @@ -67,21 +68,20 @@
</select>
</div>
</div>
<p class="help">This sets how much the cinematic will last.</p>
</div>
</div>
<div class="column">
<div class="field">
<input
type="checkbox"
id="loop_cinematic"
name="loop_cinematic"
v-model="loopCinematic"
v-on:change="setLoopCinematic($event)"
/>
<label for="loop_cinematic"><span></span>Loop cinematic</label>
<p class="help">Cinematic plays in infinite loop</p>
</div>
<label class="checkbox checkbox-custom">
Play in infinite loop
<input
type="checkbox"
id="loop_cinematic"
name="loop_cinematic"
v-model="loopCinematic"
v-on:change="setLoopCinematic($event)"
/>
<div class="checkbox_indicator"></div>
</label>
</div>
</div>
<div class="table-container">
Expand Down Expand Up @@ -129,6 +129,9 @@
</template>

<script>
const { shell } = require('electron');
function reportWindowSize() {
if (this.$refs.table_cinematic) {
const height = window.innerHeight - 100;
Expand All @@ -143,6 +146,9 @@
spectateMenu: require('./spectateMenu'),
},
methods: {
open(url) {
shell.openExternal(url);
},
setRoll ({ target: element }, index) {
this.$store.commit('setRoll', { index, value: element.value });
},
Expand Down Expand Up @@ -183,7 +189,22 @@
</script>

<style scoped>
.cinematic_builder {
user-select: none;
.help {
color: #626b82;
margin-top: 0;
}
a {
color: #626b82;
text-decoration: underline;
}
a:hover {
text-decoration: none;
color: #ff1a3b;
}
.easing {
margin-top: -2px;
}
.label, .label:not(:last-child) {
margin-bottom: 0;
}
</style>
2 changes: 1 addition & 1 deletion src/renderer/components/sections/laboratory.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="container">
<div>
<div class="tabs is-boxed">
<settingsMenu></settingsMenu>
</div>
Expand Down

0 comments on commit 715e48f

Please sign in to comment.