Adjust UI according to blueprint.

This commit is contained in:
zhangjiaping 2021-09-01 17:46:43 +08:00
parent 16643e8d2a
commit 84683f59ae
16 changed files with 166 additions and 238 deletions

View File

@ -10,43 +10,46 @@ LanListItem::LanListItem(KyConnectItem *data, QString deviceName, QWidget *paren
m_connectOperation = new KyWiredConnectOperation;
m_data = data;
m_nameLabel->setText(m_data->m_connectName);
if (m_data != nullptr) {
if (m_data->m_connectState == NetworkManager::ActiveConnection::State::Activated) {
setIcon(true);
m_activated = true;
m_isActive = true;
} else {
setIcon(false);
m_activated = false;
m_isActive = false;
}
}
m_netButton->setActive(m_isActive);
m_itemFrame->installEventFilter(this);
}
bool LanListItem::eventFilter(QObject *watched, QEvent *event)
void LanListItem::onInfoButtonClicked()
{
if (watched == m_itemFrame) {
if (event->type() == QEvent::MouseButtonPress) {
if (!m_activated) {
//未连接,点击后连
m_connectOperation->activateWiredConnection(m_data->m_connectUuid, deviceName);
qDebug() << m_data->m_connectName << "Connect after user clicked!";
m_activated = true;
} else {
//连接,点击后断开
m_connectOperation->deactivateWiredConnection(m_data->m_connectName, m_data->m_connectUuid);
qDebug() << m_data->m_connectName << "Disconnect after user clicked!";
m_activated = false;
}
}
}
void LanListItem::onNetButtonClicked()
{
if (!m_isActive) {
//未连接,点击后连
m_connectOperation->activateWiredConnection(m_data->m_connectUuid, deviceName);
qDebug() << m_data->m_connectName << "Connect after user clicked!";
m_isActive = true;
} else {
//连接,点击后断开
m_connectOperation->deactivateWiredConnection(m_data->m_connectName, m_data->m_connectUuid);
qDebug() << m_data->m_connectName << "Disconnect after user clicked!";
m_isActive = false;
}
return ListItem::eventFilter(watched, event);
}
void LanListItem::setIcon(bool isOn)
{
if (isOn) {
m_netButton->setIcon(QIcon::fromTheme("network-wired-connected-symbolic"));
m_netButton->setButtonIcon(QIcon::fromTheme("network-wired-connected-symbolic"));
} else {
m_netButton->setIcon(QIcon::fromTheme("network-wired-disconnected-symbolic"));
m_netButton->setButtonIcon(QIcon::fromTheme("network-wired-disconnected-symbolic"));
}
}

View File

@ -17,14 +17,16 @@ public:
protected:
void setIcon(bool isOn);
bool eventFilter(QObject *watched, QEvent *event);
private:
KyConnectItem *m_data = nullptr;
KyWiredConnectOperation *m_connectOperation = nullptr;
bool m_activated = false;
QString deviceName = nullptr;
private slots:
void onInfoButtonClicked();
void onNetButtonClicked();
};
#endif // LANLISTITEM_H

View File

@ -1,4 +1,5 @@
#include "listitem.h"
#include <QDebug>
#define MAIN_LAYOUT_MARGINS 0,0,0,0
#define MAIN_LAYOUT_SPACING 0
@ -12,6 +13,7 @@ ListItem::ListItem(QWidget *parent) : QFrame(parent)
{
initUI();
initConnection();
m_itemFrame->installEventFilter(this);
}
ListItem::~ListItem()
@ -23,22 +25,28 @@ ListItem::~ListItem()
m_infoButton = NULL;
}
bool ListItem::eventFilter(QObject *watched, QEvent *event)
{
if (watched == this) {
if (event->type() == QEvent::MouseButtonPress) {
this->onNetButtonClicked();
}
}
return QFrame::eventFilter(watched, event);
}
void ListItem::setName(const QString &name)
{
m_nameLabel->setText(name);
}
//仅无线调用,有线自己获取
void ListItem::setActive(const bool &isActive)
{
m_netButton->setActive(isActive);
m_isActive = isActive;
}
bool ListItem::eventFilter(QObject *watched, QEvent *event)
{
if (watched == m_itemFrame) {
if (event->type() == QEvent::MouseButtonPress) {
onNetButtonClicked();
}
}
return QFrame::eventFilter(watched, event);
}
void ListItem::initUI()
{
m_mainLayout = new QVBoxLayout(this);
@ -81,4 +89,3 @@ void ListItem::onNetButtonClicked()
{
}

View File

@ -4,7 +4,6 @@
#include <QEvent>
#include <QHBoxLayout>
#include "radioitembutton.h"
#include "netbutton.h"
#include "infobutton.h"
class ListItem : public QFrame
{
@ -13,6 +12,7 @@ public:
ListItem(QWidget *parent = nullptr);
~ListItem();
void setName(const QString &name);
void setActive(const bool &isActive);
protected:
bool eventFilter(QObject *watched, QEvent *event);
@ -24,6 +24,8 @@ protected:
RadioItemButton * m_netButton = nullptr;
InfoButton * m_infoButton = nullptr;
bool m_isActive = false;
public:
QVBoxLayout * m_mainLayout = nullptr;
QHBoxLayout * m_hItemLayout = nullptr;

View File

@ -54,11 +54,6 @@ void WlanListItem::setExpanded(const bool &expanded)
emit this->itemHeightChanged(m_data->m_NetSsid);
}
void WlanListItem::setActivated(bool activated)
{
this->m_isActivated = activated;
}
void WlanListItem::resizeEvent(QResizeEvent *event)
{
this->blockSignals(true);
@ -212,24 +207,9 @@ void WlanListItem::onNetButtonClicked()
qDebug() << "On wlan clicked! But there is no wlan connect!" << Q_FUNC_INFO << __LINE__;
return;
}
qDebug() << "On wlan clicked! ssid = " << m_data->m_NetSsid << "; name = " << m_data->m_connName << "." << Q_FUNC_INFO << __LINE__;
//判断当前item处于连接还是断开对比activessid
QString activedssid;
QMap<QString,QStringList> actMap;
m_resource->getWirelessActiveConnection(NetworkManager::ActiveConnection::State::Activated, actMap);
QMap<QString,QStringList>::iterator iter = actMap.begin();
while (iter != actMap.end()) {
if (iter.key() == m_wlanDevice && !iter.value().isEmpty()) {
activedssid = iter.value().at(0);
break;
}
iter ++;
}
qDebug()<<"Get activated wlan succeed! ssid = " << activedssid <<Q_FUNC_INFO << __LINE__;
//执行连接或断开
if (m_data->m_NetSsid == activedssid) {
if (m_isActive) {
m_connoperation->deActivateWirelessConnection(m_wlanDevice,m_data->m_connectUuid);
qDebug()<<"Clicked on connected wifi, it will be inactivated. ssid = " << m_data->m_NetSsid << Q_FUNC_INFO << __LINE__;
return;

View File

@ -27,7 +27,6 @@ public:
void setWlanSignal(const int &signal);
void setWlanState(const int &state);
void setExpanded(const bool &expanded);
void setActivated(bool activated);
protected:
void resizeEvent(QResizeEvent *event);
@ -46,7 +45,6 @@ private:
KyWirelessNetItem *m_data = nullptr;
KyWirelessConnectOperation *m_connoperation = nullptr;
bool m_hasPwd = true;
bool m_isActivated = false;
QString m_wlanDevice;
//密码输入区域的UI

View File

@ -40,6 +40,7 @@ void TabPage::initUI()
m_activatedNetDivider = new Divider(this);
m_inactivatedNetFrame = new QFrame(this);
m_inactivatedNetFrame->setMinimumHeight(INACTIVE_AREA_MIN_HEIGHT);
m_inactivatedNetLayout = new QVBoxLayout(m_inactivatedNetFrame);
m_inactivatedNetLayout->setContentsMargins(NET_LAYOUT_MARGINS);
m_inactivatedNetLayout->setSpacing(NET_LAYOUT_SPACING);

View File

@ -22,6 +22,7 @@
//#define SCROLL_AREA_HEIGHT 200
#define SETTINGS_LAYOUT_MARGINS 24,16,24,16
#define TRANSPARENT_COLOR QColor(0,0,0,0)
#define INACTIVE_AREA_MIN_HEIGHT 200
const QString CONFIG_FILE_PATH = QDir::homePath() + "/.config/ukui/kylin-nm.conf";

View File

@ -182,12 +182,12 @@ void WlanPage::appendActiveWlan(const QString &ssid, int &height)
}
KyWirelessNetItem *item_data = new KyWirelessNetItem(data);
WlanListItem *wlanItemWidget = new WlanListItem(m_resource, item_data, defaultDevice);
wlanItemWidget->setActivated(true);
qDebug() << "Activated wlan: ssid = " << item_data->m_NetSsid;
QListWidgetItem *wlanItem = new QListWidgetItem(m_activatedNetListWidget);
wlanItem->setSizeHint(QSize(m_activatedNetListWidget->width(), wlanItemWidget->height()));
m_activatedNetListWidget->addItem(wlanItem);
m_activatedNetListWidget->setItemWidget(wlanItem, wlanItemWidget);
wlanItemWidget->setActive(true);
height += wlanItemWidget->height();
}

View File

@ -1,61 +1,80 @@
#include "infobutton.h"
#include <QEvent>
#include <QPainter>
#define BUTTON_SIZE 36,36
#define ICON_SIZE 16,16
#define BACKGROUND_COLOR QColor(0,0,0,0)
#define FOREGROUND_COLOR_NORMAL QColor(0,0,0,255)
#define FOREGROUND_COLOR_HOVER QColor(55,144,250,255)
#define FOREGROUND_COLOR_PRESS QColor(36,109,212,255)
#define OUTER_PATH 8,8,16,16
#define INNER_PATH 9,9,14,14
#define TEXT_POS 14,5,16,16,0
InfoButton::InfoButton(QWidget *parent) : QPushButton(parent)
{
initUI();
installEventFilter(this);
}
void InfoButton::initUI()
{
info_img = QIcon::fromTheme("network-wired-connected-symbolic", QIcon::fromTheme("network-wired-symbolic", QIcon(":/res/l/network-online.svg")));
info_imgHover = QIcon::fromTheme("network-wireless-signal-excellent-symbolic", QIcon(":/res/x/wifi-list-bg.svg"));
info_imgPressed = QIcon::fromTheme("document-page-setup-symbolic", QIcon(":/res/x/setup.png"));
setIcon(info_img);
}
bool InfoButton::event(QEvent *event)
{
switch(event->type())
{
case QEvent::Enter:
setIcon(info_imgHover);
break;
case QEvent::Leave:
setIcon(info_img);
break;
case QEvent::MouseButtonPress:
setIcon(info_imgPressed);
break;
case QEvent::MouseButtonRelease:
setIcon(info_imgHover);
break;
default:
break;
}
return QPushButton::event(event);
}
void InfoButton::enterEvent(QEvent *)
{
}
void InfoButton::leaveEvent(QEvent *)
{
}
bool InfoButton::eventFilter(QObject *w, QEvent *e)
{
if(e->type() == QEvent::MouseButtonPress) {
}
return QPushButton::eventFilter(w, e);
this->setFixedSize(BUTTON_SIZE);
m_backgroundColor = BACKGROUND_COLOR;
m_foregroundColor = FOREGROUND_COLOR_NORMAL;
}
void InfoButton::paintEvent(QPaintEvent *event)
{
QPalette pal = this->palette();
pal.setColor(QPalette::Base, m_backgroundColor);
pal.setColor(QPalette::Text, m_foregroundColor);
return QPushButton::paintEvent(event);
QPainterPath cPath;
cPath.addRect(0, 0, ICON_SIZE);
cPath.addEllipse(0, 0, ICON_SIZE);
QPainterPath outerPath;
outerPath.addEllipse(OUTER_PATH);
QPainterPath innerPath;
innerPath.addEllipse(INNER_PATH);
outerPath -= innerPath;
QPainter painter(this);
painter.setRenderHint(QPainter:: Antialiasing, true); //设置渲染,启动反锯齿
painter.setPen(Qt::NoPen);
painter.setBrush(pal.color(QPalette::Base));
painter.drawPath(cPath);
painter.fillPath(outerPath, pal.color(QPalette::Text));
painter.setPen(m_foregroundColor);
painter.drawText(TEXT_POS, "i");
}
void InfoButton::enterEvent(QEvent *event)
{
m_foregroundColor = FOREGROUND_COLOR_HOVER;
this->repaint();
}
void InfoButton::leaveEvent(QEvent *event)
{
m_foregroundColor = FOREGROUND_COLOR_NORMAL;
this->repaint();
}
void InfoButton::mousePressEvent(QMouseEvent *event)
{
m_foregroundColor = FOREGROUND_COLOR_PRESS;
this->repaint();
return QPushButton::mousePressEvent(event);
}
void InfoButton::mouseReleaseEvent(QMouseEvent *event)
{
m_foregroundColor = FOREGROUND_COLOR_HOVER;
this->repaint();
return QPushButton::mouseReleaseEvent(event);
}

View File

@ -10,18 +10,19 @@ public:
explicit InfoButton(QWidget * parent = nullptr);
~InfoButton() = default;
protected:
void paintEvent(QPaintEvent *event);
void enterEvent(QEvent *event);
void leaveEvent(QEvent *event);
void mousePressEvent(QMouseEvent *event);
void mouseReleaseEvent(QMouseEvent *event);
private:
void initUI();
QIcon info_img;
QIcon info_imgHover;
QIcon info_imgPressed;
protected:
bool event(QEvent *event);
virtual void enterEvent(QEvent *event) override;
virtual void leaveEvent(QEvent *event);
bool eventFilter(QObject *watched, QEvent *event);
void paintEvent(QPaintEvent *event);
private:
QColor m_backgroundColor;
QColor m_foregroundColor;
};
#endif // INFOBUTTON_H

