alecs/plasma-framework
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

beginning of official style for TextArea

Browse Source 
for now it copies ScrollViewStyle.. the style will have to be an import as well
This commit is contained in:
Marco Martin 2014-08-13 18:41:57 +02:00
parent 0ada27caa7
commit 76d24e8fe2
3 changed files with 251 additions and 371 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

378
src/declarativeimports/plasmacomponents/qml/TextArea.qml
View File

@ -18,31 +18,16 @@
*/
import QtQuick 2.1
import QtQuick.Controls 1.2 as QtControls
import org.kde.plasma.core 2.0 as PlasmaCore
import "private" as Private
import "styles" as Styles
/**
* A plasma theme based text area.
*/
Item {
QtControls.TextArea {
id: textArea
// Common API
/**
* type:font
* Font used in the text field.
*
* The default font value is the font from plasma desktop theme.
*/
property alias font: textEdit.font
/**
* The currently supported input method hints for the text field.
*
* The default values is Qt.ImhNone.
*/
property int inputMethodHints
/**
* Whether the text field is highlighted or not.
*
@ -52,132 +37,6 @@ Item {
*/
property bool errorHighlight
/**
* type:bool
* Displays widget background
*
* The default value is true.
*/
property alias backgroundVisible: base.visible
/**
* type:int
* Current cursor position.
*/
property alias cursorPosition: textEdit.cursorPosition
/**
* type:enum
* Sets the horizontal alignment of the text within the TextArea item's
* width and height.
*
* By default, the text alignment follows the natural alignment of the
* text, for example text that is read from left to right will be aligned
* to the left.
*
* Valid values:
*
* - TextEdit.AlignLeft (default)
* - TextEdit.AlignRight
* - TextEdit.AlignHCenter
* - TextEdit.AlignJustify
*/
property alias horizontalAlignment: textEdit.horizontalAlignment
/**
* type:enum
* Sets the vertical alignment of the text within the TextArea item's width
* and height.
*
* Valid values:
*
* - TextEdit.AlignTop (default)
* - TextEdit.AlignBottom
* - TextEdit.AlignVCenter
*/
property alias verticalAlignment: textEdit.verticalAlignment
/**
* type:bool
* Whether the TextArea is in read-only mode, and cannot be modified by the
* user.
*
* The default value is false.
*/
property alias readOnly: textEdit.readOnly
/**
* type:string
* The text selected by the user. If no text is selected it holds an empty
* string.
*
* This property is read-only.
*/
property alias selectedText: textEdit.selectedText
/**
* type:int
* The cursor position after the last character in the current selection.
*
* This property is read-only.
*/
property alias selectionEnd: textEdit.selectionEnd
/**
* type:int
* The cursor position before the first character in the current selection.
*
* This property is read-only.
*/
property alias selectionStart: textEdit.selectionStart
/**
* type:string
* The text in the TextArea.
*/
property alias text: textEdit.text
/**
* type:enum
* The way the text property should be displayed.
*
* Valid values:
*
* - TextEdit.AutoText
* - TextEdit.PlainText
* - TextEdit.RichText
* - TextEdit.StyledText
*
* The default is TextEdit.AutoText. If the text format is
* TextEdit.AutoText the text edit will automatically determine whether the
* text should be treated as rich text. This determination is made using
* Qt::mightBeRichText().
*/
property alias textFormat: textEdit.textFormat
/**
* type:enum
* Set this property to wrap the text to the TextArea item's width. The
* text will only wrap if an explicit width has been set.
*
* Valid values:
*
* - TextEdit.NoWrap: no wrapping will be performed. If the text contains
* insufficient newlines, then implicitWidth will exceed a set width.
* - TextEdit.WordWrap: wrapping is done on word boundaries only. If a
* word is too long, implicitWidth will exceed a set width.
* - TextEdit.WrapAnywhere: wrapping is done at any point on a line, even
* if it occurs in the middle of a word.
* - TextEdit.Wrap: if possible, wrapping occurs at a word boundary;
* otherwise it will occur at the appropriate point on the line, even in
* the middle of a word.
*
* The default is TextEdit.NoWrap. If you set a width, consider using
* TextEdit.Wrap.
*/
property alias wrapMode: textEdit.wrapMode
/**
* The text displayed when the text property is empty.
*
@ -185,90 +44,6 @@ Item {
*/
property string placeholderText
activeFocusOnTab: true
// functions
/**
* Copies the currently selected text to the system clipboard.
*/
function copy() {
textEdit.copy();
}
/**
* Replaces the currently selected text by the contents of the system
* clipboard.
*/
function paste() {
textEdit.paste();
}
/**
* Moves the currently selected text to the system clipboard.
*/
function cut() {
textEdit.cut();
}
/**
* Causes the text from start to end to be selected.
*
* If either start or end is out of range, the selection is not changed.
* After calling this, selectionStart will become the lesser and
* selectionEnd will become the greater (regardless of the order passed to
* this method).
*
* @param int start Start of selection
* @param int end End of selection
*/
function select(start, end) {
textEdit.select(start, end);
}
/**
* Causes all text to be selected.
*/
function selectAll() {
textEdit.selectAll();
}
/**
* Causes the word closest to the current cursor position to be selected.
*/
function selectWord() {
textEdit.selectWord();
}
/**
* This function returns the character position at x pixels from the left
* of the TextArea.
*
* Position 0 is before the first character, position 1 is after the first
* character but before the second, and so on until position text.length,
* which is after all characters. This means that for all x values before
* the first character this function returns 0, and for all x values after
* the last character this function returns text.length.
*
* @param int pos x-coordinate we are interested in.
* @return int the character position
*/
// Does this work at all? doc for TextEdit says positionAt() accepts two
// ints: x and y
function positionAt(pos) {
return textEdit.positionAt(pos);
}
/**
* Returns the rectangle at the given position in the text.
*
* The x, y, and height properties correspond to the cursor that would
* describe that position.
*
* @param int pos the text position
* @param type:rectangle the cursor rectangle
*/
function positionToRectangle(pos) {
return textEdit.positionToRectangle(pos);
}
// Plasma API
/**
@ -278,25 +53,19 @@ Item {
* interactive. This property is useful for temporarily disabling
* flicking.
*/
property alias interactive: flickArea.interactive
property bool interactive
/**
* type:int
* Maximum width that the text content can have.
*/
property alias contentMaxWidth: textEdit.width
property int contentMaxWidth
/**
* type:int
* Maximum height that the text content can have.
*/
property alias contentMaxHeight: textEdit.height
// Set active focus to it's internal textInput.
// Overriding QtQuick.Item forceActiveFocus function.
function forceActiveFocus() {
textEdit.forceActiveFocus();
}
property int contentMaxHeight
// Overriding QtQuick.Item activeFocus property.
//property alias activeFocus: textEdit.activeFocus
@ -305,139 +74,14 @@ Item {
opacity: enabled ? 1.0 : 0.5
Private.TextFieldFocus {
id: hover
state: textArea.activeFocus ? "focus" : (mouseWatcher.containsMouse ? "hover" : "hidden")
anchors.fill: base
}
MouseArea {
id: mouseWatcher
anchors.fill: hover
hoverEnabled: true
}
PlasmaCore.FrameSvgItem {
id: base
// TODO: see what is the best policy for margins
anchors {
fill: parent
}
imagePath: "widgets/lineedit"
prefix: "base"
property real internalPadding: theme.mSize(theme.defaultFont).height*0.3
}
Flickable {
id: flickArea
anchors {
fill: parent
leftMargin: 2 * base.margins.left
rightMargin: 2 * base.margins.right + (verticalScroll.visible ? verticalScroll.width : 0)
topMargin: 2 * base.margins.top
bottomMargin: 2 * base.margins.bottom + (horizontalScroll.visible ? verticalScroll.width : 0)
}
interactive: !verticalScroll.interactive //textArea.activeFocus
contentWidth: {
if (textEdit.wrapMode == TextEdit.NoWrap)
return textEdit.paintedWidth;
return Math.min(textEdit.paintedWidth, textEdit.width);
}
contentHeight: Math.min(textEdit.paintedHeight, textEdit.height)
clip: true
TextEdit {
id: textEdit
width: flickArea.width
height: flickArea.height
clip: true
wrapMode: TextEdit.Wrap
enabled: textArea.enabled
font.capitalization: theme.defaultFont.capitalization
font.family: theme.defaultFont.family
font.italic: theme.defaultFont.italic
font.letterSpacing: theme.defaultFont.letterSpacing
font.pointSize: theme.defaultFont.pointSize
font.strikeout: theme.defaultFont.strikeout
font.underline: theme.defaultFont.underline
font.weight: theme.defaultFont.weight
font.wordSpacing: theme.defaultFont.wordSpacing
color: theme.viewTextColor
selectedTextColor: theme.viewBackgroundColor
selectionColor: theme.viewFocusColor
selectByMouse: verticalScroll.interactive
renderType: Text.NativeRendering
onCursorPositionChanged: {
if (cursorRectangle.x < flickArea.contentX) {
flickArea.contentX = cursorRectangle.x;
return;
}
if (cursorRectangle.x > flickArea.contentX +
flickArea.width - cursorRectangle.width) {
flickArea.contentX = cursorRectangle.x -
cursorRectangle.width;
return;
}
if (cursorRectangle.y < flickArea.contentY) {
flickArea.contentY = cursorRectangle.y;
return;
}
if (cursorRectangle.y > flickArea.contentY +
flickArea.height - cursorRectangle.height) {
flickArea.contentY = cursorRectangle.y -
cursorRectangle.height;
return;
}
}
// Proxying keys events is not required by the
// common API but is desired in the plasma API.
Keys.onPressed: textArea.Keys.pressed(event);
Keys.onReleased: textArea.Keys.released(event);
Text {
anchors.fill: parent
Label {
anchors.centerIn: parent
width: Math.min(implicitWidth, parent.width)
text: textArea.placeholderText
visible: textEdit.text == "" && !textArea.activeFocus
visible: textArea.text == "" && !textArea.activeFocus
color: theme.viewTextColor
opacity: 0.5
}
}
}
ScrollBar {
id: horizontalScroll
anchors {
bottom: parent.bottom
left: parent.left
right: flickArea.right
}
enabled: parent.enabled
flickableItem: flickArea
orientation: Qt.Horizontal
stepSize: textEdit.font.pixelSize
}
ScrollBar {
id: verticalScroll
anchors {
right: parent.right
top: parent.top
bottom: flickArea.bottom
}
enabled: parent.enabled
flickableItem: flickArea
orientation: Qt.Vertical
stepSize: textEdit.font.pixelSize
}
Accessible.role: Accessible.EditableText
Accessible.readOnly: readOnly
style: Styles.TextAreaStyle {}
}

189
src/declarativeimports/plasmacomponents/qml/styles/ScrollViewStyle.qml Normal file
View File

@ -0,0 +1,189 @@
/*
* Copyright 2012 Marco Martin <mart@kde.org>
* Copyright (C) 2014 by David Edmundson <davidedmundson@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 2.010-1301, USA.
*/
import QtQuick 2.0
import QtQuick.Controls.Styles 1.1 as QtQuickControlStyle
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
QtQuickControlStyle.ScrollViewStyle {
property Flickable flickableItem: control.flickableItem
property real widthHint: scrollbarSvg.hasElement("hint-scrollbar-size") ? scrollbarSvg.elementSize("hint-scrollbar-size").width : scrollbarSvg.elementSize("arrow-up").width
frame: Item {
PlasmaCore.Svg {
id: borderSvg
imagePath: "widgets/scrollwidget"
}
PlasmaCore.FrameSvgItem {
id: base
anchors.fill: parent
visible: control.backgroundVisible
imagePath: "widgets/lineedit"
prefix: "base"
}
PlasmaCore.SvgItem {
svg: borderSvg
z: 1000
elementId: "border-top"
width: 100
height: naturalSize.height
opacity: flickableItem.atYBeginning ? 0 : 1
Behavior on opacity {
NumberAnimation {
duration: units.longDuration
easing.type: Easing.InOutQuad
}
}
anchors {
left: parent.left
top: parent.top
right: parent.right
topMargin: flickableItem.anchors.topMargin
}
}
PlasmaCore.SvgItem {
svg: borderSvg
z: 1000
elementId: "border-bottom"
width: 100
height: naturalSize.height
opacity: flickableItem.atYEnd ? 0 : 1
Behavior on opacity {
NumberAnimation {
duration: units.longDuration
easing.type: Easing.InOutQuad
}
}
anchors {
left: parent.left
bottom: parent.bottom
right: parent.right
bottomMargin: flickableItem.anchors.bottomMargin
}
}
PlasmaCore.SvgItem {
svg: borderSvg
z: 1000
elementId: "border-left"
width: naturalSize.width
opacity: flickableItem.atXBeginning ? 0 : 1
Behavior on opacity {
NumberAnimation {
duration: units.longDuration
easing.type: Easing.InOutQuad
}
}
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
leftMargin: flickableItem.anchors.leftMargin
}
}
PlasmaCore.SvgItem {
svg: borderSvg
z: 1000
elementId: "border-right"
width: naturalSize.width
opacity: flickableItem.atXEnd ? 0 : 1
Behavior on opacity {
NumberAnimation {
duration: units.longDuration
easing.type: Easing.InOutQuad
}
}
anchors {
top: parent.top
bottom: parent.bottom
right: parent.right
rightMargin: flickableItem.anchors.rightMargin
}
}
}
scrollBarBackground: PlasmaCore.FrameSvgItem {
imagePath:"widgets/scrollbar"
prefix: styleData.horizontal ? "background-horizontal" : "background-vertical"
implicitWidth: widthHint
}
handle: PlasmaCore.FrameSvgItem {
imagePath:"widgets/scrollbar"
implicitWidth: widthHint
implicitHeight: widthHint
prefix: {
if (styleData.hovered) {
return "sunken-slider"
}
if (styleData.pressed) {
return "mouseover-slider"
} else {
return "slider"
}
}
}
incrementControl: PlasmaCore.SvgItem {
svg: scrollbarSvg
visible: scrollbarSvg.arrowPresent
//if there is no arrow we don't want to waste space, a tiny margin does look better though
implicitWidth: scrollbarSvg.arrowPresent ? widthHint : units.smallSpacing
implicitHeight: scrollbarSvg.arrowPresent ? widthHint : units.smallSpacing
elementId: {
if (styleData.pressed) {
return styleData.horizontal ? "sunken-arrow-right" : "sunken-arrow-down"
}
if (styleData.hovered) {
return styleData.horizontal ? "mouseover-arrow-right" : "mouseover-arrow-down"
} else {
return styleData.horizontal ? "arrow-right" : "arrow-down"
}
}
}
decrementControl: PlasmaCore.SvgItem {
svg: scrollbarSvg
visible: scrollbarSvg.arrowPresent
implicitWidth: scrollbarSvg.arrowPresent ? widthHint : units.smallSpacing
implicitHeight: scrollbarSvg.arrowPresent ? widthHint : units.smallSpacing
elementId: {
if (styleData.pressed) {
return styleData.horizontal ? "sunken-arrow-left" : "sunken-arrow-up"
}
if (styleData.hovered) {
return styleData.horizontal ? "mouseover-arrow-left" : "mouseover-arrow-up"
} else {
return styleData.horizontal ? "arrow-left" : "arrow-up"
}
}
}
PlasmaCore.Svg {
id: scrollbarSvg
imagePath: "widgets/scrollbar"
property bool arrowPresent: scrollbarSvg.hasElement("arrow-up")
//new theme may be different
onRepaintNeeded: arrowPresent = scrollbarSvg.hasElement("arrow-up")
}
}

47
src/declarativeimports/plasmacomponents/qml/styles/TextAreaStyle.qml Normal file
View File

@ -0,0 +1,47 @@
/*
* Copyright (C) 2014 by Marco MArtin <mart@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
* published by the Free Software Foundation; either version 2, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Library General Public License for more details
*
* You should have received a copy of the GNU Library General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 2.010-1301, USA.
*/
import QtQuick 2.1
import QtQuick.Controls.Styles 1.1 as QtQuickControlStyle
import QtQuick.Controls 1.1
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
import "../private" as Private
ScrollViewStyle {
id: style
readonly property TextArea control: __control
property font font: theme.defaultFont
property color backgroundColor: "transparent"
property color textColor: theme.viewTextColor
property color selectionColor: theme.viewFocusColor
property color selectedTextColor: theme.viewBackgroundColor
property int renderType: Text.NativeRendering
property real textMargin: 4
property Component cursorHandle
property Component selectionHandle
}