foam-framework / foam

Feature-Oriented Active Modeller
Apache License 2.0
787 stars 55 forks source link

FlexTableView uses classes on `document.body` to signal local state #334

Closed bshepherdson closed 8 years ago

bshepherdson commented 9 years ago

The initGlobalState method sets up a class to toggle on resizing state. If this class is necessary (used to show all the dividers while resizing?) it should be toggled on the table's own container div, not the document body. That would make multiple tables, no matter their nesting, display differently when any one of them is resized.

mdittmer commented 9 years ago

This is applied globally for UX reasons. It ensures that the resize cursor is always shown while the user clicks and drags the handle. Without a document-body-level CSS rule, the cursor flips between the resize cursor and the default cursor as the resize handle lags behind the movement of the cursor.

adamvy-google commented 9 years ago

Where is the class you're setting defined? I tried searching for it and didn't find it.

Also this isn't the best way to do this. We should put an ID on body just to use setClass(). Instead I would use this.X.dynamic(function() { self.isResizing; }, function() { DOM.setClass(self.document.body, 'resizing'); });

On Thu, Sep 3, 2015 at 8:20 PM, Mark Dittmer notifications@github.com wrote:

This is applied globally for UX reasons. It ensures that the resize cursor is always shown while the user clicks and drags the handle. Without a document-body-level CSS rule, the cursor flips between the resize cursor and the default cursor as the resize handle lags behind the movement of the cursor.

— Reply to this email directly or view it on GitHub https://github.com/foam-framework/foam/issues/334#issuecomment-137607007 .

adamvy-google commented 9 years ago

Sorry we shouldn't but an id on body just to use setClass()

On Fri, Sep 4, 2015 at 10:20 AM, Adam Van Ymeren adamvy@google.com wrote:

Where is the class you're setting defined? I tried searching for it and didn't find it.

Also this isn't the best way to do this. We should put an ID on body just to use setClass(). Instead I would use this.X.dynamic(function() { self.isResizing; }, function() { DOM.setClass(self.document.body, 'resizing'); });

On Thu, Sep 3, 2015 at 8:20 PM, Mark Dittmer notifications@github.com wrote:

This is applied globally for UX reasons. It ensures that the resize cursor is always shown while the user clicks and drags the handle. Without a document-body-level CSS rule, the cursor flips between the resize cursor and the default cursor as the resize handle lags behind the movement of the cursor.

— Reply to this email directly or view it on GitHub https://github.com/foam-framework/foam/issues/334#issuecomment-137607007 .

mdittmer commented 8 years ago

Fixed with use of DOM.setClass() instead.