Skip to content

Commit 58cfd2b

Browse files
agalwoodagalwood
authored
Merge pull request #944 from agalwood/feature/improve_detail_20210513
feat: improve task detail
2 parents 85ae4cd + 804f864 commit 58cfd2b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+684
-895
lines changed

‎package.json

+15-15
Original file line numberDiff line numberDiff line change
@@ -204,9 +204,9 @@
204204
"electron-is": "^3.0.0",
205205
"electron-log": "^4.3.5",
206206
"electron-store": "^8.0.0",
207-
"electron-updater": "^4.3.8",
207+
"electron-updater": "^4.3.9",
208208
"element-ui": "^2.15.1",
209-
"i18next": "^20.2.2",
209+
"i18next": "^20.2.4",
210210
"lodash": "^4.17.21",
211211
"node-fetch": "^2.6.1",
212212
"normalize.css": "^8.0.1",
@@ -221,34 +221,34 @@
221221
"ws": "^7.4.5"
222222
},
223223
"devDependencies": {
224-
"@babel/core": "^7.14.0",
224+
"@babel/core": "^7.14.2",
225225
"@babel/plugin-proposal-class-properties": "^7.13.0",
226-
"@babel/plugin-transform-runtime": "^7.13.15",
227-
"@babel/preset-env": "^7.14.1",
226+
"@babel/plugin-transform-runtime": "^7.14.2",
227+
"@babel/preset-env": "^7.14.2",
228228
"@babel/register": "^7.13.16",
229229
"@electron/remote": "^1.1.0",
230230
"@motrix/multispinner": "^0.2.2",
231231
"@vue/eslint-config-standard": "^6.0.0",
232-
"ajv": "^8.2.0",
232+
"ajv": "^8.4.0",
233233
"babel-eslint": "^10.1.0",
234234
"babel-loader": "^8.2.2",
235235
"babel-plugin-component": "^1.1.1",
236-
"cfonts": "^2.9.1",
236+
"cfonts": "^2.9.2",
237237
"chalk": "^4.1.1",
238238
"copy-webpack-plugin": "^8.1.1",
239239
"cross-env": "^7.0.3",
240240
"css-loader": "^5.2.4",
241-
"css-minimizer-webpack-plugin": "^2.0.0",
241+
"css-minimizer-webpack-plugin": "^3.0.0",
242242
"del": "^6.0.0",
243243
"electron": "^11.4.5",
244244
"electron-builder": "22.10.5",
245245
"electron-builder-notarize": "^1.2.0",
246246
"electron-devtools-installer": "^3.2.0",
247247
"electron-notarize": "^1.0.0",
248248
"electron-osx-sign": "^0.5.0",
249-
"eslint": "^7.25.0",
249+
"eslint": "^7.26.0",
250250
"eslint-friendly-formatter": "^4.0.1",
251-
"eslint-plugin-import": "^2.22.1",
251+
"eslint-plugin-import": "^2.23.1",
252252
"eslint-plugin-node": "^11.1.0",
253253
"eslint-plugin-promise": "^5.1.0",
254254
"eslint-plugin-vue": "^7.9.0",
@@ -257,15 +257,15 @@
257257
"html-webpack-plugin": "^5.3.1",
258258
"mini-css-extract-plugin": "1.6.0",
259259
"node-loader": "^2.0.0",
260-
"sass": "^1.32.12",
261-
"sass-loader": "^11.0.1",
260+
"sass": "^1.32.13",
261+
"sass-loader": "^11.1.1",
262262
"style-loader": "^2.0.0",
263-
"terser-webpack-plugin": "^5.1.1",
263+
"terser-webpack-plugin": "^5.1.2",
264264
"url-loader": "^4.1.1",
265-
"vue-loader": "^15.9.6",
265+
"vue-loader": "^15.9.7",
266266
"vue-style-loader": "^4.1.3",
267267
"vue-template-compiler": "^2.6.12",
268-
"webpack": "^5.36.2",
268+
"webpack": "^5.37.0",
269269
"webpack-cli": "^4.7.0",
270270
"webpack-dev-server": "^3.11.2",
271271
"webpack-hot-middleware": "^2.25.0",

‎src/renderer/components/TaskDetail/Index.vue

+115-17
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
:title="$t('task.task-detail-title')"
77
:with-header="true"
88
:show-close="true"
9+
:destroy-on-close="true"
910
:visible.sync="visible"
1011
:before-close="handleClose"
1112
@closed="handleClosed"
@@ -44,7 +45,19 @@
4445
</el-tab-pane>
4546
</el-tabs>
4647
<div class="task-detail-actions">
47-
<mo-task-item-actions mode="DETAIL" :task="task" />
48+
<div class="action-wrapper action-wrapper-left" v-if="optionsChanged">
49+
<el-button @click="resetChanged">
50+
{{$t('app.reset')}}
51+
</el-button>
52+
</div>
53+
<div class="action-wrapper action-wrapper-center">
54+
<mo-task-item-actions mode="DETAIL" :task="task" />
55+
</div>
56+
<div class="action-wrapper action-wrapper-right" v-if="optionsChanged">
57+
<el-button type="primary" @click="saveChanged">
58+
{{$t('app.save')}}
59+
</el-button>
60+
</div>
4861
</div>
4962
</el-drawer>
5063
</template>
@@ -59,7 +72,12 @@
5972
getFileName,
6073
getFileExtension
6174
} from '@shared/utils'
62-
import { EMPTY_STRING, TASK_STATUS } from '@shared/constants'
75+
import {
76+
EMPTY_STRING,
77+
NONE_SELECTED_FILES,
78+
SELECTED_ALL_FILES,
79+
TASK_STATUS
80+
} from '@shared/constants'
6381
import TaskItemActions from '@/components/Task/TaskItemActions'
6482
import TaskGeneral from './TaskGeneral'
6583
import TaskActivity from './TaskActivity'
@@ -112,7 +130,10 @@
112130
formLabelWidth: calcFormLabelWidth(locale),
113131
locale,
114132
activeTab: 'general',
115-
graphicWidth: 0
133+
graphicWidth: 0,
134+
optionsChanged: false,
135+
filesSelection: EMPTY_STRING,
136+
selectionChangedCount: 0
116137
}
117138
},
118139
computed: {
@@ -141,8 +162,8 @@
141162
selected: item.selected === 'true',
142163
path: item.path,
143164
name,
144-
extension,
145-
length: item.length,
165+
extension: `.${extension}`,
166+
length: parseInt(item.length, 10),
146167
completedLength: item.completedLength
147168
}
148169
})
@@ -158,35 +179,37 @@
158179
}
159180
},
160181
mounted () {
161-
window.addEventListener('resize', debounce(() => {
162-
console.log('resize===>', this.activeTab, this.$refs.taskGraphic)
163-
if (this.activeTab === 'activity' && this.$refs.taskGraphic) {
164-
this.$refs.taskGraphic.updateGraphicWidth()
165-
}
166-
}, 300))
182+
window.addEventListener('resize', this.handleAppResize)
167183
},
168184
destroyed () {
185+
window.removeEventListener('resize', this.handleAppResize)
169186
cached.files = []
170-
window.removeEventListener('resize')
171187
},
172188
methods: {
173189
handleClose (done) {
190+
window.removeEventListener('resize', this.handleAppResize)
174191
this.$store.dispatch('task/hideTaskDetail')
175192
},
176193
handleClosed (done) {
177194
this.$store.dispatch('task/updateCurrentTaskGid', EMPTY_STRING)
178195
this.$store.dispatch('task/updateCurrentTaskItem', null)
196+
this.optionsChanged = false
197+
this.resetFaskFilesSelection()
179198
},
180199
handleTabBeforeLeave (activeName, oldActiveName) {
181200
this.activeTab = activeName
182-
if (oldActiveName !== 'peers') {
183-
return
201+
this.optionsChanged = false
202+
switch (oldActiveName) {
203+
case 'peers':
204+
this.$store.dispatch('task/toggleEnabledFetchPeers', false)
205+
break
206+
case 'files':
207+
this.resetFaskFilesSelection()
208+
break
184209
}
185-
this.$store.dispatch('task/toggleEnabledFetchPeers', false)
186210
},
187211
handleTabClick (tab) {
188212
const { name } = tab
189-
190213
switch (name) {
191214
case 'peers':
192215
this.$store.dispatch('task/toggleEnabledFetchPeers', true)
@@ -198,6 +221,33 @@
198221
break
199222
}
200223
},
224+
resetChanged () {
225+
const { activeTab } = this
226+
switch (activeTab) {
227+
case 'files':
228+
this.resetFaskFilesSelection()
229+
this.updateFilesListSelection()
230+
break
231+
}
232+
this.optionsChanged = false
233+
},
234+
saveChanged () {
235+
const { activeTab } = this
236+
switch (activeTab) {
237+
case 'files':
238+
this.saveFaskFilesSelection()
239+
break
240+
}
241+
this.optionsChanged = false
242+
},
243+
handleAppResize () {
244+
debounce(() => {
245+
console.log('resize===>', this.activeTab, this.$refs.taskGraphic)
246+
if (this.activeTab === 'activity' && this.$refs.taskGraphic) {
247+
this.$refs.taskGraphic.updateGraphicWidth()
248+
}
249+
}, 250)
250+
},
201251
updateFilesListSelection () {
202252
if (!this.$refs.detailFileList) {
203253
return
@@ -207,7 +257,27 @@
207257
this.$refs.detailFileList.toggleSelection(selectedFileList)
208258
},
209259
handleSelectionChange (val) {
210-
console.log('task detail handleSelectionChange==>', val)
260+
this.filesSelection = val
261+
this.selectionChangedCount += 1
262+
if (this.selectionChangedCount > 1) {
263+
this.optionsChanged = true
264+
}
265+
},
266+
resetFaskFilesSelection () {
267+
this.filesSelection = EMPTY_STRING
268+
this.selectionChangedCount = 0
269+
},
270+
saveFaskFilesSelection () {
271+
const { gid, filesSelection } = this
272+
if (filesSelection === NONE_SELECTED_FILES) {
273+
this.$msg.warning(this.$t('task.select-at-least-one'))
274+
return
275+
}
276+
277+
const options = {
278+
selectFile: filesSelection !== SELECTED_ALL_FILES ? filesSelection : EMPTY_STRING
279+
}
280+
this.$store.dispatch('task/changeTaskOption', { gid, options })
211281
}
212282
}
213283
}
@@ -230,6 +300,10 @@
230300
width: 100%;
231301
text-align: center;
232302
font-size: 0;
303+
padding: 0 1.25rem;
304+
display: flex;
305+
align-content: space-between;
306+
justify-content: space-between;
233307
.task-item-actions {
234308
display: inline-block;
235309
&> .task-item-action {
@@ -242,6 +316,21 @@
242316
vertical-align: middle;
243317
}
244318
}
319+
.action-wrapper {
320+
flex: 1;
321+
}
322+
.action-wrapper-left {
323+
text-align: left;
324+
}
325+
.action-wrapper-center {
326+
padding: 1px 0;
327+
&> .task-item-actions {
328+
margin: 0 auto;
329+
}
330+
}
331+
.action-wrapper-right {
332+
text-align: right;
333+
}
245334
}
246335
247336
.task-detail-tab {
@@ -266,4 +355,13 @@
266355
bottom: 0;
267356
}
268357
}
358+
359+
.tab-panel-actions {
360+
display: flex;
361+
justify-content: space-between;
362+
position: absolute;
363+
bottom: -28px;
364+
left: 0;
365+
width: 100%;
366+
}
269367
</style>

