Skip to content

Merge stable head and body into one table #2860

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

Merged
merged 2 commits into from
Jan 26, 2025
Merged

Merge stable head and body into one table #2860

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
26a1fd4
Merge stable head and body into one table
jevenski Dec 11, 2024
792a198
Fix various bugs
jevenski Jan 26, 2025
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
122 changes: 79 additions & 43 deletions css/stable.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
--row-even-bg-color: #ffffff;
--row-active-bg-color: #cfdeef;
--row-highlight-brightness: 1;
position: relative;
height: 100%;
background-color: #FFFFFF;
overflow: hidden;
Expand All @@ -17,72 +18,76 @@
-moz-user-focus: normal;
-moz-user-input: enabled;
}
.stable table {
table-layout: fixed;
width: 0;
border-spacing: 0;
}
.stable td {
font: menu;
font-family: inherit;
font-size: inherit;
white-space: nowrap;
padding: 0.25rem 0.15rem;
overflow: hidden;
}
.stable-head {
position: relative; /* Need to be positioned for drag masks to be positioned properly */
width: 100%;
flex: 0 0 auto;
padding: 0;
overflow: hidden;
}
.stable-head table {
table-layout: fixed;
width: 0;
}
.stable-head tr {
.stable thead {
position: sticky;
inset-block-start: 0;
background-color: var(--header-bg-color);
background-image: var(--header-bg-image);
z-index: 2;
}
.stable-head td {
.stable thead td div {
border-bottom: 1px solid var(--header-border-color);
}
.stable-head td:not(:first-child) {
.stable thead td:not(:first-child) div {
border-left: 1px solid var(--header-border-color);
}
.stable-head td:not(:last-child) {
.stable thead td:not(:last-child) div {
border-right: 1px solid var(--header-border-color);
}
.stable-head td div {
.stable thead td div {
position: relative;
padding: 0 0.25rem;
padding: 0.25rem 0.5rem;
margin: 0;
}
.stable-head td.asc div, .stable-head td.desc div {
.stable thead td.asc div, .stable thead td.desc div {
padding-right: 1.5rem;
}
.stable-head td.asc div::after, .stable-head td.desc div::after {
.stable thead td.asc div::after, .stable thead td.desc div::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
height: 1.35rem;
height: 100%;
width: 1.35rem;
background: no-repeat center;
background-image: var(--header-asc-icon);
transition: 0.5s;
}
.stable-head td.desc div::after {
.stable thead td.desc div::after {
transform: rotate(-180deg);
}
.stable-head div.resz {border: 1px solid #FF0000; width: 5px; height: 14px; padding: 0 !important; float: right; background: transparent url(../images/s.gif) no-repeat scroll left center; cursor: e-resize}
.stable thead div.resz {border: 1px solid #FF0000; width: 5px; height: 14px; padding: 0 !important; float: right; background: transparent url(../images/s.gif) no-repeat scroll left center; cursor: e-resize}
.stable-body {
position: relative;
width: 100%;
flex: 1 1 auto;
background: #F5F5F5;
overflow: auto;
overflow-anchor: none;
}
.stable-body table {table-layout: fixed; width: 0; }
.stable-body tr {cursor: pointer}
.stable-body td {border-bottom: 1px solid #E0E0E0; overflow: hidden;}
.stable-body td:first-child div {
.stable-gadgets {
position: absolute;
width: 1px;
height: 100%;
top: 0;
}
.stable tbody tr {cursor: pointer;}
.stable tbody tr:not(:first-child) {border-top: 1px solid #E0E0E0;}
.stable tbody tr:not(:last-child) {border-bottom: 1px solid #E0E0E0;}
.stable tbody td:first-child div {
display: flex;
align-items: center;
gap: 0.35rem;
Expand All @@ -97,29 +102,47 @@
background: url(../images/tstatus.png) no-repeat;
}
.stable-lpad {width: 5px; height: 16px; margin: 0; padding: 0; float: left; }
.stable-body td div {
font-size: 11px;
.stable tbody td div {
overflow: hidden;
padding: 0.15rem 0.25rem;
margin: 0.15rem 0.25rem;
}
.konqueror .stable tbody td div { margin: 0 0px 0 0px !important }
.stable tbody tr.selected td {background: var(--row-active-bg-color) !important;}
.stable tbody tr:hover td {filter: brightness(var(--row-highlight-brightness));}
.stable tbody tr td {background: var(--row-even-bg-color);}
.stable.alternate tbody tr:nth-child(odd) td {background: var(--row-odd-bg-color);}
.stable.alternate tbody tr:nth-child(even) td {background: var(--row-even-bg-color);}
.stable-move-header {
position: absolute;
background: transparent url(../images/header_move.gif) repeat-x scroll center top;
top: 0px;
font: menu;
padding: 2px 12px 2px 4px;
line-height: 12px;
border: 1px solid #0099FF;
overflow: hidden;
height: 16px !important;
margin: 0 2px !important;
}
.konqueror .stable-body td div { margin: 0 0px 0 0px !important }
.stable-body tr.selected td {background: var(--row-active-bg-color) !important;}
.stable-body tr:hover td {filter: brightness(var(--row-highlight-brightness));}
.stable-body tr td {background: var(--row-even-bg-color);}
.alternate .stable-body tr:nth-child(odd) td {background: var(--row-odd-bg-color);}
.alternate .stable-body tr:nth-child(even) td {background: var(--row-even-bg-color);}
.stable-move-header {position: absolute; background: transparent url(../images/header_move.gif) repeat-x scroll center top rgba(255,255,255,0.7); top: 0px; font: menu; padding: 2px 12px 2px 4px; line-height: 12px; visibility: visible; border: 1px solid #0099FF; overflow: hidden; }
z-index: 300;
}
.webkit .stable-move-header {background: rgba(255,255,255,0.7);}
.opera .stable-move-header {background: rgba(255,255,255,0.7);}
.stable-active-header {border-color: threedface !important}
.stable-separator-header {position: absolute; top: 0px; left: 0px; font: menu; height: 1em; width: 1px; overflow: hidden; background: #0099FF; padding: 3px 0px}
.stable-virtpad {width: 10px; height: 0px}
.stable-separator-header {
position: absolute;
top: 0px;
font: menu;
height: 1.5rem;
width: 2px;
background: #0099FF;
padding: 3px 0px;
z-index: 200;
}
.stable-scrollpos {width: 80%; height: 16px; left: 10%; top: 50%; position: absolute; padding: 0 5px; margin-top: -8px; background: #FFFFFF; color: #AAAAAA; font-size: 11px; font-weight: bold; text-align: center; overflow: hidden; display: none; white-space: nowrap}
.stable-resize-header {
position: absolute;
background-color: var(--col-resize-sep-bg-color);
width: 1px;
height: 100%;
overflow: hidden;
z-index: 100;
}
Expand All @@ -134,8 +157,21 @@
display: none;
}

.meter-value { float: left; background-color: #99D699; border: 1px inset #BBBBBB; border-bottom: none;}
.meter-text { position: relative; text-align: center; float: left; width: 100%; height: 0px; overflow: visible; font-size: 11px; z-index: 1; }
.meter-value {
float: left;
height: 1.5rem;
background-color: #99D699;
border: 1px inset #BBBBBB;
}
.meter-text {
position: relative;
text-align: center;
float: left;
top: 0.25rem;
width: 100%;
height: 0px;
overflow: visible;
}

.meter-value-start-color { background-color: #FFFF00 }
.meter-value-end-color { background-color: #99D699 }
Expand Down
9 changes: 6 additions & 3 deletions js/objects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,20 @@ class DnD {
this.options.onRun = function() {};
if (!this.options.onFinish)
this.options.onFinish = function() {};
this.options.allowMobile = !!this.options.allowMobile;
header.off("mousedown");
header.on("mousedown", this, this.start);
}

start(e) {
// allow dnd only for medium-sized screens and up
if ($(window).width() < 768) return false;
const self = e.data;
// allow dnd on small-sized screens only when explicitly allowed to
if (($(window).width() < 768) && !self.options.allowMobile){
return false;
}
// disallow dnd on links
if (e.target.tagName === "A") return false;

const self = e.data;
if (self.options.onStart(e)) {
$(document).on("mousemove", self, self.run);
$(document).on("mouseup", self, self.finish);
Expand Down
Loading