From f9466c43081c98f30f7b1252ffd558209655c5e6 Mon Sep 17 00:00:00 2001 From: Blaine Date: Thu, 11 Jun 2020 13:10:09 +0530 Subject: unified white style ui design --- src/main/python/utils/layout.py | 2 +- src/main/python/utils/toolbar.py | 6 ++++-- src/main/resources/base/app.qss | 38 ++++++++++++++++++++++++++------------ 3 files changed, 31 insertions(+), 15 deletions(-) diff --git a/src/main/python/utils/layout.py b/src/main/python/utils/layout.py index ac37358..b977a68 100644 --- a/src/main/python/utils/layout.py +++ b/src/main/python/utils/layout.py @@ -72,7 +72,7 @@ class flowLayout(QLayout): spaceX = self.spacing() + wid.style().layoutSpacing(QSizePolicy.ToolButton, QSizePolicy.ToolButton, Qt.Horizontal) spaceY = self.spacing() + wid.style().layoutSpacing(QSizePolicy.ToolButton, QSizePolicy.ToolButton, Qt.Vertical) nextX = x + item.sizeHint().width() + spaceX - if nextX - spaceX > rect.right() and lineHeight > 0: + if nextX + spaceX > rect.right() and lineHeight > 0: x = rect.x() y = y + lineHeight + spaceY nextX = x + item.sizeHint().width() + spaceX diff --git a/src/main/python/utils/toolbar.py b/src/main/python/utils/toolbar.py index 220504b..a175aff 100644 --- a/src/main/python/utils/toolbar.py +++ b/src/main/python/utils/toolbar.py @@ -28,8 +28,9 @@ class toolbar(QDockWidget): self.setAllowedAreas(Qt.LeftDockWidgetArea | Qt.RightDockWidgetArea | Qt.NoDockWidgetArea) #declare main widget and layout self.widget = QWidget(self) + self.widget.setObjectName("ToolbarWidget") self.layout = QBoxLayout(QBoxLayout.TopToBottom, self.widget) - self.setAllowedAreas(Qt.AllDockWidgetAreas) + self.setWindowFlags(Qt.FramelessWindowHint) self.searchBox = QLineEdit(self.widget) #search box to search through componenets @@ -44,10 +45,11 @@ class toolbar(QDockWidget): self.diagArea.setWidgetResizable(True) self.layout.addWidget(self.diagArea, stretch=1) self.diagAreaWidget = QWidget(self.diagArea) #inner widget for scroll area + self.diagAreaWidget.setObjectName("ToolbarScrollWidget") #custom layout for inner widget self.diagAreaLayout = flowLayout(self.diagAreaWidget) self.diagAreaLayout.setSizeConstraint(flowLayout.SetMinimumSize) - self.setWidget(self.widget) #set main widget to dockwidget + self.setWidget(self.widget) #set main widget to dockwidget def clearLayout(self): # used to clear all items from toolbar, by parenting it to the toolbar instead diff --git a/src/main/resources/base/app.qss b/src/main/resources/base/app.qss index 723bfa3..00d8c1c 100644 --- a/src/main/resources/base/app.qss +++ b/src/main/resources/base/app.qss @@ -15,11 +15,6 @@ QLineEdit { QLineEdit:focus{ border-color: #7cabf9; } - -QFrame{ - background-color: white; -} - QTabBar { qproperty-drawBase: 0; left: 5px; @@ -91,13 +86,27 @@ QTabBar::tab:bottom:only-one { border: 1px solid #1b3774; border-radius: 6px; } - -QDockWidget { +fileWindow { + border-width: 2px; + outline: 0; color: white; background-color: white; - border: 1px solid #e6e6e6; +} +fileWindow::title{ + color: black; + border-width: 0px; + text-align: center; + background-color: white; } +QMainWindow { + background-color: white; +} + +QDockWidget#Toolbar{ + background-color: white; + border: 1px solid #e6e6e6; +} QDockWidget::float-button { border: 1px transparent #e6e6e6; border-radius: 2px; @@ -123,6 +132,10 @@ QScrollArea{ border-width: 0px; } +QWidget#ToolbarScrollWidget { + background-color: white; +} + QToolButton { color: #f2f2f2; text-align: center; @@ -155,17 +168,18 @@ QToolButton:checked { } sectionLabel{ - border-color: gray; + border-color: #BBD0E9; border-style: solid; - border-width: 0px 0px 1px 0px; + border-width: 0px 0px 2px 0px; padding-bottom: 3px; margin-bottom: 3px; margin-top: 10px; text-align: left; font-size: 20px; + color: gray; } -sectionLabel:first-child{ +sectionLabel:first{ margin-top: 0px; } @@ -200,4 +214,4 @@ customTabWidget::pane { border-radius: 7px; padding: 1px; background-color: #E6E6E3; -} \ No newline at end of file +} -- cgit From 2fe2f269edd9c07a1329b35e072672808ef1d4d3 Mon Sep 17 00:00:00 2001 From: Blaine Date: Thu, 11 Jun 2020 14:30:17 +0530 Subject: pallette fixes + ui fixes --- src/main/python/utils/canvas.py | 4 +- src/main/python/utils/fileWindow.py | 1 + src/main/python/utils/tabs.py | 2 +- src/main/resources/base/app.qss | 79 +++++++++++++++++++++++++++---------- 4 files changed, 63 insertions(+), 23 deletions(-) diff --git a/src/main/python/utils/canvas.py b/src/main/python/utils/canvas.py index c860bbb..f37d1f8 100644 --- a/src/main/python/utils/canvas.py +++ b/src/main/python/utils/canvas.py @@ -69,8 +69,8 @@ class canvas(QWidget): #if view is visible use half of available width factor = 2 if self.parentFileWindow.sideViewTab is not None else 1 #use minimum width required to fit the view - width = min((prect.width() - 40)//factor, width) - height = min(prect.height() - 80, height) + width = min((prect.width() - 60)//factor, width) + height = min(prect.height() - 120, height) #set view dims self.view.setFixedWidth(width) self.view.setFixedHeight(height) diff --git a/src/main/python/utils/fileWindow.py b/src/main/python/utils/fileWindow.py index a5ed535..5dcf62e 100644 --- a/src/main/python/utils/fileWindow.py +++ b/src/main/python/utils/fileWindow.py @@ -53,6 +53,7 @@ class fileWindow(QMdiSubWindow): self.setWindowFlag(Qt.CustomizeWindowHint, True) self.setWindowFlag(Qt.WindowMinimizeButtonHint, False) self.setWindowFlag(Qt.WindowMaximizeButtonHint, False) + self.setWindowFlag(Qt.WindowCloseButtonHint, True) def createSideViewArea(self): #creates the side view widgets and sets them to invisible diff --git a/src/main/python/utils/tabs.py b/src/main/python/utils/tabs.py index 1431db2..1186191 100644 --- a/src/main/python/utils/tabs.py +++ b/src/main/python/utils/tabs.py @@ -59,7 +59,7 @@ class customTabWidget(QTabWidget): #move the new tab button to correct location size = sum([self.tab.tabRect(i).width() for i in range(self.tab.count())]) # calculate width of all tabs - h = max(self.tab.geometry().bottom() - self.plusButton.height()-10, -5) #align with bottom of tabbar + h = max(self.tab.geometry().bottom() - self.plusButton.height(), 0) #align with bottom of tabbar w = self.tab.width() if size > w: #if all the tabs do not overflow the tab bar, add at the end self.plusButton.move(w-self.plusButton.width(), h) diff --git a/src/main/resources/base/app.qss b/src/main/resources/base/app.qss index 00d8c1c..2a51903 100644 --- a/src/main/resources/base/app.qss +++ b/src/main/resources/base/app.qss @@ -1,3 +1,25 @@ +/* + background darker = #004646 + background dark and slighly darker = #007A7A + background dark = #006666 + background normal and slighly darker = #008F8F + background normal = #00B8B8 + background light = #EBFFFF + background lighter = #ffffff + + lists background = #006666 + lists background (alternate) = #008F8F + lists backgrounds selection = #00E0E0 + + foreground = black + + selection darker = #004646 + selection dark = #006666 + selection normal = #008F8F + selection inbetween normal and light = #00B8B8 (used to build SpinBoxes) + selection light = #00E0E0 + selection lighter = #D6FFFF +*/ QLineEdit { color: #ffffff; background-color: #b6b6b6; @@ -15,17 +37,18 @@ QLineEdit { QLineEdit:focus{ border-color: #7cabf9; } -QTabBar { +tabBarPlus { qproperty-drawBase: 0; left: 5px; background-color: transparent; + font-size: 15px; } -QTabBar:focus { +tabBarPlus:focus { border: 0px transparent black; } -QTabBar::close-button { +tabBarPlus::close-button { padding: 0px; margin: 0px; border-radius: 2px; @@ -34,55 +57,56 @@ QTabBar::close-button { background-repeat: none; } -QTabBar::close-button:hover { +tabBarPlus::close-button:hover { background-color: #7cabf9; } -QTabBar::close-button:pressed { +tabBarPlus::close-button:pressed { background-color: #adc5ed; } -QTabBar::scroller { /* the width of the scroll buttons */ +tabBarPlus::scroller { /* the width of the scroll buttons */ width: 20px; } -QTabBar::tab:top, -QTabBar::tab:bottom { +tabBarPlus::tab:top, +tabBarPlus::tab:bottom { color: black; border: 1px solid #b6b6b6; border-left-color: #e6e6e6; border-right-width: 0px; background-color: white; - padding:0px 15px; + padding:5px 15px; + width: 100px; } -QTabBar::tab:top:first, -QTabBar::tab:bottom:first { +tabBarPlus::tab:top:first, +tabBarPlus::tab:bottom:first { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } -QTabBar::tab:top:last, -QTabBar::tab:bottom:last { +tabBarPlus::tab:top:last, +tabBarPlus::tab:bottom:last { border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-right-width: 1px; } -QTabBar::tab:top:selected, -QTabBar::tab:bottom:selected { +tabBarPlus::tab:top:selected, +tabBarPlus::tab:bottom:selected { color: black; background-color: qlineargradient(spread:pad, x1:1, y1:0.545, x2:1, y2:0, stop:0 #3874f2, stop:1 #5e90fa); border-color: #3874f2; } -QTabBar::tab:top:!selected:hover, -QTabBar::tab:bottom:!selected:hover { +tabBarPlus::tab:top:!selected:hover, +tabBarPlus::tab:bottom:!selected:hover { color: black; } -QTabBar::tab:top:only-one , -QTabBar::tab:bottom:only-one { +tabBarPlus::tab:top:only-one , +tabBarPlus::tab:bottom:only-one { border: 1px solid #1b3774; border-radius: 6px; } @@ -98,6 +122,21 @@ fileWindow::title{ text-align: center; background-color: white; } +fileWindow::close-button { + padding: 0px; + margin: 0px; + border-radius: 2px; + background-image: url("src/main/resources/base/ui/close.svg"); + background-position: center center; + background-repeat: none; +} +fileWindow::close-button:hover { + background-color: #7cabf9; +} + +fileWindow::close-button:pressed { + background-color: #adc5ed; +} QMainWindow { background-color: white; @@ -107,6 +146,7 @@ QDockWidget#Toolbar{ background-color: white; border: 1px solid #e6e6e6; } + QDockWidget::float-button { border: 1px transparent #e6e6e6; border-radius: 2px; @@ -202,7 +242,6 @@ customTabWidget QPushButton{ padding: 1px; border: 0px solid #E6E6E3; border-radius: 10px; - top: -5px; } customTabWidget QPushButton:hover{ background: rgba(230, 230, 227, 60%); -- cgit From e9953e044a93837c62d55546d479b287302fa989 Mon Sep 17 00:00:00 2001 From: Blaine Date: Thu, 11 Jun 2020 14:42:51 +0530 Subject: new raster close button --- src/main/python/utils/fileWindow.py | 1 + src/main/resources/base/app.qss | 11 ++++--- src/main/resources/base/ui/close.png | Bin 0 -> 255 bytes src/main/resources/base/ui/close.svg | 60 ----------------------------------- 4 files changed, 8 insertions(+), 64 deletions(-) create mode 100644 src/main/resources/base/ui/close.png delete mode 100644 src/main/resources/base/ui/close.svg diff --git a/src/main/python/utils/fileWindow.py b/src/main/python/utils/fileWindow.py index 5dcf62e..28a576e 100644 --- a/src/main/python/utils/fileWindow.py +++ b/src/main/python/utils/fileWindow.py @@ -61,6 +61,7 @@ class fileWindow(QMdiSubWindow): self.sideView = customView(parent = self) self.sideView.setInteractive(False) self.sideViewCloseButton = QPushButton('×', self.sideView) + self.sideViewCloseButton.setObjectName("sideViewCloseButton") self.sideViewCloseButton.setFlat(True) self.sideViewCloseButton.setFixedSize(20, 20) self.moveSideViewCloseButton() diff --git a/src/main/resources/base/app.qss b/src/main/resources/base/app.qss index 2a51903..3e9f370 100644 --- a/src/main/resources/base/app.qss +++ b/src/main/resources/base/app.qss @@ -52,7 +52,7 @@ tabBarPlus::close-button { padding: 0px; margin: 0px; border-radius: 2px; - background-image: url("src/main/resources/base/ui/close.svg"); + background-image: url("src/main/resources/base/ui/close.png"); background-position: center center; background-repeat: none; } @@ -142,6 +142,9 @@ QMainWindow { background-color: white; } +QDockWidget#Title { + background-color: #7cabf9; +} QDockWidget#Toolbar{ background-color: white; border: 1px solid #e6e6e6; @@ -224,7 +227,8 @@ sectionLabel:first{ } customView QPushButton{ - background: rgba(214, 54, 40, 50%); + background-color: rgba(214, 54, 40, 50%); + background-image: url("src/main/resources/base/ui/close.svg"); border: 1px groove white; border-radius: 2px; font-size: 18px; @@ -233,8 +237,7 @@ customView QPushButton{ color: rgba(255, 255, 255, 50%); } customView QPushButton:Hover{ - background: rgba(214, 54, 40, 90%); - color: rgba(255, 255, 255, 90%); + background-color: rgba(214, 54, 40, 90%); } customTabWidget QPushButton{ diff --git a/src/main/resources/base/ui/close.png b/src/main/resources/base/ui/close.png new file mode 100644 index 0000000..8771a0b Binary files /dev/null and b/src/main/resources/base/ui/close.png differ diff --git a/src/main/resources/base/ui/close.svg b/src/main/resources/base/ui/close.svg deleted file mode 100644 index cb1c174..0000000 --- a/src/main/resources/base/ui/close.svg +++ /dev/null @@ -1,60 +0,0 @@ - - - - - image/svg+xml - - - - - - - -2 y=8>×× - -- cgit From 4fb78f87b119ba8ba9ec8ae4e50aa11b73d2a336 Mon Sep 17 00:00:00 2001 From: Blaine Date: Thu, 11 Jun 2020 15:04:43 +0530 Subject: updated colors --- src/main/resources/base/app.qss | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src/main/resources/base/app.qss b/src/main/resources/base/app.qss index 3e9f370..a733a50 100644 --- a/src/main/resources/base/app.qss +++ b/src/main/resources/base/app.qss @@ -24,7 +24,7 @@ QLineEdit { color: #ffffff; background-color: #b6b6b6; selection-color: black; - selection-background-color: #5e90fa; + selection-background-color: #00E0E0; /* Padding and margin defined */ border-style: solid; border: 1px solid #b6b6b6; /* border top color defined after QAbstractSpinBox, QLineEdit and QComboBox */ @@ -58,7 +58,7 @@ tabBarPlus::close-button { } tabBarPlus::close-button:hover { - background-color: #7cabf9; + background-color: #006666; } tabBarPlus::close-button:pressed { @@ -95,9 +95,9 @@ tabBarPlus::tab:bottom:last { tabBarPlus::tab:top:selected, tabBarPlus::tab:bottom:selected { - color: black; - background-color: qlineargradient(spread:pad, x1:1, y1:0.545, x2:1, y2:0, stop:0 #3874f2, stop:1 #5e90fa); - border-color: #3874f2; + color: white; + background-color: qlineargradient(spread:pad, x1:1, y1:0.545, x2:1, y2:0, stop:0 #00b0b0, stop:1 #00BaBa); + border-color: #006666; } tabBarPlus::tab:top:!selected:hover, @@ -126,12 +126,12 @@ fileWindow::close-button { padding: 0px; margin: 0px; border-radius: 2px; - background-image: url("src/main/resources/base/ui/close.svg"); + background-image: url("src/main/resources/base/ui/close.png"); background-position: center center; background-repeat: none; } fileWindow::close-button:hover { - background-color: #7cabf9; + background-color: #004646; } fileWindow::close-button:pressed { @@ -143,7 +143,7 @@ QMainWindow { } QDockWidget#Title { - background-color: #7cabf9; + background-color: #004646; } QDockWidget#Toolbar{ background-color: white; @@ -191,7 +191,7 @@ QToolButton { QToolButton:hover, QToolButton:focus { color: black; - border: 3px solid #3874f2; + border: 3px solid #00BaBa; } QToolButton:disabled, @@ -202,12 +202,12 @@ QToolButton:disabled:checked { } QToolButton:pressed { - border-color: #7cabf9; + border-color: #004646; } QToolButton:checked { - background-color: #5e90fa; - border-color: #3874f2; + background-color: #006666; + border-color: #004646; } sectionLabel{ @@ -228,8 +228,7 @@ sectionLabel:first{ customView QPushButton{ background-color: rgba(214, 54, 40, 50%); - background-image: url("src/main/resources/base/ui/close.svg"); - border: 1px groove white; + border: 1px dashed white; border-radius: 2px; font-size: 18px; font-weight: Bold; -- cgit