Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

XWIKI-21009: LiveData alternative to drag controls #2809

Merged
merged 4 commits into from
Jan 19, 2024
Merged

XWIKI-21009: LiveData alternative to drag controls #2809

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
94d04f9
XWIKI-21009: LiveData alternative to drag controls
Sereza7 Jan 17, 2024
fb525ea
XWIKI-21009: LiveData alternative to drag controls
Sereza7 Jan 19, 2024
51f8cce
XWIKI-21009: LiveData alternative to drag controls
Sereza7 Jan 19, 2024
fdee552
XWIKI-21009: LiveData alternative to drag controls
Sereza7 Jan 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...rm-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/directives.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ export const mousedownmove = {
const removeMousemoveHandler = () => {
window.removeEventListener("mousemove", mousemoveHandler);
window.removeEventListener("mouseup", removeMousemoveHandler);
window.removeEventListener("focusout", removeMousemoveHandler);
};

// If the "immediate" modifiers is set, dispatch the event immediately
Expand All @@ -61,7 +60,8 @@ export const mousedownmove = {
// Bind event listeners
window.addEventListener("mousemove", mousemoveHandler);
window.addEventListener("mouseup", removeMousemoveHandler);
window.addEventListener("focusout", removeMousemoveHandler);
// Stop propagation of the mousedown event
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe explain why the propagation stop is required (and what are the consequences otherwise).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked it again, and with the move I just made, it's not needed anymore.

e.stopPropagation()
});
}
};
19 changes: 9 additions & 10 deletions ...data/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,15 @@
<div class="column-name">
<!-- Property Name -->
<button
class="property-name handle"
class="handle"
@click="sort(property)"
@keydown.left="keyboardDragNDrop($event, -1)"
@keydown.right="keyboardDragNDrop($event, 1)"
:title="logic.isPropertySortable(property.id) ?
$t('livedata.action.columnName.sortable.hint') :
$t('livedata.action.columnName.default.hint')"
>
{{ property.name }}
<span class="property-name">{{ property.name }}</span>
<!--
Sort icon
Only show the icon for the first-level sort property
Expand Down Expand Up @@ -273,12 +273,13 @@ export default {
}

.layout-table .column-name {
cursor: pointer;
display: flex;
justify-content: space-between;
}

.layout-table .resize-handle {
/* TODO: Discussion about the exact display of resize handles. */
manuelleduc marked this conversation as resolved.
Show resolved Hide resolved
opacity: 0;
padding: 0;
cursor: col-resize;
min-width: 0;
Expand All @@ -290,6 +291,7 @@ export default {

.layout-table .column-name:focus-within .resize-handle,
.layout-table .column-name:hover .resize-handle {
opacity: 1;
border-color: @text-muted;
border-width: 3px;
margin-left: 0;
Expand All @@ -304,27 +306,24 @@ export default {
margin-right: -3px;
}

.layout-table .property-name {
.layout-table .draggable-item .handle {
opacity: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: transparent;
border: 0;
width: 100%;
text-align: left;
}

.draggable-item .property-name.handle {
opacity: 1;
}

.layout-table .sort-icon {
color: currentColor;
opacity: 0;
padding-left: @table-cell-padding;
cursor: pointer;
}

.layout-table .property-name .sort-icon {
.layout-table .property-name + .sort-icon {
vertical-align: baseline;
}

Expand Down
3 changes: 2 additions & 1 deletion ...form-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/webjar/Logic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,8 @@ define('xwiki-livedata', [
"pagination.last",
"action.refresh",
"action.addEntry",
"action.reorder.hint",
"action.columnName.sortable.hint",
"action.columnName.default.hint",
"action.resizeColumn.hint",
"panel.filter.title",
"panel.filter.noneFilterable",
Expand Down