Commit bb79b3de authored by Mathieu's avatar Mathieu
Browse files

New implementation for add file and upload

parent 014d33bd
Pipeline #1248 failed with stage
in 8 minutes and 1 second
......@@ -4,9 +4,11 @@ import scaladget.tools._
import org.openmole.gui.ext.data._
import org.scalajs.dom.raw.HTMLElement
import com.raquo.laminar.api.L._
import org.openmole.gui.ext.client
import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue
import scala.concurrent.Future
import scala.util.{ Success, Failure }
import scala.util.{ Failure, Success }
/*
* Copyright (C) 22/12/15 // mathieu.leclaire@openmole.org
......@@ -44,6 +46,7 @@ class ProcessStateWaiter(processingState: Var[ProcessState]) {
child <-- processingState.signal.map { pState
val ratio = pState.ratio
val waiterSpan = div(
client.flexColumn, alignItems.center,
waiter,
if (ratio == 0 || ratio == 100) span()
else span(cls := "spinner-wave-ratio", ratio + " %")
......
......@@ -79,7 +79,6 @@ class FileToolBar(treeNodePanel: TreeNodePanel) {
def manager = treeNodePanel.treeNodeManager
val selectedTool: Var[Option[SelectedTool]] = Var(None)
val transferring: Var[ProcessState] = Var(Processed())
val fileFilter = Var(FileFilter.defaultFilter)
val message = Var[Div](div())
val fileNumberThreshold = 1000
......@@ -118,41 +117,6 @@ class FileToolBar(treeNodePanel: TreeNodePanel) {
// todo(isSelectedTool)
})
def fInputMultiple(todo: Input Unit) =
inputTag().amend(cls := "upload", `type` := "file", multiple := true,
inContext { thisNode
onChange --> { _
todo(thisNode)
}
}
)
//Upload tool
def upbtn(todo: Input Unit): HtmlElement =
span(aria.hidden := true, glyph_upload, "fileUpload glyphmenu",
fInputMultiple(todo)
)
private val upButton = upbtn((fileInput: Input) {
FileManager.upload(fileInput, manager.current.now, (p: ProcessState) transferring.set(p), UploadProject(), () treeNodePanel.invalidCacheAndDraw)
})
// New file tool
val newNodeInput = inputTag().amend(
placeholder := "File name",
width := "130px",
left := "-2px",
onMountFocus
)
lazy val addRootDirButton = {
val folder = ToggleState("Folder", btn_primary_string, () {})
val file = ToggleState("File", btn_secondary_string, () {})
toggle(folder, true, file, () {})
}
// Filter tool
val thresholdTag = "threshold"
val nameTag = "names"
......@@ -208,22 +172,6 @@ class FileToolBar(treeNodePanel: TreeNodePanel) {
form(nameInput, onSubmit.preventDefault --> { _ filterSubmit })
)
def createNewNode = {
val newFile = newNodeInput.ref.value
val currentDirNode = manager.current
addRootDirButton.toggled.now match {
case true CoreUtils.addDirectory(currentDirNode.now, newFile, () unselectToolAndRefreshTree)
case false CoreUtils.addFile(currentDirNode.now, newFile, () unselectToolAndRefreshTree)
}
}
val createFileTool = div(
addRootDirButton.element,
form(newNodeInput, onSubmit.preventDefault --> { _
createNewNode
})
)
def unselectToolAndRefreshTree: Unit = {
unselectTool
treeNodePanel.invalidCacheAndDraw
......@@ -234,7 +182,7 @@ class FileToolBar(treeNodePanel: TreeNodePanel) {
def unselectTool = {
clearMessage
manager.clearSelection
newNodeInput.ref.value = ""
// newNodeInput.ref.value = ""
treeNodePanel.treeWarning.set(true)
treeNodePanel.turnSelectionTo(false)
selectedTool.set(None)
......@@ -391,7 +339,7 @@ class FileToolBar(treeNodePanel: TreeNodePanel) {
cls := "file-content",
div(
centerElement,
buildAndSelectSpan(FileCreationTool, "File or folder creation"),
// buildAndSelectSpan(FileCreationTool, "File or folder creation"),
buildAndSelectSpan(CopyTool, "Copy selected files"),
buildAndSelectSpan(TrashTool, "Delete selected files"),
buildAndSelectSpan(PluginTool, "Detect plugins that can be enabled in this folder"),
......@@ -400,7 +348,7 @@ class FileToolBar(treeNodePanel: TreeNodePanel) {
buildSpan(RefreshTool, "Refresh the current folder", () {
treeNodePanel.invalidCacheAndDraw
})),
upButton.tooltip("Upload a file")
// upButton.tooltip("Upload a file")
),
child <-- message.signal.combineWith(selectedTool.signal).map {
case (msg, sT)
......@@ -408,7 +356,7 @@ class FileToolBar(treeNodePanel: TreeNodePanel) {
centerFileToolBar,
msg,
sT match {
case Some(FileCreationTool) createFileTool
// case Some(FileCreationTool) ⇒ createFileTool
case Some(TrashTool) getIfSelected(deleteButton)
case Some(PluginTool) getIfSelected(pluginButton)
case Some(CopyTool)
......@@ -416,10 +364,6 @@ class FileToolBar(treeNodePanel: TreeNodePanel) {
getIfSelected(copyButton)
case _ div()
},
transferring.withTransferWaiter {
_
div()
}
)
}
)
......
......@@ -166,12 +166,12 @@ class FileToolBox(initSafePath: SafePath, showExecution: () ⇒ Unit, treeNodeTa
case (None, None)
div(
fileActions,
iconAction(glyphItemize(OMTags.glyph_arrow_left_right), "duplicate", () duplicate),
iconAction(glyphItemize(glyph_edit), "rename", () actionEdit.set(Some(editForm(initSafePath)))),
iconAction(glyphItemize(glyph_download), "download", () download),
iconAction(glyphItemize(glyph_trash), "delete", () actionConfirmation.set(Some(confirmation(s"Delete ${
initSafePath.name
} ?", () trash)))),
iconAction(glyphItemize(OMTags.glyph_arrow_left_right), "duplicate", () duplicate),
iconAction(glyphItemize(glyph_edit), "edit", () actionEdit.set(Some(editForm(initSafePath)))),
FileExtension(initSafePath.name) match {
case FileExtension.TGZ | FileExtension.TAR | FileExtension.ZIP | FileExtension.TXZ
iconAction(glyphItemize(OMTags.glyph_extract), "extract", () extract)
......
......@@ -58,21 +58,84 @@ class TreeNodePanel(val treeNodeManager: TreeNodeManager, fileDisplayer: FileDis
onMountFocus
)
// New file tool
val newNodeInput = inputTag().amend(
placeholder := "File name",
width := "130px",
marginLeft := "10px",
onMountFocus
)
lazy val addRootDirButton = {
val folder = ToggleState("Folder", btn_primary_string, () {})
val file = ToggleState("File", btn_secondary_string, () {})
toggle(folder, true, file, () {})
}
def createNewNode = {
val newFile = newNodeInput.ref.value
val currentDirNode = treeNodeManager.current
addRootDirButton.toggled.now match {
case true CoreUtils.addDirectory(currentDirNode.now, newFile, () invalidCacheAndDraw)
case false CoreUtils.addFile(currentDirNode.now, newFile, () invalidCacheAndDraw)
}
}
//Upload tool
val transferring: Var[ProcessState] = Var(Processed())
def fInputMultiple(todo: Input Unit) =
inputTag().amend(cls := "upload", `type` := "file", multiple := true,
inContext { thisNode
onChange --> { _
todo(thisNode)
}
}
)
def upbtn(todo: Input Unit): HtmlElement =
span(aria.hidden := true, glyph_upload, cls := "fileUpload glyphmenu", margin := "10 0 10 160",
fInputMultiple(todo)
)
private val upButton = upbtn((fileInput: Input) {
FileManager.upload(fileInput, treeNodeManager.current.now, (p: ProcessState) transferring.set(p), UploadProject(), () invalidCacheAndDraw)
})
lazy val createFileTool =
form(flexRow, alignItems.center, height := "65px", color.white, margin := "0 10 0 10",
addRootDirButton.element,
newNodeInput.amend(marginLeft := "10px"),
upButton.amend(justifyContent.flexEnd).tooltip("Upload a file"),
transferring.withTransferWaiter {
_
div()
}.amend(marginLeft := "10px"),
onSubmit.preventDefault --> { _
createNewNode
newNodeInput.ref.value = ""
plusFile.set(false)
})
val plusFile = Var(false)
lazy val fileControler =
div(
cls := "file-content tree-path",
child <-- treeNodeManager.current.signal.map { curr
val parent = curr.parent
val grandParent = parent.parent
div(
goToDirButton(treeNodeManager.root).amend(OMTags.glyph_house),
Seq(grandParent.parent, grandParent, parent, curr).filterNot { sp
cls := "file-content tree-path",
goToDirButton(treeNodeManager.root).amend(OMTags.glyph_house, padding := "5"),
Seq(parent.parent, parent, curr).filterNot { sp
sp.isEmpty || sp == treeNodeManager.root
}.map { sp
goToDirButton(sp, s" / ${sp.name}")
}
goToDirButton(sp, s" ${sp.name} / ")
},
div(glyph_plus, cls := "plus-button", onClick --> { _ plusFile.update(!_) })
)
},
plusFile.signal.expand(createFileTool),
treeNodeManager.error --> treeNodeManager.errorObserver,
treeNodeManager.comment --> treeNodeManager.commentObserver
)
......@@ -157,7 +220,7 @@ class TreeNodePanel(val treeNodeManager: TreeNodeManager, fileDisplayer: FileDis
FileManager.download(
safePath,
(p: ProcessState) {
fileToolBar.transferring.set(p)
transferring.set(p)
},
hash = hash,
onLoaded = onLoaded
......@@ -360,6 +423,7 @@ class TreeNodePanel(val treeNodeManager: TreeNodeManager, fileDisplayer: FileDis
def fileClick =
onClick --> { e
plusFile.set(false)
if (!selectionMode.now) {
todo()
}
......@@ -368,7 +432,7 @@ class TreeNodePanel(val treeNodeManager: TreeNodeManager, fileDisplayer: FileDis
val render: HtmlElement = {
// val settingsGlyph = Seq(cls := "glyphitem", glyph_settings, color := WHITE, paddingLeft := "4")
div(display.flex, flexDirection.column,
div(display.flex, alignItems.center, margin := "5",
div(display.flex, alignItems.center, lineHeight := "27px",
// child <-- selectionMode.signal.combineWith(treeStates.signal, fileToolBar.selectedTool.signal, treeNodeManager.pluggables.signal).map {
// case (sM, tS, sTools, pluggables) ⇒
// onClick --> { e ⇒ {
......
......@@ -91,6 +91,8 @@ package object client {
lazy val navBarItem = cls := "navbar-item"
lazy val toolBoxColor = "#795c85"
lazy val centerElement = Seq(
display := "flex",
justifyContent := "center",
......
......@@ -79,10 +79,11 @@ ul{
cursor: pointer;
font-weight: bold;
height: 5px;
line-height: 25px;
}
.treePathItems:hover{
color: #222;
color: #3086b5;
}
.tree {
......@@ -248,16 +249,11 @@ li.selectElement{
.glyphmenu:hover {
opacity: 1;
transform: scale(1.6);
transform: scale(1.4);
color: #3086b5;
}
.glyphitem {
top: 0;
display: inline-block;
float: right;
opacity: 0.6;
padding-right: 5px;
cursor: pointer;
transition: transform 0.1s ease-out 0s;
font-size: 15px;
......@@ -265,7 +261,6 @@ li.selectElement{
}
.glyphitem:hover {
opacity: 1;
transform: scale(1.2);
}
......@@ -310,12 +305,11 @@ li.selectElement{
/* WAITER */
.spinner-wave {
height: 30px;
margin: 0 auto;
text-align: center;
width: 50px;
display: inline-block;
vertical-align: middle;
height: 30px;
margin: 0 auto;
width: 50px;
display: flex;
flex-direction: row;
}
.spinner-wave > div {
......@@ -360,20 +354,23 @@ li.selectElement{
/* FILE TOOL BAR*/
.fileUpload {
position: relative;
overflow: hidden;
width: 24px;
color: white;
font-size: 25px;
background: #795c85;
border-radius: 50px;
padding: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
position: fixed;
top: 5;
right: 0;
margin: 0;
margin: 5;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
width: 30px;
height: 30px;
}
.fullpanel {
......@@ -678,7 +675,7 @@ padding-bottom: 90px;
.file-item-warning {
background-color: #dc3545;
cursor: pointer;
width: 25%;
width: 15%;
height: 38px;
color: white;
border-top-right-radius: 5px;
......@@ -686,20 +683,20 @@ padding-bottom: 90px;
}
.file-item-cancel {
background-color: #6c757d;
background-color: white;
cursor: pointer;
width: 25%;
width: 15%;
height: 38px;
color: white;
color: #6c757d;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.file-actions {
background-color: white;
color: #444;
color: white;
margin: 10 0 10 0;
padding: 10px;
background-color: #795c85;
}
.file-action-items {
......@@ -780,4 +777,18 @@ padding-bottom: 90px;
.close-transition {
transition: width 0.5s ease-in-out;
width: 0%;
}
.plus-button {
cursor: pointer;
border-radius: 50px;
background-color: white;
height: 25px;
width: 25px;
justify-content: center;
display: flex;
align-items: center;
font-size: 20px;
color: #3086b5;
margin-left:10px;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment