Browse Source

Merge pull request #1013 from yann300/ui_improvement2

Transaction/State Dialog redesign
cl-refactor
Arkadiy Paronyan 10 years ago
parent
commit
c7f1aee74a
  1. 4
      mix/QEther.cpp
  2. 12
      mix/qml/Ether.qml
  3. 6
      mix/qml/FilesSection.qml
  4. 4
      mix/qml/NewProjectDialog.qml
  5. 4
      mix/qml/ProjectList.qml
  6. 9
      mix/qml/QHashTypeView.qml
  7. 9
      mix/qml/QIntTypeView.qml
  8. 9
      mix/qml/QStringTypeView.qml
  9. 6
      mix/qml/SourceSansProBold.qml
  10. 7
      mix/qml/SourceSansProLight.qml
  11. 8
      mix/qml/SourceSansProRegular.qml
  12. 199
      mix/qml/StateDialog.qml
  13. 17
      mix/qml/StateDialogStyle.qml
  14. 1
      mix/qml/StateListModel.qml
  15. 440
      mix/qml/TransactionDialog.qml
  16. 1
      mix/qml/qmldir
  17. 4
      mix/res.qrc

4
mix/QEther.cpp

@ -35,7 +35,7 @@ QBigInt* QEther::toWei() const
const char* key = units.valueToKey(m_currentUnit);
for (std::pair<dev::u256, std::string> rawUnit: dev::eth::units())
{
if (rawUnit.second == QString(key).toLower().toStdString())
if (QString::fromStdString(rawUnit.second).toLower() == QString(key).toLower())
return multiply(new QBigInt(rawUnit.first));
}
return new QBigInt(dev::u256(0));
@ -46,7 +46,7 @@ void QEther::setUnit(QString const& _unit)
QMetaEnum units = staticMetaObject.enumerator(staticMetaObject.indexOfEnumerator("EtherUnit"));
for (int k = 0; k < units.keyCount(); k++)
{
if (QString(units.key(k)).toLower() == _unit)
if (QString(units.key(k)).toLower() == _unit.toLower())
{
m_currentUnit = static_cast<EtherUnit>(units.keysToValue(units.key(k)));
return;

12
mix/qml/Ether.qml

@ -32,6 +32,11 @@ RowLayout {
units.currentIndex = unit;
}
SourceSansProRegular
{
id: regularFont
}
TextField
{
implicitWidth: 200
@ -46,6 +51,7 @@ RowLayout {
readOnly: !edit
visible: edit
id: etherValueEdit;
font.family: regularFont.name
}
ComboBox
@ -59,6 +65,7 @@ RowLayout {
formattedValue.text = value.format();
}
}
model: ListModel {
id: unitsModel
ListElement { text: "Uether"; }
@ -81,10 +88,15 @@ RowLayout {
ListElement { text: "Kwei"; }
ListElement { text: "wei"; }
}
style: ComboBoxStyle {
font: regularFont.name
}
}
Text
{
visible: displayFormattedValue
id: formattedValue
font.family: regularFont.name
}
}

6
mix/qml/FilesSection.qml

@ -48,16 +48,14 @@ ColumnLayout {
model.remove(i);
}
FontLoader
SourceSansProRegular
{
id: fileNameFont
source: "qrc:/qml/fonts/SourceSansPro-Regular.ttf"
}
FontLoader
SourceSansProBold
{
id: boldFont
source: "qrc:/qml/fonts/SourceSansPro-Bold.ttf"
}
RowLayout

4
mix/qml/NewProjectDialog.qml

@ -5,7 +5,7 @@ import QtQuick.Window 2.0
import QtQuick.Dialogs 1.1
Window {
id: newProjectWin
modality: Qt.WindowModal
width: 640
@ -18,6 +18,8 @@ Window {
signal accepted
function open() {
newProjectWin.setX((Screen.width - width) / 2);
newProjectWin.setY((Screen.height - height) / 2);
visible = true;
titleField.focus = true;
}

4
mix/qml/ProjectList.qml

@ -12,10 +12,10 @@ Item {
anchors.fill: parent
id: filesCol
spacing: 0
FontLoader
SourceSansProLight
{
id: srcSansProLight
source: "qrc:/qml/fonts/SourceSansPro-Light.ttf"
}
Rectangle

9
mix/qml/QHashTypeView.qml

@ -4,13 +4,22 @@ Item
{
property alias text: textinput.text
id: editRoot
SourceSansProBold
{
id: boldFont
}
Rectangle {
anchors.fill: parent
radius: 4
color: "#f7f7f7"
TextInput {
id: textinput
text: text
anchors.fill: parent
wrapMode: Text.WrapAnywhere
font.family: boldFont.name
MouseArea {
id: mouseArea
anchors.fill: parent

9
mix/qml/QIntTypeView.qml

@ -4,12 +4,21 @@ Item
{
property alias text: textinput.text
id: editRoot
SourceSansProBold
{
id: boldFont
}
Rectangle {
anchors.fill: parent
radius: 4
color: "#f7f7f7"
TextInput {
id: textinput
text: text
anchors.fill: parent
font.family: boldFont.name
MouseArea {
id: mouseArea
anchors.fill: parent

9
mix/qml/QStringTypeView.qml

@ -4,13 +4,22 @@ Item
{
property alias text: textinput.text
id: editRoot
SourceSansProBold
{
id: boldFont
}
Rectangle {
anchors.fill: parent
radius: 4
color: "#f7f7f7"
TextInput {
id: textinput
text: text
anchors.fill: parent
wrapMode: Text.WrapAnywhere
font.family: boldFont.name
MouseArea {
id: mouseArea
anchors.fill: parent

6
mix/qml/SourceSansProBold.qml

@ -0,0 +1,6 @@
import QtQuick 2.0
FontLoader
{
source: "qrc:/qml/fonts/SourceSansPro-Bold.ttf"
}

7
mix/qml/SourceSansProLight.qml

@ -0,0 +1,7 @@
import QtQuick 2.0
FontLoader
{
source: "qrc:/qml/fonts/SourceSansPro-Light.ttf"
}

8
mix/qml/SourceSansProRegular.qml

@ -0,0 +1,8 @@
import QtQuick 2.0
FontLoader
{
source: "qrc:/qml/fonts/SourceSansPro-Regular.ttf"
}

199
mix/qml/StateDialog.qml

@ -2,6 +2,7 @@ import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0
import QtQuick.Controls.Styles 1.3
import org.ethereum.qml.QEther 1.0
import "js/QEtherHelper.js" as QEtherHelper
import "js/TransactionHelper.js" as TransactionHelper
@ -11,10 +12,11 @@ Window {
id: modalStateDialog
modality: Qt.WindowModal
width: 640
width: 450
height: 480
title: qsTr("State Edition")
visible: false
color: StateDialogStyle.generic.backgroundColor
property alias stateTitle: titleField.text
property alias stateBalance: balanceField.value
@ -34,6 +36,10 @@ Window {
transactionsModel.append(item.transactions[t]);
stateTransactions.push(item.transactions[t]);
}
modalStateDialog.setX((Screen.width - width) / 2);
modalStateDialog.setY((Screen.height - height) / 2);
visible = true;
isDefault = setDefault;
titleField.focus = true;
@ -54,74 +60,123 @@ Window {
return item;
}
GridLayout {
id: dialogContent
columns: 2
SourceSansProRegular
{
id: regularFont
}
Rectangle {
anchors.fill: parent
anchors.margins: 10
rowSpacing: 10
columnSpacing: 10
color: StateDialogStyle.generic.backgroundColor
GridLayout {
id: dialogContent
columns: 2
anchors.top: parent.top
rowSpacing: 10
columnSpacing: 10
Label {
text: qsTr("Title")
}
TextField {
id: titleField
focus: true
Layout.fillWidth: true
}
Label {
text: qsTr("Title")
font.family: regularFont.name
color: "#808080"
}
TextField {
id: titleField
focus: true
Layout.fillWidth: true
font.family: regularFont.name
}
Label {
text: qsTr("Balance")
}
Ether {
id: balanceField
edit: true
displayFormattedValue: true
Layout.fillWidth: true
}
Label {
text: qsTr("Balance")
font.family: regularFont.name
color: "#808080"
}
Ether {
id: balanceField
edit: true
displayFormattedValue: true
Layout.fillWidth: true
}
Label {
text: qsTr("Default")
}
CheckBox {
id: defaultCheckBox
Layout.fillWidth: true
Label {
text: qsTr("Default")
font.family: regularFont.name
color: "#808080"
}
CheckBox {
id: defaultCheckBox
Layout.fillWidth: true
}
}
Label {
text: qsTr("Transactions")
}
ListView {
Layout.fillWidth: true
Layout.fillHeight: true
model: transactionsModel
delegate: transactionRenderDelegate
}
ColumnLayout {
anchors.top: dialogContent.bottom
anchors.topMargin: 5
spacing: 5
RowLayout
{
Label {
text: qsTr("Transactions")
font.family: regularFont.name
color: "#808080"
}
Label {
Button {
tooltip: qsTr("Create a new transaction")
onClicked: transactionsModel.addTransaction()
height: 5
width: 5
style: ButtonStyle {
label: Text {
font.family: regularFont.name
text: qsTr("+")
font.pointSize: 15
color: "#808080"
height: 5
width: 5
}
background: Rectangle {
radius: 4
border.width: 1
color: "#f7f7f7"
height: 5
implicitHeight: 5
}
}
}
}
ListView {
id: trList
Layout.preferredWidth: 200
Layout.fillHeight: true
Layout.minimumHeight: 20 * transactionsModel.count
model: transactionsModel
delegate: transactionRenderDelegate
visible: transactionsModel.count > 0
}
}
Button {
text: qsTr("Add")
onClicked: transactionsModel.addTransaction()
}
}
RowLayout {
anchors.bottom: parent.bottom
anchors.right: parent.right;
Button {
text: qsTr("OK");
onClicked: {
close();
accepted();
RowLayout
{
anchors.bottom: parent.bottom
anchors.right: parent.right;
Button {
text: qsTr("OK");
onClicked: {
close();
accepted();
}
}
Button {
text: qsTr("Cancel");
onClicked: close();
}
}
Button {
text: qsTr("Cancel");
onClicked: close();
}
}
@ -161,26 +216,51 @@ Window {
text: functionId
font.pointSize: StateStyle.general.basicFontSize //12
verticalAlignment: Text.AlignBottom
font.family: regularFont.name
}
ToolButton {
text: qsTr("Edit");
visible: !stdContract
Layout.fillHeight: true
onClicked: transactionsModel.editTransaction(index)
style: ButtonStyle {
label: Text {
font.family: regularFont.name
text: qsTr("Edit")
font.italic: true
font.pointSize: 9
}
background: Rectangle {
color: "transparent"
}
}
}
ToolButton {
visible: index >= 0 ? !transactionsModel.get(index).executeConstructor : false
text: qsTr("Delete");
Layout.fillHeight: true
onClicked: transactionsModel.deleteTransaction(index)
style: ButtonStyle {
label: Text {
font.family: regularFont.name
text: qsTr("Delete")
font.italic: true
font.pointSize: 9
}
background: Rectangle {
color: "transparent"
}
}
}
}
}
}
TransactionDialog {
TransactionDialog
{
id: transactionDialog
onAccepted: {
onAccepted:
{
var item = transactionDialog.getItem();
if (transactionDialog.transactionIndex < transactionsModel.count) {
@ -192,5 +272,4 @@ Window {
}
}
}
}

17
mix/qml/StateDialogStyle.qml

@ -0,0 +1,17 @@
pragma Singleton
import QtQuick 2.0
QtObject {
property QtObject generic: QtObject
{
property string backgroundColor: "#ededed"
}
property QtObject stateDialog: QtObject
{
}
property QtObject transactionDialog: QtObject
{
}
}

1
mix/qml/StateListModel.qml

@ -2,6 +2,7 @@ import QtQuick 2.2
import QtQuick.Controls.Styles 1.1
import QtQuick.Controls 1.1
import QtQuick.Dialogs 1.1
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import org.ethereum.qml.QEther 1.0
import "js/QEtherHelper.js" as QEtherHelper

440
mix/qml/TransactionDialog.qml

@ -2,16 +2,19 @@ import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0
import QtQuick.Controls.Styles 1.3
import org.ethereum.qml.QEther 1.0
import "js/TransactionHelper.js" as TransactionHelper
import "."
Window {
id: modalTransactionDialog
modality: Qt.WindowModal
width:640
height:640
width: 450
height: (paramsModel.count > 0 ? 550 : 300)
visible: false
color: StateDialogStyle.generic.backgroundColor
title: qsTr("Transaction Edition")
property int transactionIndex
property alias transactionParams: paramsModel;
property alias gas: gasField.value;
@ -63,6 +66,9 @@ Window {
for (var p = 0; p < parameters.length; p++)
loadParameter(parameters[p]);
}
modalTransactionDialog.setX((Screen.width - width) / 2);
modalTransactionDialog.setY((Screen.height - height) / 2);
visible = true;
valueField.focus = true;
}
@ -105,6 +111,15 @@ Window {
}
}
function param(name)
{
for (var k = 0; k < paramsModel.count; k++)
{
if (paramsModel.get(k).name === name)
return paramsModel.get(k);
}
}
function close()
{
visible = false;
@ -155,264 +170,269 @@ Window {
return item;
}
ColumnLayout {
id: dialogContent
width: parent.width
SourceSansProRegular
{
id: regularFont
}
Rectangle {
anchors.fill: parent
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: 10
spacing: 30
RowLayout
{
id: rowFunction
Layout.fillWidth: true
height: 150
Label {
Layout.preferredWidth: 75
text: qsTr("Function")
}
ComboBox {
id: functionComboBox
color: StateDialogStyle.generic.backgroundColor
ColumnLayout {
id: dialogContent
spacing: 30
RowLayout
{
id: rowFunction
Layout.fillWidth: true
currentIndex: -1
textRole: "text"
editable: false
model: ListModel {
id: functionsModel
height: 150
Label {
Layout.preferredWidth: 75
text: qsTr("Function")
font.family: regularFont.name
color: "#808080"
}
onCurrentIndexChanged: {
loadParameters();
ComboBox {
id: functionComboBox
Layout.preferredWidth: 350
currentIndex: -1
textRole: "text"
editable: false
model: ListModel {
id: functionsModel
}
onCurrentIndexChanged: {
loadParameters();
}
style: ComboBoxStyle {
font: regularFont.name
}
}
}
}
RowLayout
{
id: rowValue
Layout.fillWidth: true
Label {
Layout.preferredWidth: 75
text: qsTr("Value")
}
Rectangle
RowLayout
{
id: rowValue
Layout.fillWidth: true
height: 150
Label {
Layout.preferredWidth: 75
text: qsTr("Value")
font.family: regularFont.name
color: "#808080"
}
Ether {
id: valueField
edit: true
displayFormattedValue: true
}
}
}
RowLayout
{
id: rowGas
Layout.fillWidth: true
Label {
Layout.preferredWidth: 75
text: qsTr("Gas")
}
Rectangle
RowLayout
{
id: rowGas
Layout.fillWidth: true
height: 150
Label {
Layout.preferredWidth: 75
text: qsTr("Gas")
font.family: regularFont.name
color: "#808080"
}
Ether {
id: gasField
edit: true
displayFormattedValue: true
}
}
}
RowLayout
{
id: rowGasPrice
Layout.fillWidth: true
Label {
Layout.preferredWidth: 75
text: qsTr("Gas Price")
}
Rectangle
RowLayout
{
id: rowGasPrice
Layout.fillWidth: true
height: 150
Label {
Layout.preferredWidth: 75
text: qsTr("Gas Price")
font.family: regularFont.name
color: "#808080"
}
Ether {
id: gasPriceField
edit: true
displayFormattedValue: true
}
}
}
RowLayout
{
Layout.fillWidth: true
Label {
text: qsTr("Parameters")
Layout.preferredWidth: 75
font.family: regularFont.name
color: "#808080"
visible: paramsModel.count > 0
}
TableView {
model: paramsModel
Layout.preferredWidth: 120 * 2 + 240
Layout.minimumHeight: 150
Layout.preferredHeight: 400
Layout.maximumHeight: 600
TableViewColumn {
role: "name"
title: qsTr("Name")
width: 120
}
TableViewColumn {
role: "type"
title: qsTr("Type")
width: 120
}
TableViewColumn {
role: "value"
title: qsTr("Value")
width: 240
}
rowDelegate: rowDelegate
itemDelegate: editableDelegate
}
}
}
RowLayout
{
anchors.bottom: parent.bottom
anchors.right: parent.right;
Button {
text: qsTr("OK");
onClicked: {
close();
accepted();
}
}
Button {
text: qsTr("Cancel");
onClicked: close();
}
}
ListModel {
id: paramsModel
}
Component {
id: rowDelegate
Item {
height: 100
}
}
Component {
id: editableDelegate
Item {
Loader {
id: loaderEditor
anchors.fill: parent
anchors.margins: 4
Connections {
target: loaderEditor.item
onTextChanged: {
if (styleData.role === "value" && styleData.row < paramsModel.count)
loaderEditor.updateValue(styleData.row, styleData.role, loaderEditor.item.text);
}
}
function updateValue(row, role, value)
{
paramsModel.setProperty(styleData.row, styleData.role, value);
}
sourceComponent:
{
if (styleData.role === "value")
{
if (paramsModel.get(styleData.row) === undefined)
return null;
if (paramsModel.get(styleData.row).type.indexOf("int") !== -1)
return intViewComp;
else if (paramsModel.get(styleData.row).type.indexOf("bool") !== -1)
return boolViewComp;
else if (paramsModel.get(styleData.row).type.indexOf("string") !== -1)
return stringViewComp;
else if (paramsModel.get(styleData.row).type.indexOf("hash") !== -1)
return hashViewComp;
}
else
return editor;
}
Component
{
id: intViewComp
QIntTypeView
{
id: intView
text: styleData.value
}
}
Component
ScrollView
{
Layout.fillWidth: true
visible: paramsModel.count > 0
ColumnLayout
{
id: boolViewComp
QBoolTypeView
id: paramRepeater
Layout.fillWidth: true
spacing: 10
Repeater
{
id: boolView
defaultValue: "1"
Component.onCompleted:
anchors.fill: parent
model: paramsModel
visible: paramsModel.count > 0
RowLayout
{
loaderEditor.updateValue(styleData.row, styleData.role,
(paramsModel.get(styleData.row).value === "" ? defaultValue :
paramsModel.get(styleData.row).value));
text = (paramsModel.get(styleData.row).value === "" ? defaultValue : paramsModel.get(styleData.row).value);
id: row
Layout.fillWidth: true
height: 150
Label {
id: typeLabel
text: type
font.family: regularFont.name
Layout.preferredWidth: 50
}
Label {
id: nameLabel
text: name
font.family: regularFont.name
Layout.preferredWidth: 50
}
Label {
id: equalLabel
text: "="
font.family: regularFont.name
Layout.preferredWidth: 15
}
Loader
{
id: typeLoader
Layout.preferredHeight: 50
Layout.preferredWidth: 150
function getCurrent()
{
return modalTransactionDialog.param(name);
}
Connections {
target: typeLoader.item
onTextChanged: {
typeLoader.getCurrent().value = typeLoader.item.text;
}
}
sourceComponent:
{
if (type.indexOf("int") !== -1)
return intViewComp;
else if (type.indexOf("bool") !== -1)
return boolViewComp;
else if (type.indexOf("string") !== -1)
return stringViewComp;
else if (type.indexOf("hash") !== -1)
return hashViewComp;
else
return null;
}
Component
{
id: intViewComp
QIntTypeView
{
height: 50
width: 150
id: intView
text: typeLoader.getCurrent().value
}
}
Component
{
id: boolViewComp
QBoolTypeView
{
height: 50
width: 150
id: boolView
defaultValue: "1"
Component.onCompleted:
{
var current = typeLoader.getCurrent().value;
(current === "" ? text = defaultValue : text = current);
}
}
}
Component
{
id: stringViewComp
QStringTypeView
{
height: 50
width: 150
id: stringView
text:
{
return typeLoader.getCurrent().value
}
}
}
Component
{
id: hashViewComp
QHashTypeView
{
height: 50
width: 150
id: hashView
text: typeLoader.getCurrent().value
}
}
}
}
}
}
}
}
Component
{
id: stringViewComp
QStringTypeView
{
id: stringView
text: styleData.value
}
}
Component
{
id: hashViewComp
QHashTypeView
{
id: hashView
text: styleData.value
}
}
Component {
id: editor
TextInput {
id: textinput
readOnly: true
color: styleData.textColor
text: styleData.value
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: textinput.forceActiveFocus()
}
}
RowLayout
{
anchors.bottom: parent.bottom
anchors.right: parent.right;
Button {
text: qsTr("OK");
onClicked: {
close();
accepted();
}
}
Button {
text: qsTr("Cancel");
onClicked: close();
}
}
}
ListModel {
id: paramsModel
}
}

1
mix/qml/qmldir

@ -1,3 +1,4 @@
singleton StateDialogStyle 1.0 StateDialogStyle.qml
singleton ProjectFilesStyle 1.0 ProjectFilesStyle.qml
singleton DebuggerPaneStyle 1.0 DebuggerPaneStyle.qml
singleton StateStyle 1.0 StateStyle.qml

4
mix/res.qrc

@ -81,6 +81,10 @@
<file>qml/img/closedtriangleindicator_filesproject.png</file>
<file>qml/img/opentriangleindicator_filesproject.png</file>
<file>qml/img/projecticon.png</file>
<file>qml/SourceSansProRegular.qml</file>
<file>qml/SourceSansProBold.qml</file>
<file>qml/SourceSansProLight.qml</file>
<file>qml/StateDialogStyle.qml</file>
<file>qml/ProjectFilesStyle.qml</file>
<file>qml/DebuggerPaneStyle.qml</file>
<file>qml/CodeEditorStyle.qml</file>

Loading…
Cancel
Save