‎src/renderer/components/TaskDetail/TaskActivity.vue

+5-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
>
99
<div class="graphic-box" ref="graphicBox">
1010
<mo-task-graphic
11-
:width="graphicWidth"
11+
:outerWidth="graphicWidth"
1212
:bitfield="task.bitfield"
1313
v-if="graphicWidth > 0"
1414
/>
@@ -190,7 +190,6 @@
190190
if (!this.$refs.graphicBox) {
191191
return
192192
}
193-
console.log('updateGraphicWidth===>', this.$refs.graphicBox)
194193
this.graphicWidth = this.calcInnerWidth(this.$refs.graphicBox)
195194
},
196195
calcInnerWidth (ele) {
@@ -199,8 +198,10 @@
199198
}
200199
201200
const style = getComputedStyle(ele, null)
202-
const width = style.getPropertyValue('width')
203-
return parseInt(width, 10)
201+
const width = parseInt(style.width, 10)
202+
const paddingLeft = parseInt(style.paddingLeft, 10)
203+
const paddingRight = parseInt(style.paddingRight, 10)
204+
return width - paddingLeft - paddingRight
204205
}
205206
}
206207
}

‎src/renderer/components/TaskDetail/TaskFiles.vue

+9-3
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
</el-table-column>
4141
</el-table>
4242
</div>
43-
<el-row class="file-filters" :gutter="12" v-if="mode === 'ADD'">
43+
<el-row class="file-filters" :gutter="12">
4444
<el-col class="quick-filters" :span="8">
4545
<el-button-group>
4646
<el-button @click="toggleVideoSelection()">
@@ -54,7 +54,7 @@
5454
</el-button>
5555
</el-button-group>
5656
</el-col>
57-
<el-col :span="16" style="text-align: right">
57+
<el-col :span="16" class="files-summary">
5858
{{ $t('task.selected-files-sum', { selectedFilesCount, selectedFilesTotalSize }) }}
5959
</el-col>
6060
</el-row>
@@ -113,7 +113,7 @@
113113
},
114114
selectedFilesTotalSize () {
115115
const result = this.selectedFiles.reduce((acc, cur) => {
116-
return acc + cur.length
116+
return acc + parseInt(cur.length, 10)
117117
}, 0)
118118
return bytesToSize(result)
119119
},
@@ -189,5 +189,11 @@
189189
font-size: 0;
190190
}
191191
}
192+
.files-summary {
193+
text-align: right;
194+
font-size: $--font-size-base;
195+
color: $--color-text-regular;
196+
line-height: 1.75rem;
197+
}
192198
}
193199
</style>

0 commit comments

Comments
 (0)