d3v1l/matrixion
1
0
Fork 0
mirror of https://github.com/Nheko-Reborn/nheko.git synced 2024-10-30 09:30:47 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor the room settings menu to look like the user profile

Browse source
This commit is contained in:
Konstantinos Sideris 2018-07-22 15:41:06 +03:00
parent 5dfd26abc5
commit 0247b47553
10 changed files with 94 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
resources/icons/ui/edit.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 592 B

1
resources/icons/ui/edit.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 587 B

BIN
resources/icons/ui/edit@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 858 B

BIN
resources/icons/ui/world.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
resources/icons/ui/world.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 818 B

BIN
resources/icons/ui/world@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

8
resources/res.qrc
View file

@ -39,7 +39,6 @@
<file>icons/ui/paper-clip-outline@2x.png</file>
<file>icons/ui/angle-pointing-to-left.png</file>
<file>icons/ui/angle-pointing-to-left@2x.png</file>
<file>icons/ui/world.svg</file>
<file>icons/ui/angle-arrow-down.png</file>
<file>icons/ui/angle-arrow-down@2x.png</file>
<file>icons/ui/arrow-pointing-down.png</file>
@ -50,7 +49,12 @@
<file>icons/ui/pause-symbol@2x.png</file>
<file>icons/ui/remove-symbol.png</file>
<file>icons/ui/remove-symbol@2x.png</file>
<file>icons/ui/edit.svg</file>
<file>icons/ui/world.png</file>
<file>icons/ui/world@2x.png</file>
<file>icons/ui/edit.png</file>
<file>icons/ui/edit@2x.png</file>
<file>icons/emoji-categories/people.png</file>
<file>icons/emoji-categories/people@2x.png</file>

2
src/CommunitiesListItem.cpp
View file

@ -18,7 +18,7 @@ CommunitiesListItem::CommunitiesListItem(QString group_id, QWidget *parent)
rippleOverlay_->setClipping(true);
if (groupId_ == "world")
avatar_ = QPixmap(":/icons/icons/ui/world.svg");
avatar_ = QPixmap(":/icons/icons/ui/world.png");
}
void

242
src/dialogs/RoomSettings.cpp
View file

@ -4,7 +4,6 @@
#include <QMessageBox>
#include <QPainter>
#include <QPixmap>
#include <QSettings>
#include <QSharedPointer>
#include <QStyleOption>
#include <QVBoxLayout>
@ -26,40 +25,55 @@
using namespace dialogs;
using namespace mtx::events;
constexpr int BUTTON_SIZE = 36;
constexpr int BUTTON_RADIUS = BUTTON_SIZE / 2;
constexpr int WIDGET_MARGIN = 20;
constexpr int TOP_WIDGET_MARGIN = 2 * WIDGET_MARGIN;
constexpr int WIDGET_SPACING = 15;
constexpr int TEXT_SPACING = 4;
constexpr int BUTTON_SPACING = 2 * TEXT_SPACING;
EditModal::EditModal(const QString &roomId, QWidget *parent)
: QWidget(parent)
, roomId_{roomId}
{
setMinimumWidth(360);
setAutoFillBackground(true);
setAttribute(Qt::WA_DeleteOnClose, true);
setWindowFlags(Qt::Tool | Qt::WindowStaysOnTopHint);
setWindowModality(Qt::WindowModal);
QFont doubleFont;
doubleFont.setPointSizeF(doubleFont.pointSizeF() * 2);
setMinimumWidth(QFontMetrics(doubleFont).averageCharWidth() * 30 - 2 * WIDGET_MARGIN);
setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Maximum);
auto layout = new QVBoxLayout(this);
QFont buttonFont;
buttonFont.setPointSizeF(buttonFont.pointSizeF() * 1.3);
applyBtn_ = new FlatButton(tr("APPLY"), this);
applyBtn_->setFontSize(conf::btn::fontSize);
applyBtn_->setFont(buttonFont);
applyBtn_->setRippleStyle(ui::RippleStyle::NoRipple);
applyBtn_->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Maximum);
cancelBtn_ = new FlatButton(tr("CANCEL"), this);
cancelBtn_->setFontSize(conf::btn::fontSize);
cancelBtn_->setFont(buttonFont);
cancelBtn_->setRippleStyle(ui::RippleStyle::NoRipple);
cancelBtn_->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Maximum);
auto btnLayout = new QHBoxLayout;
btnLayout->setContentsMargins(5, 20, 5, 5);
btnLayout->setMargin(5);
btnLayout->addStretch(1);
btnLayout->addWidget(applyBtn_);
btnLayout->addWidget(cancelBtn_);
nameInput_ = new TextField(this);
nameInput_->setLabel(tr("Name"));
nameInput_->setLabel(tr("Name").toUpper());
topicInput_ = new TextField(this);
topicInput_->setLabel(tr("Topic"));
QFont font;
font.setPixelSize(conf::modals::errorFont);
topicInput_->setLabel(tr("Topic").toUpper());
errorField_ = new QLabel(this);
errorField_->setFont(font);
errorField_->setWordWrap(true);
errorField_->hide();
@ -154,79 +168,46 @@ EditModal::setFields(const QString &roomName, const QString &roomTopic)
topicInput_->setText(roomTopic);
}
TopSection::TopSection(const RoomInfo &info, const QImage &img, QWidget *parent)
: QWidget{parent}
, info_{std::move(info)}
{
textColor_ = palette().color(QPalette::Text);
avatar_ = utils::scaleImageToPixmap(img, AvatarSize);
QSizePolicy policy(QSizePolicy::Minimum, QSizePolicy::Minimum);
setSizePolicy(policy);
}
void
TopSection::setRoomName(const QString &name)
{
info_.name = name.toStdString();
update();
}
QSize
TopSection::sizeHint() const
{
QFont font;
font.setPixelSize(18);
return QSize(340, AvatarSize + QFontMetrics(font).ascent());
}
RoomSettings::RoomSettings(const QString &room_id, QWidget *parent)
: QFrame(parent)
, room_id_{std::move(room_id)}
{
setMaximumWidth(420);
retrieveRoomInfo();
constexpr int SettingsMargin = 2;
QFont doubleFont;
doubleFont.setPointSizeF(doubleFont.pointSizeF() * 2);
setMinimumWidth(QFontMetrics(doubleFont).averageCharWidth() * 30 - 2 * WIDGET_MARGIN);
setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Maximum);
auto layout = new QVBoxLayout(this);
layout->setSpacing(15);
layout->setMargin(20);
layout->setSpacing(WIDGET_SPACING);
layout->setContentsMargins(WIDGET_MARGIN, TOP_WIDGET_MARGIN, WIDGET_MARGIN, WIDGET_MARGIN);
okBtn_ = new FlatButton(tr("OK"), this);
okBtn_->setFontSize(conf::btn::fontSize);
cancelBtn_ = new FlatButton(tr("CANCEL"), this);
cancelBtn_->setFontSize(conf::btn::fontSize);
QFont font;
font.setWeight(65);
font.setPointSizeF(font.pointSizeF() * 1.2);
auto settingsLabel = new QLabel(tr("Settings").toUpper(), this);
settingsLabel->setFont(font);
auto btnLayout = new QHBoxLayout();
btnLayout->setSpacing(0);
btnLayout->setMargin(0);
btnLayout->addStretch(1);
btnLayout->addWidget(okBtn_);
btnLayout->addWidget(cancelBtn_);
auto notifOptionLayout_ = new QHBoxLayout;
notifOptionLayout_->setMargin(SettingsMargin);
auto notifLabel = new QLabel(tr("Notifications"), this);
auto notifCombo = new QComboBox(this);
notifCombo->setDisabled(true);
notifCombo->addItem(tr("Muted"));
notifCombo->addItem(tr("Mentions only"));
notifCombo->addItem(tr("All messages"));
notifLabel->setStyleSheet("font-size: 15px;");
notifOptionLayout_->addWidget(notifLabel);
auto notifOptionLayout_ = new QHBoxLayout;
notifOptionLayout_->setMargin(0);
notifOptionLayout_->addWidget(notifLabel, Qt::AlignBottom | Qt::AlignLeft);
notifOptionLayout_->addWidget(notifCombo, 0, Qt::AlignBottom | Qt::AlignRight);
auto accessOptionLayout = new QHBoxLayout();
accessOptionLayout->setMargin(SettingsMargin);
auto accessLabel = new QLabel(tr("Room access"), this);
accessCombo = new QComboBox(this);
accessCombo->addItem(tr("Anyone and guests"));
accessCombo->addItem(tr("Anyone"));
accessCombo->addItem(tr("Invited users"));
accessCombo->setDisabled(true);
accessLabel->setStyleSheet("font-size: 15px;");
if (info_.join_rule == JoinRule::Public) {
if (info_.guest_access) {
@ -238,24 +219,19 @@ RoomSettings::RoomSettings(const QString &room_id, QWidget *parent)
accessCombo->setCurrentIndex(2);
}
accessOptionLayout->addWidget(accessLabel);
accessOptionLayout->addWidget(accessCombo);
auto accessOptionLayout = new QHBoxLayout();
accessOptionLayout->setMargin(0);
accessOptionLayout->addWidget(accessLabel, Qt::AlignBottom | Qt::AlignLeft);
accessOptionLayout->addWidget(accessCombo, 0, Qt::AlignBottom | Qt::AlignRight);
auto encryptionOptionLayout = new QHBoxLayout;
encryptionOptionLayout->setMargin(SettingsMargin);
auto encryptionLabel = new QLabel(tr("Encryption"), this);
encryptionLabel->setStyleSheet("font-size: 15px;");
encryptionToggle_ = new Toggle(this);
encryptionToggle_ = new Toggle(this);
connect(encryptionToggle_, &Toggle::toggled, this, [this](bool isOn) {
if (isOn)
return;
QFont font;
font.setPixelSize(conf::fontSize);
QMessageBox msgBox;
msgBox.setIcon(QMessageBox::Question);
msgBox.setFont(font);
msgBox.setWindowTitle(tr("End-to-End Encryption"));
msgBox.setText(tr(
"Encryption is currently experimental and things might break unexpectedly. <br>"
@ -279,7 +255,9 @@ RoomSettings::RoomSettings(const QString &room_id, QWidget *parent)
}
});
encryptionOptionLayout->addWidget(encryptionLabel);
auto encryptionOptionLayout = new QHBoxLayout;
encryptionOptionLayout->setMargin(0);
encryptionOptionLayout->addWidget(encryptionLabel, Qt::AlignBottom | Qt::AlignLeft);
encryptionOptionLayout->addWidget(encryptionToggle_, 0, Qt::AlignBottom | Qt::AlignRight);
// Disable encryption button.
@ -296,30 +274,37 @@ RoomSettings::RoomSettings(const QString &room_id, QWidget *parent)
encryptionLabel->hide();
}
QFont font;
font.setPixelSize(18);
font.setWeight(70);
avatar_ = new Avatar(this);
avatar_->setSize(128);
if (avatarImg_.isNull())
avatar_->setLetter(utils::firstChar(QString::fromStdString(info_.name)));
else
avatar_->setImage(avatarImg_);
auto menuLabel = new QLabel("Room Settings", this);
menuLabel->setFont(font);
auto roomNameLabel = new QLabel(QString::fromStdString(info_.name), this);
roomNameLabel->setFont(doubleFont);
topSection_ = new TopSection(info_, avatarImg_, this);
auto membersLabel =
new QLabel(QString::fromStdString("%1 members").arg(info_.member_count), this);
editLayout_ = new QHBoxLayout;
editLayout_->setMargin(0);
editLayout_->addWidget(topSection_);
auto textLayout = new QVBoxLayout;
textLayout->addWidget(roomNameLabel);
textLayout->addWidget(membersLabel);
textLayout->setAlignment(roomNameLabel, Qt::AlignCenter | Qt::AlignTop);
textLayout->setAlignment(membersLabel, Qt::AlignCenter | Qt::AlignTop);
textLayout->setSpacing(TEXT_SPACING);
textLayout->setMargin(0);
setupEditButton();
layout->addWidget(menuLabel);
layout->addLayout(editLayout_);
layout->addWidget(avatar_, Qt::AlignCenter | Qt::AlignTop);
layout->addLayout(textLayout);
layout->addLayout(btnLayout_);
layout->addWidget(settingsLabel, Qt::AlignLeft);
layout->addLayout(notifOptionLayout_);
layout->addLayout(accessOptionLayout);
layout->addLayout(encryptionOptionLayout);
layout->addLayout(btnLayout);
connect(cancelBtn_, &QPushButton::clicked, this, &RoomSettings::closing);
connect(okBtn_, &QPushButton::clicked, this, &RoomSettings::saveSettings);
layout->addStretch(1);
connect(this, &RoomSettings::enableEncryptionError, this, [this](const QString &msg) {
encryptionToggle_->setState(true);
@ -332,9 +317,12 @@ RoomSettings::RoomSettings(const QString &room_id, QWidget *parent)
void
RoomSettings::setupEditButton()
{
btnLayout_ = new QHBoxLayout;
btnLayout_->setSpacing(BUTTON_SPACING);
btnLayout_->setMargin(0);
try {
QSettings settings;
auto userId = settings.value("auth/user_id").toString().toStdString();
auto userId = utils::localUser().toStdString();
hasEditRights_ = cache::client()->hasEnoughPowerLevel(
{EventType::RoomName, EventType::RoomTopic}, room_id_.toStdString(), userId);
@ -342,20 +330,17 @@ RoomSettings::setupEditButton()
nhlog::db()->warn("lmdb error: {}", e.what());
}
constexpr int buttonSize = 36;
constexpr int iconSize = buttonSize / 2;
if (!hasEditRights_)
return;
QIcon editIcon;
editIcon.addFile(":/icons/icons/ui/edit.svg");
editIcon.addFile(":/icons/icons/ui/edit.png");
editFieldsBtn_ = new FlatButton(this);
editFieldsBtn_->setFixedSize(buttonSize, buttonSize);
editFieldsBtn_->setCornerRadius(iconSize);
editFieldsBtn_->setFixedSize(BUTTON_SIZE, BUTTON_SIZE);
editFieldsBtn_->setCornerRadius(BUTTON_RADIUS);
editFieldsBtn_->setIcon(editIcon);
editFieldsBtn_->setIcon(editIcon);
editFieldsBtn_->setIconSize(QSize(iconSize, iconSize));
editFieldsBtn_->setIconSize(QSize(BUTTON_RADIUS, BUTTON_RADIUS));
connect(editFieldsBtn_, &QPushButton::clicked, this, [this]() {
retrieveRoomInfo();
@ -364,12 +349,14 @@ RoomSettings::setupEditButton()
modal->setFields(QString::fromStdString(info_.name),
QString::fromStdString(info_.topic));
modal->show();
connect(modal, &EditModal::nameChanged, this, [this](const QString &newName) {
topSection_->setRoomName(newName);
connect(modal, &EditModal::nameChanged, this, [](const QString &newName) {
Q_UNUSED(newName);
});
});
editLayout_->addWidget(editFieldsBtn_, 0, Qt::AlignRight | Qt::AlignTop);
btnLayout_->addStretch(1);
btnLayout_->addWidget(editFieldsBtn_);
btnLayout_->addStretch(1);
}
void
@ -439,64 +426,3 @@ RoomSettings::paintEvent(QPaintEvent *)
QPainter p(this);
style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
}
void
TopSection::paintEvent(QPaintEvent *)
{
Painter p(this);
PainterHighQualityEnabler hq(p);
constexpr int textStartX = AvatarSize + 5 * Padding;
const int availableTextWidth = width() - textStartX;
constexpr int nameFont = 15;
constexpr int membersFont = 14;
p.save();
p.setPen(textColor());
p.translate(textStartX, 2 * Padding);
// Draw the name.
QFont font;
font.setPixelSize(membersFont);
const auto members = QString("%1 members").arg(info_.member_count);
font.setPixelSize(nameFont);
const auto name = QFontMetrics(font).elidedText(
QString::fromStdString(info_.name), Qt::ElideRight, availableTextWidth - 4 * Padding);
font.setWeight(60);
p.setFont(font);
p.drawTextLeft(0, 0, name);
// Draw the number of members
p.translate(0, QFontMetrics(p.font()).ascent() + 2 * Padding);
font.setPixelSize(membersFont);
font.setWeight(50);
p.setFont(font);
p.drawTextLeft(0, 0, members);
p.restore();
if (avatar_.isNull()) {
font.setPixelSize(AvatarSize / 2);
font.setWeight(60);
p.setFont(font);
p.translate(Padding, Padding);
p.drawLetterAvatar(utils::firstChar(name),
QColor("white"),
QColor("black"),
AvatarSize + Padding,
AvatarSize + Padding,
AvatarSize);
} else {
QRect avatarRegion(Padding, Padding, AvatarSize, AvatarSize);
QPainterPath pp;
pp.addEllipse(avatarRegion.center(), AvatarSize, AvatarSize);
p.setClipPath(pp);
p.drawPixmap(avatarRegion, avatar_);
}
}

36
src/dialogs/RoomSettings.h
View file

@ -49,32 +49,6 @@ private:
FlatButton *cancelBtn_;
};
class TopSection : public QWidget
{
Q_OBJECT
Q_PROPERTY(QColor textColor WRITE setTextColor READ textColor)
public:
TopSection(const RoomInfo &info, const QImage &img, QWidget *parent = nullptr);
QSize sizeHint() const override;
void setRoomName(const QString &name);
QColor textColor() const { return textColor_; }
void setTextColor(QColor &color) { textColor_ = color; }
protected:
void paintEvent(QPaintEvent *event) override;
private:
static constexpr int AvatarSize = 72;
static constexpr int Padding = 5;
RoomInfo info_;
QPixmap avatar_;
QColor textColor_;
};
namespace dialogs {
class RoomSettings : public QFrame
@ -102,14 +76,12 @@ private:
void retrieveRoomInfo();
void enableEncryption();
Avatar *avatar_;
//! Whether the user would be able to change the name or the topic of the room.
bool hasEditRights_ = true;
bool usesEncryption_ = false;
QHBoxLayout *editLayout_;
// Button section
FlatButton *okBtn_;
FlatButton *cancelBtn_;
QHBoxLayout *btnLayout_;
FlatButton *editFieldsBtn_;
@ -117,8 +89,6 @@ private:
QString room_id_;
QImage avatarImg_;
TopSection *topSection_;
QComboBox *accessCombo;
Toggle *encryptionToggle_;
};