Skip to content

Commit 930b80f

Browse files
keliphankeliphan
committed
fixed html elements buttons and scrollbars
2 parents 1616000 + d4d97dd commit 930b80f

File tree

7 files changed

+71
-51
lines changed

7 files changed

+71
-51
lines changed

‎package-lock.json

Lines changed: 1 addition & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"localforage": "^1.7.3",
2626
"lodash": ">=4.17.13",
2727
"lodash.isequal": "^4.5.0",
28+
"lodash.throttle": "^4.1.1",
2829
"mousetrap": "^1.6.3",
2930
"prismjs": "^1.16.0",
3031
"quasar": "^1.0.0",

‎src/App.vue

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,19 @@
88
import { SET_ACTIVE_COMPONENT } from './store/types'
99
const deepEqual = require('lodash.isequal')
1010
const cloneDeep = require('lodash.clonedeep')
11+
const throttle = require('lodash.throttle')
1112
import { defaultState } from './store/state/index.js'
1213
14+
15+
//use this to make sure these actions don't count as things you "undo"
16+
const ignoredActions = new Set([
17+
"setActiveComponent",
18+
"setActiveLayer",
19+
"upOneLayer",
20+
"setActiveHTML"
21+
])
22+
23+
1324
let redoMixin = {
1425
data () {
1526
return {
@@ -47,19 +58,24 @@ let redoMixin = {
4758
},
4859
4960
mounted () {
61+
62+
const throttledUndo = throttle(this.undo,300)
63+
const throttledRedo = throttle(this.redo,300)
64+
5065
window.addEventListener('keydown', event => {
5166
if (event.ctrlKey && event.key === 'z') {
5267
event.preventDefault()
53-
this.undo()
68+
throttledUndo()
5469
}
5570
})
5671
window.addEventListener('keydown', event => {
5772
if (event.ctrlKey && event.key === 'y') {
5873
event.preventDefault()
59-
this.redo()
74+
throttledRedo()
6075
}
6176
})
6277
78+
// commented code for hotkeys for debuging///////////////////////
6379
// window.addEventListener('keydown', event => {
6480
// if (event.ctrlKey && event.key === 'a') {
6581
// event.preventDefault()
@@ -76,6 +92,7 @@ let redoMixin = {
7692
// }
7793
// }
7894
// });
95+
//////////////////////////////////////////////////////////////////////
7996
8097
// console.log("do we want this? or this.$store.state?", this.$store.state)
8198
this.initialState = defaultState(this.$store.state)
@@ -85,48 +102,62 @@ let redoMixin = {
85102
undo: function () {
86103
// do {
87104
// console.log("How far back?")
105+
if(this.doneAction.length ===0){
106+
return
107+
}
88108
89109
this.isTimetraveling = true
90110
91111
let undone = this.doneAction.pop()
92112
113+
// assuming we have have something to undo, we check if we are undoing an action that has no feedback
114+
// like say changing active elements or active components or going up and down a layer since these can be obscured from immediate feedback
115+
// will just feel bad to undo (Imagine someone just clicking around out of boredom and then deciding to undo
116+
// will force them to have to undo the 30 highlights they just did instead of the last "Real" action)
117+
// if this happens we keep popping the doneAction queue and building up the redo queue.
93118
if (undone !== undefined) {
94119
this.undoneAction.push(undone)
95-
if (undone.type === 'setActiveComponent') {
120+
if (ignoredActions.has(undone.type)) {
96121
// console.log('We did something useless!')
97-
do {
122+
while (this.doneAction[this.doneAction.length - 1] &&
123+
ignoredActions.has(this.doneAction[this.doneAction.length - 1].type)){
98124
this.undoneAction.push(this.doneAction.pop())
99125
}
100-
while (this.doneAction[this.doneAction.length - 1] &&
101-
(this.doneAction[this.doneAction.length - 1].type === 'setActiveComponent'))
126+
// if we get here, that means we have undone all "useless" actions
127+
// so we have to do one more final pop and push, have to make sure it isn't null though
128+
let finalPop = this.doneAction.pop()
129+
if(finalPop !== undefined){
130+
this.undoneAction.push(finalPop)
131+
}
102132
}
133+
103134
}
104135
105-
// while (this.doneAction[this.doneAction.length-1] &&
106-
// (this.doneAction[this.doneAction.length - 1].type === "setActiveComponent" ||
107-
// this.doneAction[this.doneAction.length - 1].type === "updateComponentPosition" ))
108136
let payload = {
109137
initialState: this.initialState,
110138
store: this.$store
111139
}
112140
this.$store.commit('EMPTY_STATE', payload)
113141
this.doneAction.forEach(action => {
114-
// console.log('In the loop', this.$store)
142+
//console.log('In the loop', this.$store)
115143
// this.$store.commit(`${mutation.type}`, mutation.payload);
116144
this.$store.dispatch(action.type, cloneDeep(action.payload))
117145
this.doneAction.pop()
118146
})
119147
this.isTimetraveling = false
120148
},
149+
121150
redo: function () {
122151
let action = this.undoneAction.pop()
152+
153+
//we have to set timeTraveling to true to preserve the undoneAction array while we make changes
123154
this.isTimetraveling = true
124155
if (action) {
125156
this.$store.dispatch(action.type, cloneDeep(action.payload))
126157
}
127158
this.isTimetraveling = false
128-
if (action && (action.type === 'setActiveComponent')) {
129-
console.log('WE GOTTA DO MORE')
159+
if (action && ignoredActions.has(action.type)) {
160+
//console.log('WE GOTTA DO MORE')
130161
this.redo()
131162
}
132163
}

‎src/components/ComponentDisplay.vue

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -177,28 +177,6 @@ export default {
177177
return this.imagePath[this.activeRoute]
178178
? {
179179
background: `url("${this.userImage}") center/contain no-repeat rgba(223, 218, 218, 0.886)`,
180-
// 'background-color': 'rgba(223, 218, 218, 0.886)',
181-
// 'background-size': '100px 100px, 100px 100px, 20px 20px, 20px 20px',
182-
// 'background-position':' -2px -2px, -2px -2px, -1px -1px, -1px -1px',
183-
// 'background-image': `-webkit-linear-gradient(white 2px, transparent 2px),
184-
// -webkit-linear-gradient(0, white 2px, transparent 2px),
185-
// -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
186-
// -webkit-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px)`,
187-
// 'background-image': `-moz-linear-gradient(white 2px, transparent 2px),
188-
// -moz-linear-gradient(0, white 2px, transparent 2px),
189-
// -moz-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
190-
// -moz-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px)`,
191-
// 'background-image': `linear-gradient(white 2px, transparent 2px),
192-
// linear-gradient(90deg, white 2px, transparent 2px),
193-
// linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
194-
// linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px)`,
195-
// '-pie-background': `linear-gradient(white 2px, transparent 2px) -2px -2px / 100px,
196-
// linear-gradient(90deg, white 2px, transparent 2px) -2px -2px / 100px,
197-
// linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
198-
// 20px, linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px /
199-
// 20px, #269`,
200-
// 'background-image': `url(${this.userImage})`,
201-
// behavior: 'url(/pie/PIE.htc)',
202180
}
203181
: {}
204182
}

‎src/components/HomeQueue.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ li {
211211
}
212212
213213
#unavailable {
214-
color: grey;
214+
color: #686868;
215215
cursor: default
216216
}
217217

‎src/css/app.styl

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,21 +27,30 @@ main {
2727
// background: rgb(22,108,105);
2828
// background: linear-gradient(36deg, rgba(22,108,105,1) 0%, rgba(20,32,23,1) 100%);
2929
}
30-
// ::-webkit-scrollbar {
31-
// width: 2px;
32-
// }
3330

34-
::-webkit-scrollbar {
35-
width: 12px;
31+
::-webkit-scrollbar
32+
{
33+
width: 10px;
34+
background-color: $subsecondary;
3635
}
37-
38-
::-webkit-scrollbar-track {
39-
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
40-
border-radius: 10px;
36+
37+
::-webkit-scrollbar-track
38+
{
39+
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
40+
border-radius: 10px;
41+
background-color: $subsecondary;
4142
}
42-
43-
::-webkit-scrollbar-thumb {
44-
border-radius: 10px;
45-
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
43+
44+
::-webkit-scrollbar-thumb
45+
{
46+
border-radius: 10px;
47+
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
48+
background-color: #303030;
4649
}
4750

51+
::-webkit-scrollbar-thumb:hover
52+
{
53+
border-radius: 10px;
54+
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
55+
background-color: #404040;
56+
}

‎src/store/mutations.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -424,7 +424,9 @@ const mutations = {
424424
*/
425425
[types.IMPORT_IMAGE]: (state, payload) => {
426426
console.log(`import image invoked. image: ${payload.img} ${payload.route}`)
427-
state.imagePath = { ...state.imagePath, [payload.route]: payload.img }
427+
428+
console.log(payload.img.replace(/\\/g,"/"))
429+
state.imagePath = { ...state.imagePath, [payload.route]: payload.img.replace(/\\/g,"/") }
428430
// state.imagePath[payload.route] = payload.img
429431
},
430432
[types.CLEAR_IMAGE]: (state, payload) => {

0 commit comments

Comments
 (0)