View File

@ -1,53 +0,0 @@
#include "netbutton.h"
NetButton::NetButton(bool isActivated, QWidget *parent) : QPushButton(parent)
{
connect(this, &NetButton::requestStartLoading, this, &NetButton::onLoadingStarted);
connect(this, &NetButton::requestStopLoading, this, &NetButton::onLoadingStopped);
m_isActivated = isActivated;
this->setAutoFillBackground(false);
m_iconLabel = new QLabel(this);
m_iconLabel->setScaledContents(true);
}
void NetButton::startLoading()
{
emit this->requestStartLoading();
}
void NetButton::stopLoading()
{
emit this->requestStopLoading();
}
void NetButton::setPressed()
{
//ZJP_TODO 设置颜色为点击颜色,注意区分已连接/未连接
if (m_isActivated)
;
;
}
void NetButton::setReleased()
{
//ZJP_TODO 设置颜色为未点击颜色,注意区分已连接/未连接
if (m_isActivated)
;
;
}
void NetButton::setButtonIcon(QIcon *icon)
{
if (!icon) { return; }
m_iconLabel->setPixmap(icon->pixmap(this->size()));
}
void NetButton::onLoadingStarted()
{
//ZJP_TODO 开始播放转圈动画
}
void NetButton::onLoadingStopped()
{
//ZJP_TODO 停止播放转圈动画
}

