Skip to content

Q
qgroundcontrol
Commit f2fd73b3 authored by Bryant's avatar Bryant
Browse files
Options

The editable waypoint view has been completely reworked from a styling... 

The editable waypoint view has been completely reworked from a styling perspective. Now both the light and dark styles work great, though switching between the styles doesn't work as expected yet. That's still to come.
parent 341d2966
Show whitespace changes
Inline Side-by-side
Showing with 303 additions and 351 deletions
files/styles/style-dark.css
View file @ f2fd73b3
...@@ -254,11 +254,10 @@ QPushButton:pressed, QToolButton:pressed { ...@@ -254,11 +254,10 @@ QPushButton:pressed, QToolButton:pressed {
QPushButton:pressed#killButton { QPushButton:pressed#killButton {
font-weight: bold; font-weight: bold;
min-height: 30px; min-height: 30px;
color: #000000; color: #000;
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #bb8500, stop:1 #903000); background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #bb8500, stop:1 #903000);
background-clip: border; background-clip: border;
border-width: 1px; border: 1px solid #555;
border-color: #555555;
border-radius: 5px; border-radius: 5px;
} }
...@@ -271,7 +270,7 @@ QSlider { ...@@ -271,7 +270,7 @@ QSlider {
} }
QSlider::groove:horizontal { QSlider::groove:horizontal {
border: 1px solid #999999; border: 1px solid #999;
height: 4px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */ height: 4px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
background-color: #4A4A4A; background-color: #4A4A4A;
margin: 2px 0; margin: 2px 0;
...@@ -284,7 +283,7 @@ QSlider::groove:horizontal:disabled { ...@@ -284,7 +283,7 @@ QSlider::groove:horizontal:disabled {
} }
QSlider::groove:vertical { QSlider::groove:vertical {
border: 1px solid #999999; border: 1px solid #999;
width: 4px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */ width: 4px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
background-color: #4A4A4A; background-color: #4A4A4A;
margin: 2px 0; margin: 2px 0;
...@@ -300,7 +299,7 @@ QSlider::handle:horizontal { ...@@ -300,7 +299,7 @@ QSlider::handle:horizontal {
QSlider::handle:horizontal:disabled { QSlider::handle:horizontal:disabled {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #535258, stop: 1 #050508); background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #535258, stop: 1 #050508);
border: 2px solid #444444; border: 2px solid #444;
width: 18px; width: 18px;
margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
border-radius: 3px; border-radius: 3px;
...@@ -321,7 +320,7 @@ QSizeGrip { ...@@ -321,7 +320,7 @@ QSizeGrip {
QSpinBox, QDoubleSpinBox { QSpinBox, QDoubleSpinBox {
min-height: 14px; min-height: 14px;
max-height: 18px; max-height: 18px;
border: 1px solid #4A4A4A; border: 1px solid #777;
border-radius: 5px; border-radius: 5px;
} }
...@@ -360,7 +359,7 @@ QTabBar::tab:hover { ...@@ -360,7 +359,7 @@ QTabBar::tab:hover {
QTabBar::tab:selected { QTabBar::tab:selected {
border: 2px solid #379AC3; border: 2px solid #379AC3;
background: #CCC; background: #555;
} }
QTabWidget::tab-bar { QTabWidget::tab-bar {
...@@ -392,3 +391,13 @@ QToolTip { ...@@ -392,3 +391,13 @@ QToolTip {
border-radius: 3px; border-radius: 3px;
color: #DDD; color: #DDD;
} }
WaypointEditableView {
border: 1px solid #777;
border-radius: 5px;
margin-bottom: 3px;
}
WaypointEditableView QCheckBox, WaypointEditableView .QWidget {
background: none;
}
files/styles/style-light.css
View file @ f2fd73b3
...@@ -254,14 +254,17 @@ QPushButton:pressed, QToolButton:pressed { ...@@ -254,14 +254,17 @@ QPushButton:pressed, QToolButton:pressed {
QPushButton:pressed#killButton { QPushButton:pressed#killButton {
font-weight: bold; font-weight: bold;
min-height: 30px; min-height: 30px;
color: #000000; color: #000;
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #bb8500, stop:1 #903000); background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #bb8500, stop:1 #903000);
background-clip: border; background-clip: border;
border-width: 1px; border: 1px solid #555;
border-color: #555555;
border-radius: 5px; border-radius: 5px;
} }
QScrollBar {
border: 1px solid #333;
}
QSeparator { QSeparator {
color: #EEE; color: #EEE;
} }
...@@ -392,3 +395,13 @@ QToolTip { ...@@ -392,3 +395,13 @@ QToolTip {
border-radius: 3px; border-radius: 3px;
color: #000; color: #000;
} }
WaypointEditableView {
border: 1px solid #333;
border-radius: 5px;
margin-bottom: 3px;
}
WaypointEditableView QCheckBox, WaypointEditableView .QWidget {
background: none;
}
src/ui/WaypointEditableView.cc
View file @ f2fd73b3
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
#include "WaypointEditableView.h" #include "WaypointEditableView.h"
#include "ui_WaypointEditableView.h" #include "ui_WaypointEditableView.h"
#include "MainWindow.h"
#include "mission/QGCMissionNavWaypoint.h" #include "mission/QGCMissionNavWaypoint.h"
#include "mission/QGCMissionNavLoiterUnlim.h" #include "mission/QGCMissionNavLoiterUnlim.h"
#include "mission/QGCMissionNavLoiterTurns.h" #include "mission/QGCMissionNavLoiterTurns.h"
...@@ -488,41 +488,41 @@ void WaypointEditableView::updateValues() ...@@ -488,41 +488,41 @@ void WaypointEditableView::updateValues()
{ {
m_ui->autoContinue->setChecked(wp->getAutoContinue()); m_ui->autoContinue->setChecked(wp->getAutoContinue());
} }
m_ui->idLabel->setText(QString("%1").arg(wp->getId()));
QColor backGroundColor = QGC::colorBackground; m_ui->idLabel->setText(QString::number(wp->getId()));
// Style alternating rows of Missions as lighter/darker.
QString backGroundColor;
static int lastId = -1; static int lastId = -1;
int currId = wp->getId() % 2; int currId = wp->getId() % 2;
if (currId != lastId) if (currId != lastId)
{ {
// qDebug() << "COLOR ID: " << currId;
if (currId == 1) if (currId == 1)
{ {
//backGroundColor = backGroundColor.lighter(150); if (MainWindow::instance()->getStyle() == MainWindow::QGC_MAINWINDOW_STYLE_LIGHT)
backGroundColor = QColor("#252528").lighter(150); {
backGroundColor = "#999";
}
else
{
backGroundColor = "#333";
}
}
else
{
if (MainWindow::instance()->getStyle() == MainWindow::QGC_MAINWINDOW_STYLE_LIGHT)
{
backGroundColor = "#CCC";
} }
else else
{ {
backGroundColor = QColor("#252528").lighter(250); backGroundColor = "#555";
}
} }
// qDebug() << "COLOR:" << backGroundColor.name();
// Update color based on id QString newStyle = QString("WaypointEditableView {background-color: %1}").arg(backGroundColor);
QString groupBoxStyle = QString("QGroupBox {padding: 0px; margin: 0px; border: 0px; background-color: %1; }").arg(backGroundColor.name());
QString labelStyle = QString("QWidget {background-color: %1; color: #DDDDDF; border-color: #EEEEEE; }").arg(backGroundColor.name());
QString checkBoxStyle = QString("QCheckBox {background-color: %1; color: #454545; border-color: #EEEEEE; }").arg(backGroundColor.name());
QString widgetSlotStyle = QString("QWidget {background-color: %1; color: #DDDDDF; border-color: #EEEEEE; } QSpinBox {background-color: #252528 } QDoubleSpinBox {background-color: #252528 } QComboBox {background-color: #252528 }").arg(backGroundColor.name()); //FIXME There should be a way to declare background color for widgetSlot without letting the children inherit this color. Here, background color for every widget-type (QSpinBox, etc.) has to be declared separately to overrule the coloring of QWidget.
m_ui->autoContinue->setStyleSheet(checkBoxStyle); this->setStyleSheet(newStyle);
m_ui->selectedBox->setStyleSheet(checkBoxStyle);
m_ui->idLabel->setStyleSheet(labelStyle);
m_ui->groupBox->setStyleSheet(groupBoxStyle);
m_ui->customActionWidget->setStyleSheet(widgetSlotStyle);
lastId = currId; lastId = currId;
} }
...@@ -651,3 +651,11 @@ void WaypointEditableView::changeEvent(QEvent *e) ...@@ -651,3 +651,11 @@ void WaypointEditableView::changeEvent(QEvent *e)
break; break;
} }
} }
void WaypointEditableView::paintEvent(QPaintEvent *)
{
QStyleOption opt;
opt.init(this);
QPainter p(this);
style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
}
src/ui/WaypointEditableView.h
View file @ f2fd73b3
...@@ -98,6 +98,7 @@ protected slots: ...@@ -98,6 +98,7 @@ protected slots:
protected: protected:
virtual void changeEvent(QEvent *e); virtual void changeEvent(QEvent *e);
virtual void paintEvent(QPaintEvent *);
Waypoint* wp; Waypoint* wp;
QGC_WAYPOINTEDITABLEVIEW_MODE viewMode; QGC_WAYPOINTEDITABLEVIEW_MODE viewMode;
// Widgets for every mission element // Widgets for every mission element
......
src/ui/WaypointEditableView.ui
View file @ f2fd73b3
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<rect> <rect>
<x>0</x> <x>0</x>
<y>0</y> <y>0</y>
<width>2208</width> <width>585</width>
<height>37</height> <height>45</height>
</rect> </rect>
</property> </property>
<property name="sizePolicy"> <property name="sizePolicy">
...@@ -26,78 +26,40 @@ ...@@ -26,78 +26,40 @@
<string>Form</string> <string>Form</string>
</property> </property>
<property name="styleSheet"> <property name="styleSheet">
<string notr="true">QWidget#colorIcon {} <string notr="true"/>
QWidget {
background-color: #252528;
color: #DDDDDF;
border-color: #CCCCCF;
}
QCheckBox {
background-color: #252528;
color: #454545;
}
QGroupBox {
border: 1px solid #EEEEEE;
border-radius: 5px;
padding: 0px 0px 0px 0px;
margin: 0px;
}
QGroupBox::title {
subcontrol-origin: margin;
subcontrol-position: top center; /* position at the top center */
margin: 0 3px 0px 3px;
padding: 0 3px 0px 0px;
font: bold 8px;
}
QPushButton {
font-weight: bold;
font-size: 12px;
border: 1px solid #465158;
margin: 1px;
border-radius: 2px;
min-width:16px;
max-width: 16px;
min-height: 16px;
max-height: 16px;
padding: 2px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #59666f, stop: 1 #414B52);
}
QPushButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #09A2B2, stop: 1 #414B52);
}
</string>
</property>
<layout class="QGridLayout" name="gridLayout">
<property name="margin">
<number>0</number>
</property> </property>
<layout class="QHBoxLayout" name="horizontalLayout">
<property name="spacing"> <property name="spacing">
<number>0</number> <number>6</number>
</property>
<property name="margin">
<number>6</number>
</property> </property>
<item row="0" column="0"> <item>
<widget class="QGroupBox" name="groupBox"> <widget class="QLabel" name="idLabel">
<property name="sizePolicy"> <property name="sizePolicy">
<sizepolicy hsizetype="Expanding" vsizetype="Preferred"> <sizepolicy hsizetype="Fixed" vsizetype="Preferred">
<horstretch>0</horstretch> <horstretch>0</horstretch>
<verstretch>0</verstretch> <verstretch>0</verstretch>
</sizepolicy> </sizepolicy>
</property> </property>
<property name="title"> <property name="minimumSize">
<string/> <size>
<width>25</width>
<height>0</height>
</size>
</property> </property>
<layout class="QHBoxLayout" name="horizontalLayout" stretch="2,5,20,20,200,1,0,0,0,0"> <property name="toolTip">
<property name="spacing"> <string>Waypoint Sequence Number</string>
<number>2</number>
</property> </property>
<property name="margin"> <property name="text">
<number>4</number> <string>ID</string>
</property> </property>
<property name="alignment">
<set>Qt::AlignCenter</set>
</property>
</widget>
</item>
<item> <item>
<widget class="QCheckBox" name="selectedBox"> <widget class="QCheckBox" name="selectedBox">
<property name="sizePolicy"> <property name="sizePolicy">
...@@ -133,32 +95,7 @@ QPushButton:pressed { ...@@ -133,32 +95,7 @@ QPushButton:pressed {
</widget> </widget>
</item> </item>
<item> <item>
<widget class="QLabel" name="idLabel"> <widget class="QComboBox" name="comboBox_frame">
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Preferred">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>25</width>
<height>0</height>
</size>
</property>
<property name="toolTip">
<string>Waypoint Sequence Number</string>
</property>
<property name="text">
<string>ID</string>
</property>
<property name="alignment">
<set>Qt::AlignCenter</set>
</property>
</widget>
</item>
<item>
<widget class="QComboBox" name="comboBox_action">
<property name="sizePolicy"> <property name="sizePolicy">
<sizepolicy hsizetype="Minimum" vsizetype="Fixed"> <sizepolicy hsizetype="Minimum" vsizetype="Fixed">
<horstretch>0</horstretch> <horstretch>0</horstretch>
...@@ -167,15 +104,15 @@ QPushButton:pressed { ...@@ -167,15 +104,15 @@ QPushButton:pressed {
</property> </property>
<property name="maximumSize"> <property name="maximumSize">
<size> <size>
<width>120</width> <width>100</width>
<height>16777215</height> <height>16777215</height>
</size> </size>
</property> </property>
<property name="toolTip"> <property name="toolTip">
<string>Action at Waypoint</string> <string>Coordinate frame</string>
</property> </property>
<property name="statusTip"> <property name="statusTip">
<string>Action at Waypoint</string> <string>Coordinate frame</string>
</property> </property>
<property name="sizeAdjustPolicy"> <property name="sizeAdjustPolicy">
<enum>QComboBox::AdjustToContentsOnFirstShow</enum> <enum>QComboBox::AdjustToContentsOnFirstShow</enum>
...@@ -183,7 +120,7 @@ QPushButton:pressed { ...@@ -183,7 +120,7 @@ QPushButton:pressed {
</widget> </widget>
</item> </item>
<item> <item>
<widget class="QComboBox" name="comboBox_frame"> <widget class="QComboBox" name="comboBox_action">
<property name="sizePolicy"> <property name="sizePolicy">
<sizepolicy hsizetype="Minimum" vsizetype="Fixed"> <sizepolicy hsizetype="Minimum" vsizetype="Fixed">
<horstretch>0</horstretch> <horstretch>0</horstretch>
...@@ -192,15 +129,15 @@ QPushButton:pressed { ...@@ -192,15 +129,15 @@ QPushButton:pressed {
</property> </property>
<property name="maximumSize"> <property name="maximumSize">
<size> <size>
<width>100</width> <width>120</width>
<height>16777215</height> <height>16777215</height>
</size> </size>
</property> </property>
<property name="toolTip"> <property name="toolTip">
<string>Coordinate frame</string> <string>Action at Waypoint</string>
</property> </property>
<property name="statusTip"> <property name="statusTip">
<string>Coordinate frame</string> <string>Action at Waypoint</string>
</property> </property>
<property name="sizeAdjustPolicy"> <property name="sizeAdjustPolicy">
<enum>QComboBox::AdjustToContentsOnFirstShow</enum> <enum>QComboBox::AdjustToContentsOnFirstShow</enum>
...@@ -223,19 +160,6 @@ QPushButton:pressed { ...@@ -223,19 +160,6 @@ QPushButton:pressed {
</property> </property>
</widget> </widget>
</item> </item>
<item>
<spacer name="removeSpacer">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>5</width>
<height>10</height>
</size>
</property>
</spacer>
</item>
<item> <item>
<widget class="QCheckBox" name="autoContinue"> <widget class="QCheckBox" name="autoContinue">
<property name="sizePolicy"> <property name="sizePolicy">
...@@ -256,7 +180,7 @@ QPushButton:pressed { ...@@ -256,7 +180,7 @@ QPushButton:pressed {
</widget> </widget>
</item> </item>
<item> <item>
<widget class="QPushButton" name="upButton"> <widget class="QToolButton" name="upButton">
<property name="sizePolicy"> <property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Fixed"> <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
<horstretch>0</horstretch> <horstretch>0</horstretch>
...@@ -288,7 +212,7 @@ QPushButton:pressed { ...@@ -288,7 +212,7 @@ QPushButton:pressed {
</widget> </widget>
</item> </item>
<item> <item>
<widget class="QPushButton" name="downButton"> <widget class="QToolButton" name="downButton">
<property name="sizePolicy"> <property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Fixed"> <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
<horstretch>0</horstretch> <horstretch>0</horstretch>
...@@ -320,7 +244,7 @@ QPushButton:pressed { ...@@ -320,7 +244,7 @@ QPushButton:pressed {
</widget> </widget>
</item> </item>
<item> <item>
<widget class="QPushButton" name="removeButton"> <widget class="QToolButton" name="removeButton">
<property name="sizePolicy"> <property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Fixed"> <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
<horstretch>0</horstretch> <horstretch>0</horstretch>
...@@ -350,9 +274,6 @@ QPushButton:pressed { ...@@ -350,9 +274,6 @@ QPushButton:pressed {
</item> </item>
</layout> </layout>
</widget> </widget>
</item>
</layout>
</widget>
<resources> <resources>
<include location="../../qgroundcontrol.qrc"/> <include location="../../qgroundcontrol.qrc"/>
</resources> </resources>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment