Added the basic structure of ComicInfo view.

This commit is contained in:
Luis Ángel San Martín 2016-04-09 11:52:23 +02:00
parent 0b379dbd0b
commit 88f2d2a754
13 changed files with 351 additions and 2 deletions

View File

@ -12,5 +12,17 @@
<file>qml/info-shadow.png</file>
<file>qml/info-top-shadow.png</file>
<file>qml/ComicInfo.qml</file>
<file>qml/info-favorites.png</file>
<file>qml/info-favorites@2x.png</file>
<file>qml/info-rating.png</file>
<file>qml/info-rating@2x.png</file>
<file>qml/info-tag.png</file>
<file>qml/info-tag@2x.png</file>
<file>qml/info-tick.png</file>
<file>qml/info-tick@2x.png</file>
<file>qml/InfoTick.qml</file>
<file>qml/InfoFavorites.qml</file>
<file>qml/InfoRating.qml</file>
<file>qml/YACReaderScrollViewStyle.qml</file>
</qresource>
</RCC>

View File

@ -1,5 +1,291 @@
import QtQuick 2.0
import QtQuick 2.6
Item {
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
import QtGraphicalEffects 1.0
Rectangle {
color : "transparent"
id: mainContainer
height: info.height + 2 * topMargin
property string infoColor: "#b0b0b0"
property font infoFont: Qt.font({
family: "Arial",
pointSize: 10.5
});
property int topMargin : 27
property bool compact : width <= 650
RowLayout
{
id:main_layout
anchors.fill: parent
//READ------------------------------------------------------------
ColumnLayout
{
Layout.topMargin: topMargin
Layout.maximumWidth: 61
Layout.fillHeight: true
id: readStatus
Layout.alignment: Qt.AlignTop |
Qt.AlignHCenter
Rectangle {
color: "transparent"
width: 61
height: 24
InfoTick {
x: 27
y: 5
}
}
visible: !mainContainer.compact
}
//INFO------------------------------------------------------------
ColumnLayout
{
id: info
//width: parent.width
//Layout.fillWidth: true
Layout.alignment: Qt.AlignTop |
Qt.AlignLeft
Layout.maximumWidth: mainContainer.compact ? mainContainer.width : 960
Layout.leftMargin: mainContainer.compact ? 30 : 0
RowLayout
{
Layout.topMargin: topMargin
InfoTick {
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
}
Item {
Layout.fillWidth: true
}
InfoFavorites {
Layout.topMargin: 1
Layout.rightMargin: 17
Layout.alignment: Qt.AlignTop
}
InfoRating {
Layout.alignment: Qt.AlignTop
Layout.rightMargin: 30
}
visible: mainContainer.compact
}
RowLayout
{
Text {
Layout.topMargin: mainContainer.compact ? 18 : topMargin
Layout.fillWidth: true
Layout.rightMargin: mainContainer.compact ? 30 : 0
id: title
color: "#ffffff"
font.family: "Arial"
font.bold: true
font.pointSize: mainContainer.compact ? 14 : 15.75;
wrapMode: Text.WordWrap
text: "#1" + " - " + "A Single Dream Can Spark A Revolution"
}
RowLayout
{
visible: !mainContainer.compact
Layout.alignment: Qt.AlignTop
Layout.topMargin: topMargin
InfoFavorites {
Layout.topMargin: 1
Layout.rightMargin: 17
Layout.alignment: Qt.AlignTop
}
InfoRating {
Layout.alignment: Qt.AlignTop
Layout.rightMargin: 30
}
}
}
Flow {
spacing: 0
Layout.fillWidth: true
Text {
id: volume
color: infoColor
font: mainContainer.infoFont
text: "Clive Barker's Next Testament"
rightPadding: 20
}
Text {
id: numbering
color: infoColor
font: mainContainer.infoFont
text: "1/12"
rightPadding: 20
}
Text {
id: genre
color: infoColor
font: mainContainer.infoFont
text: "Terror"
rightPadding: 20
}
Text {
id: date
color: infoColor
font: mainContainer.infoFont
text: "21/03/2016"
rightPadding: 20
}
Text {
id: pages
color: infoColor
font: mainContainer.infoFont
text: "23 pages"
rightPadding: 20
}
Text {
id: showInComicVinw
color: "#ffcc00"
font: mainContainer.infoFont
text: "Show in Comic Vine"
onLinkActivated: Qt.openUrlExternally(link)
}
}
Text {
Layout.topMargin: 31
Layout.rightMargin: 30
Layout.fillWidth: true
id: sinopsis
color: "white"
font.family: "Arial"
font.pointSize: 11.75
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignJustify
text: "The first original comic series created and written by Clive Barker is here!Julian Edmond, captain of industry, has left behind everything to begin a walkabout -- he believes hes on a mission from God. While in the wasteland, he comes across a figure unlike any other, who calls himself Wick...and claims to be God. Their journey will span the globe, as neither man merely wants to make a mark on the world, but a scar.Clive Barker, with internationally acclaimed artist Haemi Jang (HELLRAISER: THE ROAD BELOW), come together to create the next legendary work in the canon of one of the great writers of our era. Ask your retailer about the ultra-limited edition signed Clive Barker variant cover, painted by the master of horror himself!"
}
Text {
Layout.topMargin: 20
Layout.bottomMargin: 5
id: authors_title
color: "white"
font.family: "Arial"
font.pointSize: 13.5
font.bold: true
text: "Authors"
}
Flow {
Layout.fillWidth: true
spacing: 20
Repeater {
id: authors
model: 50
Column{
Text {
color: "white"
font.family: "Arial"
font.pointSize: 11.25
text: "Author"
}
Text {
color: "#b0b0b0"
font.family: "Arial"
font.pointSize: 9.75
font.italic: true
text: "writer"
}
}
}
}
Text {
Layout.topMargin: 20
id: publisher_title
color: "white"
font.family: "Arial"
font.pointSize: 13.5
font.bold: true
text: "Publiser"
}
Text {
Layout.topMargin: 20
Layout.bottomMargin: 5
id: characters_title
color: "white"
font.family: "Arial"
font.pointSize: 13.5
font.bold: true
text: "Characters"
}
Flow {
Layout.fillWidth: true
spacing: 20
Repeater {
id: characters
model: 50
Text {
color: "white"
font.family: "Arial"
font.pointSize: 11.25
text: "character"
}
}
}
}
Item {
Layout.fillHeight: true
Layout.fillWidth: true
Layout.minimumWidth: 0
Layout.preferredWidth: 0
}
}
}

View File

@ -0,0 +1,15 @@
import QtQuick 2.6
import QtGraphicalEffects 1.0
Image {
id: favorites_button_compact
source: "info-favorites.png"
ColorOverlay {
anchors.fill: favorites_button_compact
source: favorites_button_compact
color: "#e84852"
}
}

View File

@ -0,0 +1,21 @@
import QtQuick 2.6
import QtGraphicalEffects 1.0
Row {
spacing: 6
Repeater {
id: rating_compact
model: 5
Image {
source: "info-rating.png"
ColorOverlay {
anchors.fill: rating_compact.itemAt(index)
source: rating_compact.itemAt(index)
color: index <= 3 ? "#ffffff" : "#1c1c1c"
}
}
}
}

View File

@ -0,0 +1,15 @@
import QtQuick 2.6
import QtGraphicalEffects 1.0
Image {
id: read_compact
source: "info-tick.png"
ColorOverlay {
anchors.fill: read_compact
source: read_compact
color: true ? "#e84852" : "#1c1c1c"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 371 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 615 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 322 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 551 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 289 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 459 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 367 B