View File

@ -1,34 +0,0 @@
#ifndef NETBUTTON_H
#define NETBUTTON_H
#include <QPushButton>
#include <QIcon>
#include <QLabel>
#define ACTIVATED true
#define INACTIVATED false
class NetButton : public QPushButton
{
Q_OBJECT
public:
NetButton(bool isActivated = INACTIVATED, QWidget * parent = nullptr);
~NetButton() = default;
void startLoading();
void stopLoading();
void setPressed();
void setReleased();
void setButtonIcon(QIcon *);
signals:
void requestStartLoading();
void requestStopLoading();
private:
bool m_isActivated = INACTIVATED;
QLabel * m_iconLabel = nullptr;
private slots:
void onLoadingStarted();
void onLoadingStopped();
};
#endif // NETBUTTON_H

View File

@ -1,14 +1,18 @@
#include "radioitembutton.h"
#include <QPainter>
#include <QStyle>
#define BUTTON_SIZE 32,32
#define BUTTON_SIZE 36,36
#define ICON_SIZE 16,16
#define BACKGROUND_COLOR QColor(0,0,0,0)
#define FOREGROUND_COLOR_NORMAL_INACTIVE QColor(230,230,230,255)
#define FOREGROUND_COLOR_PRESS_INACTIVE QColor(217,217,217,255)
#define FOREGROUND_COLOR_NORMAL_ACTIVE QColor(55,144,250,255)
#define FOREGROUND_COLOR_PRESS_ACTIVE QColor(36,109,212,255)
RadioItemButton::RadioItemButton(bool isActivated, QWidget *parent) : QPushButton(parent)
RadioItemButton::RadioItemButton(QWidget *parent) : QPushButton(parent)
{
connect(this, &RadioItemButton::requestStartLoading, this, &RadioItemButton::onLoadingStarted);
connect(this, &RadioItemButton::requestStopLoading, this, &RadioItemButton::onLoadingStopped);
m_isActivated = isActivated;
this->setAutoFillBackground(false);
m_iconLabel = new QLabel(this);
@ -16,6 +20,7 @@ RadioItemButton::RadioItemButton(bool isActivated, QWidget *parent) : QPushButto
m_iconLabel->setFixedSize(BUTTON_SIZE);
m_iconLabel->setAlignment(Qt::AlignCenter);
setActive(false);
//JXJ_TODO loading动画
// switchTimer = new QTimer(this);
// connect(switchTimer, &QTimer::timeout, this, &RadioItemButton::onLoadingStarted);
@ -31,22 +36,6 @@ void RadioItemButton::stopLoading()
emit this->requestStopLoading();
}
void RadioItemButton::setPressed()
{
//ZJP_TODO 设置颜色为点击颜色,注意区分已连接/未连接
if (m_isActivated)
;
;
}
void RadioItemButton::setReleased()
{
//ZJP_TODO 设置颜色为未点击颜色,注意区分已连接/未连接
if (m_isActivated)
;
;
}
void RadioItemButton::setButtonIcon(const QIcon &icon)
{
if (icon.isNull()) {
@ -55,6 +44,12 @@ void RadioItemButton::setButtonIcon(const QIcon &icon)
//ZJP_TODO 绘制圆形按钮
m_iconLabel->setPixmap(icon.pixmap(ICON_SIZE));
}
void RadioItemButton::setActive(const bool &isActive)
{
m_isActivated = isActive;
m_backgroundColor = m_isActivated? FOREGROUND_COLOR_NORMAL_ACTIVE : FOREGROUND_COLOR_NORMAL_INACTIVE;
}
void RadioItemButton::onLoadingStarted()
{
//ZJP_TODO 开始播放转圈动画
@ -88,8 +83,8 @@ void RadioItemButton::onLoadingStopped()
void RadioItemButton::paintEvent(QPaintEvent *event)
{
QPalette pal = this->palette();
pal.setColor(QPalette::Base, QColor(0,0,0,0));
pal.setColor(QPalette::Text, QColor(230,230,230,255));
pal.setColor(QPalette::Base, BACKGROUND_COLOR);
pal.setColor(QPalette::Text, m_backgroundColor);
QPainterPath cPath;
cPath.addRect(0, 0, this->width(), this->height());
@ -106,12 +101,18 @@ void RadioItemButton::paintEvent(QPaintEvent *event)
painter.drawPath(cPath);
painter.fillPath(innerPath, pal.color(QPalette::Text));
// QRect iconRect;
// iconRect = this->rect();
// iconRect.adjust(8,8,-8,-8);
// QPixmap pixmap = this->icon().pixmap(32,32);
// painter.drawPixmap(iconRect, pixmap);
// return QPushButton::paintEvent(event);
}
void RadioItemButton::mousePressEvent(QMouseEvent *event)
{
m_backgroundColor = m_isActivated? FOREGROUND_COLOR_PRESS_ACTIVE : FOREGROUND_COLOR_PRESS_INACTIVE;
this->repaint();
return QPushButton::mousePressEvent(event);
}
void RadioItemButton::mouseReleaseEvent(QMouseEvent *event)
{
m_backgroundColor = m_isActivated? FOREGROUND_COLOR_NORMAL_ACTIVE : FOREGROUND_COLOR_NORMAL_INACTIVE;
this->repaint();
return QPushButton::mouseReleaseEvent(event);
}

View File

@ -4,30 +4,32 @@
#include <QIcon>
#include <QLabel>
#include<QTimer>
#define ACTIVATED true
#define INACTIVATED false
class RadioItemButton : public QPushButton
{
Q_OBJECT
public:
RadioItemButton(bool isActivated = INACTIVATED, QWidget * parent = nullptr);
RadioItemButton(QWidget * parent = nullptr);
~RadioItemButton() = default;
void startLoading();
void stopLoading();
void setPressed();
void setReleased();
void setButtonIcon(const QIcon &icon);
void setActive(const bool &isActive);
signals:
void requestStartLoading();
void requestStopLoading();
private:
protected:
void paintEvent(QPaintEvent *event);
bool m_isActivated = INACTIVATED;
void mousePressEvent(QMouseEvent *event);
void mouseReleaseEvent(QMouseEvent *event);
private:
bool m_isActivated = false;
QLabel * m_iconLabel = nullptr;
QTimer * switchTimer = nullptr;
QColor m_backgroundColor;
int currentPage;
int countCurrentTime;

View File

@ -4,7 +4,6 @@ HEADERS += \
$$PWD/divider.h \
$$PWD/infobutton.h \
$$PWD/loadingdiv.h \
$$PWD/netbutton.h \
$$PWD/radioitembutton.h \
$$PWD/switchbutton.h
@ -13,6 +12,5 @@ SOURCES += \
$$PWD/divider.cpp \
$$PWD/infobutton.cpp \
$$PWD/loadingdiv.cpp \
$$PWD/netbutton.cpp \
$$PWD/radioitembutton.cpp \
$$PWD/switchbutton.cpp