removed CSS contain from widgets

This commit is contained in:
zadam 2021-06-05 22:07:15 +02:00
parent faab6be48d
commit 6d51593b7d
55 changed files with 7 additions and 62 deletions

View file

@ -71,7 +71,6 @@ export default class DesktopLayout {
.command("showRecentChanges"))
.child(new SpacerWidget(40, 0))
.child(new FlexContainer("column")
.overflowing()
.id("plugin-buttons"))
.child(new SpacerWidget(0, 1000))
.child(new ProtectedSessionStatusWidget())
@ -87,7 +86,7 @@ export default class DesktopLayout {
.child(new FlexContainer('column')
.id('rest-pane')
.css("flex-grow", "1")
.child(new FlexContainer('row').overflowing()
.child(new FlexContainer('row')
.child(new TabRowWidget())
.child(new TitleBarButtonsWidget())
.css('height', '40px')
@ -103,7 +102,6 @@ export default class DesktopLayout {
.child(new FlexContainer('row').class('title-row')
.css('align-items: center;')
.cssBlock('.title-row > * { margin: 5px; }')
.overflowing()
.child(new NoteIconWidget())
.child(new NoteTitleWidget())
.child(new SpacerWidget(0, 1))

View file

@ -98,7 +98,7 @@ export default class MobileLayout {
.child(new ScreenContainer("detail", "column")
.class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8")
.css('max-height', '100%')
.child(new FlexContainer('row').overflowing()
.child(new FlexContainer('row')
.css('font-size', 'larger')
.css('align-items', 'center')
.css('position', 'fixed')

View file

@ -54,7 +54,7 @@ function setupRightPaneResizer() {
leftInstance = Split(['#center-pane', '#right-pane'], {
sizes: [100 - rightPaneWidth, rightPaneWidth],
gutterSize: 5,
onDragEnd: sizes => options.save('rightPaneWidth', Math.round(sizes[0]))
onDragEnd: sizes => options.save('rightPaneWidth', Math.round(sizes[1]))
});
}
}

View file

@ -237,7 +237,6 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
utils.bindElShortcut(this.$widget, 'ctrl+return', () => this.saveAndClose());
utils.bindElShortcut(this.$widget, 'esc', () => this.cancelAndClose());
this.contentSized();
this.$title = this.$widget.find('.attr-detail-title');

View file

@ -185,7 +185,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$editor = this.$widget.find('.attribute-list-editor');
this.initialized = this.initEditor();

View file

@ -26,12 +26,14 @@ class BasicWidget extends Component {
}
contentSized() {
this.css('contain', 'layout paint');
console.log("Using contentSized() is deprecated NOOP and it is recommended to remove its use.");
return this;
}
overflowing() {
this.css('contain', 'none !important');
console.log("Using overflowing() is deprecated NOOP and it is recommended to remove its use.");
return this;
}

View file

@ -19,7 +19,6 @@ export default class ButtonWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
if (this.settings.onClick) {
this.$widget.on("click", () => this.settings.onClick(this));

View file

@ -76,7 +76,6 @@ const TPL = `
export default class GlobalMenuWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$widget.find(".show-about-dialog-button").on('click',
() => import("../../dialogs/about.js").then(d => d.showDialog()));

View file

@ -32,7 +32,6 @@ const TPL = `
export default class NoteActionsWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$showSourceButton = this.$widget.find('.show-source-button');
this.$renderNoteButton = this.$widget.find('.render-note-button');

View file

@ -16,7 +16,6 @@ export default class CollapsibleWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(WIDGET_TPL);
this.contentSized();
this.$widget.find('[data-target]').attr('data-target', "#" + this.componentId);
this.$bodyWrapper = this.$widget.find('.body-wrapper');

View file

@ -130,7 +130,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$tabContainer = this.$widget.find('.ribbon-tab-container');
this.$buttonContainer = this.$widget.find('.ribbon-button-container');

View file

@ -25,7 +25,6 @@ export default class HistoryNavigationWidget extends BasicWidget {
}
this.$widget = $(TPL);
this.contentSized();
const contextMenuHandler = e => {
e.preventDefault();

View file

@ -8,7 +8,6 @@ const TPL = `
class CloseDetailButtonWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$widget.on('click', () => this.triggerCommand('setActiveScreen', {screen:'tree'}));
}

View file

@ -10,7 +10,6 @@ const TPL = `<button type="button" class="action-button bx bx-menu" style="paddi
class MobileDetailMenuWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$widget.on("click", async e => {
const note = appContext.tabManager.getActiveContextNote();

View file

@ -48,7 +48,6 @@ const WIDGET_TPL = `
class MobileGlobalButtonsWidget extends BasicWidget {
doRender() {
this.$widget = $(WIDGET_TPL);
this.overflowing();
}
}

View file

@ -75,7 +75,6 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$widget.on("dragover", e => e.preventDefault());

View file

@ -78,7 +78,6 @@ const TPL = `
export default class NoteIconWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$icon = this.$widget.find('button.note-icon');
this.$iconList = this.$widget.find('.icon-list');
this.$iconList.on('click', 'span', async e => {

View file

@ -32,7 +32,6 @@ export default class NoteListWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.$content = this.$widget.find('.note-list-widget-content');
this.contentSized();
const observer = new IntersectionObserver(entries => {
this.isIntersecting = entries[0].isIntersecting;

View file

@ -44,7 +44,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$noteTitle = this.$widget.find(".note-title");
this.$noteTitle.on('input', () => this.spacedUpdate.scheduleUpdate());

View file

@ -34,7 +34,6 @@ const TPL = `
export default class NoteTypeWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$widget.on('show.bs.dropdown', () => this.renderDropdown());

View file

@ -27,7 +27,6 @@ export default class NoteUpdateStatusWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$filePath = this.$widget.find(".file-path");
this.$fileLastModified = this.$widget.find(".file-last-modified");

View file

@ -73,7 +73,6 @@ const TPL = `
export default class ProtectedNoteSwitchWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$protectButton = this.$widget.find(".protect-button");
this.$protectButton.on('click', () => protectedSessionService.protectNote(this.noteId, true, false));

View file

@ -43,7 +43,6 @@ const MAX_DISPLAYED_NOTES = 15;
export default class QuickSearchWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$searchString = this.$widget.find('.search-string');
this.$dropdownMenu = this.$widget.find('.dropdown-menu');

View file

@ -52,7 +52,6 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$widget.find(".note-type-container").append(this.noteTypeWidget.render());
this.$widget.find(".protected-note-switch-container").append(this.protectedNoteSwitchWidget.render());

View file

@ -58,7 +58,6 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$viewTypeSelect = this.$widget.find('.view-type-select');
this.$viewTypeSelect.on('change', () => this.toggleViewType(this.$viewTypeSelect.val()));

View file

@ -70,7 +70,6 @@ export default class FilePropertiesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$fileNoteId = this.$widget.find(".file-note-id");
this.$fileName = this.$widget.find(".file-filename");
this.$fileType = this.$widget.find(".file-filetype");

View file

@ -52,7 +52,6 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$copyToClipboardButton = this.$widget.find(".image-copy-to-clipboard");
this.$uploadNewRevisionButton = this.$widget.find(".image-upload-new-revision");
this.$uploadNewRevisionInput = this.$widget.find(".image-upload-new-revision-input");

View file

@ -38,7 +38,6 @@ export default class InheritedAttributesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$container = this.$widget.find('.inherited-attributes-container');
this.$widget.append(this.attributeDetailWidget.render());

View file

@ -78,7 +78,6 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
this.$styleResolver = this.$widget.find('.style-resolver');
this.overflowing();
window.addEventListener('resize', () => {
if (!this.graph) { // no graph has been even rendered

View file

@ -76,7 +76,6 @@ export default class NoteInfoWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$noteId = this.$widget.find(".note-info-note-id");
this.$dateCreated = this.$widget.find(".note-info-date-created");

View file

@ -50,7 +50,6 @@ export default class NotePathsWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$notePathList = this.$widget.find(".note-path-list");
this.$widget.on('show.bs.dropdown', () => this.renderDropdown());

View file

@ -30,7 +30,6 @@ export default class NotePropertiesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$pageUrl = this.$widget.find('.page-url');
}

View file

@ -41,7 +41,6 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$widget.find('.attr-editor-placeholder').replaceWith(this.attributeEditorWidget.render());
this.$widget.append(this.attributeDetailWidget.render());

View file

@ -37,7 +37,6 @@ const TPL = `
export default class PromotedAttributesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$container = this.$widget.find(".promoted-attributes-container");
}

View file

@ -217,8 +217,6 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {
this.$widget = $(TPL);
this.$component = this.$widget.find('.search-definition-widget');
this.contentSized();
this.overflowing();
this.$widget.on('click', '[data-search-option-add]', async event => {
const searchOptionName = $(event.target).attr('data-search-option-add');

View file

@ -47,7 +47,6 @@ export default class SimilarNotesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$similarNotesWrapper = this.$widget.find(".similar-notes-wrapper");
}

View file

@ -44,7 +44,6 @@ export default class SearchResultWidget extends NoteContextAwareWidget {
this.$content = this.$widget.find('.search-result-widget-content');
this.$noResults = this.$widget.find('.search-no-results');
this.$notExecutedYet = this.$widget.find('.search-not-executed-yet');
this.contentSized();
}
async refreshWithNote(note) {

View file

@ -20,7 +20,6 @@ export default class SqlResultWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$sqlConsoleResultContainer = this.$widget.find('.sql-console-result-container');
}

View file

@ -42,7 +42,6 @@ export default class SqlTableSchemasWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$sqlConsoleTableSchemas = this.$widget.find('.sql-table-schemas');
}

View file

@ -97,7 +97,6 @@ export default class SyncStatusWidget extends BasicWidget {
this.$widget.find('.sync-status-icon:not(.sync-status-in-progress)')
.on('click', () => syncService.syncNow())
this.overflowing();
}
showIcon(className) {

View file

@ -233,7 +233,6 @@ const TAB_ROW_TPL = `
export default class TabRowWidget extends BasicWidget {
doRender() {
this.$widget = $(TAB_ROW_TPL);
this.overflowing();
this.draggabillies = [];

View file

@ -35,7 +35,6 @@ export default class TitleBarButtonsWidget extends BasicWidget {
}
this.$widget = $(TPL);
this.contentSized();
const $minimizeBtn = this.$widget.find(".minimize-btn");
const $maximizeBtn = this.$widget.find(".maximize-btn");

View file

@ -22,7 +22,6 @@ export default class BookTypeWidget extends TypeWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$helpNoChildren = this.$widget.find('.note-detail-book-empty-help');
}

View file

@ -14,6 +14,5 @@ export default class DeletedTypeWidget extends TypeWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
}
}

View file

@ -25,7 +25,6 @@ export default class EditableCodeTypeWidget extends TypeWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$editor = this.$widget.find('.note-detail-code-editor');
this.$executeButton = this.$widget.find('.execute-button');

View file

@ -77,7 +77,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$editor = this.$widget.find('.note-detail-editable-text-editor');
this.initialized = this.initEditor();

View file

@ -49,7 +49,6 @@ export default class EmptyTypeWidget extends TypeWidget {
// FIXME: this might be optimized - cleaned up after use since it's always used only for new tab
this.$widget = $(TPL);
this.contentSized();
this.$autoComplete = this.$widget.find(".note-autocomplete");
noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, {

View file

@ -42,7 +42,6 @@ export default class FileTypeWidget extends TypeWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$previewContent = this.$widget.find(".file-preview-content");
this.$previewNotAvailable = this.$widget.find(".file-preview-not-available");
this.$pdfPreview = this.$widget.find(".pdf-preview");

View file

@ -43,7 +43,6 @@ class ImageTypeWidget extends TypeWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$imageWrapper = this.$widget.find('.note-detail-image-wrapper');
this.$imageView = this.$widget.find('.note-detail-image-view')
.attr("id", "image-view-" + utils.randomString(10));

View file

@ -25,7 +25,6 @@ export default class ProtectedSessionTypeWidget extends TypeWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$passwordForm = this.$widget.find(".protected-session-password-form");
this.$passwordInput = this.$widget.find(".protected-session-password");

View file

@ -32,7 +32,6 @@ export default class ReadOnlyCodeTypeWidget extends TypeWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$content = this.$widget.find('.note-detail-read-only-code-content');
this.$widget.find('.edit-code-note-button').on('click', () => {

View file

@ -65,7 +65,6 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$content = this.$widget.find('.note-detail-readonly-text-content');

View file

@ -99,7 +99,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$relationMapContainer = this.$widget.find(".relation-map-container");
this.$createChildNote = this.$widget.find(".relation-map-create-child-note");
this.$zoomInButton = this.$widget.find(".relation-map-zoom-in");

View file

@ -17,7 +17,6 @@ export default class RenderTypeWidget extends TypeWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$noteDetailRenderHelp = this.$widget.find('.note-detail-render-help');
this.$noteDetailRenderContent = this.$widget.find('.note-detail-render-content');
}

View file

@ -602,10 +602,6 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
pointer-events: none;
}
.component {
contain: size;
}
.toast {
background-color: var(--accented-background-color) !important;
color: var(--main-text-color) !important;