QML/FileSelector

Latest revision as of 09:52, 27 July 2011

This is a simple file selector i wrote for cacheme.

Video

An alternative selector is described here.

import QtQuick 1.0
import com.meego 1.0
import Qt.labs.folderlistmodel 1.0

Dialog {
  id: fileSelector
  property Style platformStyle: SelectionDialogStyle {}

  property variant filterList: [ "*" ]

  property string titleText: "File Selector"
  property variant folderModel: folderModel1
  property variant view: view1
  property string selectedFile: "";

  // go down one view
  function down(path) {
    // slide current view out to the left
    if (folderModel == folderModel1) {
      view = view2
      folderModel = folderModel2;
      view1.state = "exitLeft";
    } else {
      view = view1
      folderModel = folderModel1;
      view2.state = "exitLeft";
    }

    // and slide new view in from right
    view.x = fileSelector.width;
    view.state = "current";
    view.focus = true;
    folderModel.folder = path;
  }

  function up() {
    selectedFile = folderModel.folder;

    var path = folderModel.parentFolder;
    if (folderModel == folderModel1) {
      view = view2
      folderModel = folderModel2;
      view1.state = "exitRight";
    } else {
      view = view1
      folderModel = folderModel1;
      view2.state = "exitRight";
    }
    view.x = -fileSelector.width;
    view.state = "current";
    view.focus = true;
    folderModel.folder = path;
  }


  property Component delegate:
  Component {
    id: defaultDelegate

    Item {
      id: delegateItem
      property bool selected: filePath == selectedFile;

      height: fileSelector.platformStyle.itemHeight
      anchors.left: parent.left
      anchors.right: parent.right

      MouseArea {
        id: delegateMouseArea
        anchors.fill: parent;
        onPressed: selectedFile = filePath;
        onClicked:  {
          if (folderModel.isFolder(index)) 
             down(filePath);
          else
             accept();
        }
      }

      Rectangle {
        id: backgroundRect
        anchors.fill: parent
        color: delegateItem.selected ? fileSelector.platformStyle.itemSelectedBackgroundColor : fileSelector.platformStyle.itemBackgroundColor
      }

      BorderImage {
        id: background
        anchors.fill: parent
        border { left: 22; top: 2; right: 2; bottom: 22 }
        source: delegateMouseArea.pressed ? fileSelector.platformStyle.itemPressedBackground :
        delegateItem.selected ? fileSelector.platformStyle.itemSelectedBackground :
                fileSelector.platformStyle.itemBackground
      }

      Text {
        id: itemText
        elide: Text.ElideRight
        color: delegateItem.selected ? fileSelector.platformStyle.itemSelectedTextColor : fileSelector.platformStyle.itemTextColor
        anchors.verticalCenter: delegateItem.verticalCenter
        anchors.left: parent.left
        anchors.right: folderModel.isFolder(index)?downArrow.left:parent.right
        anchors.leftMargin: fileSelector.platformStyle.itemLeftMargin
        anchors.rightMargin: fileSelector.platformStyle.itemRightMargin
        text: fileName;
        font: fileSelector.platformStyle.itemFont
      }

      // add "right" arrow to all directories
      Image {
        id: downArrow
        source: "image://theme/icon-m-common-drilldown-arrow-inverse"
        anchors.right: parent.right;
        anchors.verticalCenter: parent.verticalCenter
        visible: folderModel.isFolder(index)
      }
    }
  }


  title: Item {
    id: header
    height: fileSelector.platformStyle.titleBarHeight

    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.bottom: parent.bottom

    Item {
      id: labelField

      anchors.fill:  parent

      Item {
        id: labelWrapper
        anchors.left: parent.left
        anchors.right: closeButton.left

        anchors.bottom:  parent.bottom
        anchors.bottomMargin: fileSelector.platformStyle.titleBarLineMargin

        height: titleLabel.height

        Label {
          id: titleLabel
          x: fileSelector.platformStyle.titleBarIndent
          width: parent.width - closeButton.width
          font: fileSelector.platformStyle.titleBarFont
          color: fileSelector.platformStyle.commonLabelColor
          elide: fileSelector.platformStyle.titleElideMode
          text: fileSelector.titleText
        }
      }

      Image {
        id: closeButton
        anchors.bottom:  parent.bottom
        anchors.bottomMargin: fileSelector.platformStyle.titleBarLineMargin-6
        anchors.right: labelField.right

        opacity: closeButtonArea.pressed ? 0.5 : 1.0
        source: "image://theme/icon-m-common-dialog-close"

        MouseArea {
          id: closeButtonArea
          anchors.fill: parent
          onClicked:  {fileSelector.reject();}
        }
      }
    }


    Rectangle {
      id: headerLine

      anchors.left: parent.left
      anchors.right: parent.right

      anchors.bottom:  header.bottom

      height: 1

      color: "#4D4D4D"
    }
  }

  content: Item {
    id: contentField

    property int maxListViewHeight : visualParent ? visualParent.height * 0.87
        - fileSelector.platformStyle.titleBarHeight 
        - fileSelector.platformStyle.contentSpacing - 50
       : fileSelector.parent ? fileSelector.parent.height * 0.87
        - fileSelector.platformStyle.titleBarHeight 
        - fileSelector.platformStyle.contentSpacing - 50
     : 350

    height: maxListViewHeight
    width: fileSelector.width
    y : fileSelector.platformStyle.contentSpacing
    clip: true

    // we have two list views and are shifting them left and right
    // for nice animation

    Item {
      id: pathItem
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.top:  parent.top
      height: fileSelector.platformStyle.itemHeight  

      property bool canGoUp: folderModel.parentFolder != "" && folderModel.folder != folderModel.parentFolder

      enabled: canGoUp
      MouseArea {
        id: backArea
        anchors.fill: parent
        onClicked:  { up(); }
      }

      // add "left" arrow to go up one directory
      Image {
        id: backButton
        source: "image://theme/icon-m-startup-back"
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        opacity: parent.canGoUp?(backArea.pressed ? 0.5 : 1.0):0.4
      }

     Label {
        id: pathLabel
        font: fileSelector.platformStyle.itemFont
        color: fileSelector.platformStyle.itemTextColor
        elide: Text.ElideLeft

        text: folderModel.folder

        anchors.verticalCenter: parent.verticalCenter
        anchors.left: backButton.right
        anchors.right: parent.right

        anchors.leftMargin: fileSelector.platformStyle.itemLeftMargin
        anchors.rightMargin: fileSelector.platformStyle.itemRightMargin
      }
    
      Rectangle {
        id: pathLine

        anchors.left: parent.left
        anchors.right: parent.right

        anchors.bottom:  parent.bottom

        height: 1

        color: "#4D4D4D"
      }
    }

    Item {
      clip: true
      focus: true

      anchors.top: pathItem.bottom
      anchors.bottom: parent.bottom
      width: parent.width

      ListView {
        id: view1
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        x: 0
        width: parent.width
        pressDelay: fileSelector.platformStyle.pressDelay

        FolderListModel {
          id: folderModel1
          nameFilters: filterList
        }

        model: folderModel1
        delegate: defaultDelegate

        states: [
          State {
            name: "current"
            PropertyChanges { target: view1; x: 0 }
          },
          State {
            name: "exitLeft"
            PropertyChanges { target: view1; x: -parent.width }
          },
          State {
            name: "exitRight"
            PropertyChanges { target: view1; x: parent.width }
          }
        ]
        transitions: [
          Transition {
            NumberAnimation { properties: "x"; duration: 250 }
          }
        ]
      }

      ListView {
        id: view2
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        x: parent.width
        width: parent.width
        pressDelay: fileSelector.platformStyle.pressDelay

        FolderListModel {
          id: folderModel2
          nameFilters: filterList
        }

        model: folderModel2
        delegate: defaultDelegate

        states: [
          State {
            name: "current"
            PropertyChanges { target: view2; x: 0 }
          },
          State {
            name: "exitLeft"
            PropertyChanges { target: view2; x: -parent.width }
          },
          State {
            name: "exitRight"
            PropertyChanges { target: view2; x: parent.width }
          }
        ]
        transitions: [
          Transition {
            NumberAnimation { properties: "x"; duration: 250 }
          }
        ]
      }
    }
  }
}