Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@fdietze
fdietze committed Aug 5, 2019
1 parent 246c50a commit d8b1f53
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 31 deletions.
1 change: 1 addition & 0 deletions webApp/src/main/scala/wust/webApp/views/Components.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1002,6 +1002,7 @@ object Components {
text,
border := s"1px solid $borderColor",
color := fgColor,
backgroundColor := "white",
borderRadius := "3px",
padding := "0px 5px",
fontWeight.bold,
Expand Down
41 changes: 28 additions & 13 deletions webApp/src/main/scala/wust/webApp/views/LeftSidebar.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,26 @@ object LeftSidebar {
GenericSidebar.Config(
mainModifier = VDomModifier(
registerDragContainer( DragContainer.Sidebar),
drag(target = DragItem.Sidebar),
drag(target = DragItem.Sidebar)
),
openModifier = VDomModifier(
header.apply(Styles.flexStatic),
div(
Rx{
val page = GlobalState.page()
page.parentId.fold(
header.apply(Styles.flexStatic):VDomModifier
)(pageId =>
VDomModifier(
backgroundColor := PageStyle.ofNode(pageId).pageBgColor,
color := "white",
header.apply(Styles.flexStatic),
ViewSwitcher(pageId).foreach { view =>
GlobalState.leftSidebarOpen.onNext(false)
}
)
)
}
),
channels( toplevelChannels),
invitations( invites).apply(Styles.flexStatic),
newProjectButton().apply(
Expand All @@ -59,7 +75,6 @@ object LeftSidebar {
),
overlayOpenModifier = VDomModifier(
authStatus,
Components.reloadButton(fontSize.small, margin := "15px auto 0px auto"),
onClick(false) --> GlobalState.leftSidebarOpen
),
expandedOpenModifier = VDomModifier.empty,
Expand Down Expand Up @@ -103,7 +118,7 @@ object LeftSidebar {
WoostLogoComponents.woostIcon,
fontSize := "28px",
color := Colors.woost,
marginRight := "3px",
marginRight := "3px"
),
div("Woost", marginRight := "5px"),
onClick(UrlConfig.default) --> GlobalState.urlConfig,
Expand All @@ -122,8 +137,8 @@ object LeftSidebar {
hamburger,
banner,
Components.betaSign.apply(fontSize := "12px"),
syncStatus(ctx)(fontSize := "20px", marginLeft.auto, marginRight := "10px"),
),
syncStatus(ctx)(fontSize := "20px", marginLeft.auto, marginRight := "10px")
)
)
}

Expand Down Expand Up @@ -269,9 +284,9 @@ object LeftSidebar {
VDomModifier(
VDomModifier.ifTrue(selected())(
color := Colors.sidebarBg,
backgroundColor := BaseColors.pageBg.copy(h = NodeColor.hue(nodeId)).toHex,
backgroundColor := BaseColors.pageBg.copy(h = NodeColor.hue(nodeId)).toHex
),
node().map(node => renderProject(node, renderNode = node => renderAsOneLineText(node).apply(cls := "channel-name"), withIcon = true, openFolder = selected())),
node().map(node => renderProject(node, renderNode = node => renderAsOneLineText(node).apply(cls := "channel-name"), withIcon = true, openFolder = selected()))
)
},

Expand All @@ -281,7 +296,7 @@ object LeftSidebar {
DragComponents.drag(DragItem.Channel(nodeId, traverseState.tail.headOption)),
permissionLevel.map(Permission.permissionIndicatorIfPublic(_, VDomModifier(fontSize := "0.7em", marginLeft.auto, marginRight := "5px"))),
channelModifier
),
)

)
}
Expand Down Expand Up @@ -321,7 +336,7 @@ object LeftSidebar {
VDomModifier(
toplevelChannels().map(nodeId => channelList(TraverseState(nodeId), userId, ChannelTreeData.childrenChannels(_, _, userId)))
)
},
}

)
})
Expand Down Expand Up @@ -370,7 +385,7 @@ object LeftSidebar {
)
).apply(
paddingBottom := "1px",
paddingTop := "1px",
paddingTop := "1px"
)
}
)
Expand Down Expand Up @@ -404,7 +419,7 @@ object LeftSidebar {
// for each indent, steal padding on left and right
// and reduce the width, so that the icon keeps its size
width := s"${size - (sanitizedDepth * indentFactor)}px",
padding := s"${defaultPadding}px ${defaultPadding - (sanitizedDepth * indentFactor / 2.0)}px",
padding := s"${defaultPadding}px ${defaultPadding - (sanitizedDepth * indentFactor / 2.0)}px"
)
}
)
Expand Down Expand Up @@ -444,7 +459,7 @@ object LeftSidebar {
VDomModifier(
toplevelChannels().map(nodeId => channelList(TraverseState(nodeId), userId, ChannelTreeData.childrenChannels(_, _, userId)))
)
},
}
)
})
private def channelIcon(node: Node, isSelected: Rx[Boolean], size: Int)(implicit ctx: Ctx.Owner): VNode = {
Expand Down
43 changes: 25 additions & 18 deletions webApp/src/main/scala/wust/webApp/views/PageHeader.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import outwatch.dom._
import outwatch.dom.dsl._
import rx._
import wust.webUtil.outwatchHelpers._
import wust.webUtil.{Ownable, UI}
import wust.webUtil.{ Ownable, UI }
import wust.css.Styles
import wust.ids._
import wust.sdk.Colors
Expand All @@ -14,7 +14,7 @@ import wust.webApp._
import wust.webApp.dragdrop.DragItem
import wust.webApp.state._
import wust.webApp.views.Components._
import wust.webApp.views.DragComponents.{drag, registerDragContainer}
import wust.webApp.views.DragComponents.{ drag, registerDragContainer }

import scala.collection.breakOut
import scala.scalajs.js
Expand All @@ -27,7 +27,7 @@ object PageHeader {
VDomModifier(
cls := "pageheader",

GlobalState.page.map(_.parentId.map(pageRow( _, viewRender))),
GlobalState.page.map(_.parentId.map(pageRow(_, viewRender))),
)
})
}
Expand All @@ -42,12 +42,12 @@ object PageHeader {
val channelTitle = Rx {
val node = pageNode()
div(
Components.renderNodeCardMod(node, Components.renderAsOneLineText( _), projectWithIcon = false),
Components.renderNodeCardMod(node, Components.renderAsOneLineText(_), projectWithIcon = false),
backgroundColor := pageStyle.pageBgColor,

cls := "pageheader-channeltitle",
Components.sidebarNodeFocusMod(GlobalState.rightSidebarNode, node.id),
Components.showHoveredNode( node.id),
Components.showHoveredNode(node.id),
registerDragContainer,
DragItem.fromNodeRole(node.id, node.role).map(DragComponents.drag(_)),

Expand All @@ -64,7 +64,7 @@ object PageHeader {
}

val channelNotification = UnreadComponents
.notificationsButton( pageNodeId, modifiers = VDomModifier(marginLeft := "5px"))
.notificationsButton(pageNodeId, modifiers = VDomModifier(marginLeft := "5px"))
.foreach(view => GlobalState.urlConfig.update(_.focus(view)))

val hasBigScreen = Rx {
Expand All @@ -86,8 +86,8 @@ object PageHeader {
ViewFilter.filterBySearchInputWithIcon.apply(marginLeft.auto),
MovableElement.withToggleSwitch(
Seq(
FilterWindow.movableWindow( MovableElement.RightPosition(100, 200)),
TagList.movableWindow( viewRender, MovableElement.RightPosition(100, 400)),
FilterWindow.movableWindow(MovableElement.RightPosition(100, 200)),
TagList.movableWindow(viewRender, MovableElement.RightPosition(100, 400)),
),
enabled = GlobalState.urlConfig.map(c => c.pageChange.page.parentId.isDefined && c.view.forall(_.isContent)),
resizeEvent = GlobalState.rightSidebarNode.toTailObservable.map(_ => ()),
Expand All @@ -108,12 +108,12 @@ object PageHeader {
Styles.flex,
alignItems.center,

breadCrumbs,
Rx {
VDomModifier.ifTrue(GlobalState.screenSize() != ScreenSize.Small)(
breadCrumbs,
AnnouncekitWidget.widget.apply(marginLeft.auto, Styles.flexStatic),
FeedbackForm(ctx)(Styles.flexStatic),
AuthControls.authStatus( buttonStyleLoggedOut = "inverted", buttonStyleLoggedIn = "inverted").map(_(Styles.flexStatic))
AuthControls.authStatus(buttonStyleLoggedOut = "inverted", buttonStyleLoggedIn = "inverted").map(_(Styles.flexStatic))
)
},
),
Expand All @@ -124,8 +124,13 @@ object PageHeader {
alignItems.center,
flexWrap := "wrap-reverse",

ViewSwitcher( pageNodeId).mapResult(_.apply(Styles.flexStatic, alignSelf.flexStart, marginRight := "5px")) --> Observer.empty,
Rx {
VDomModifier.ifTrue(GlobalState.screenSize() != ScreenSize.Small)(
ViewSwitcher(pageNodeId).mapResult(_.apply(Styles.flexStatic, alignSelf.flexStart)) --> Observer.empty
)
},
div(
marginLeft := "5px",
Styles.flex,
justifyContent.spaceBetween,
flexGrow := 1,
Expand All @@ -140,15 +145,17 @@ object PageHeader {
channelNotification,
marginBottom := "2px", // else nodecards in title overlap
),
Rx{ VDomModifier.ifTrue(GlobalState.screenSize() != ScreenSize.Small)(
filterControls
)},
Rx{
VDomModifier.ifTrue(GlobalState.screenSize() != ScreenSize.Small)(
filterControls
)
},
div(
Styles.flex,
alignItems.center,
channelMembersList,

menuItems( pageNodeId)
menuItems(pageNodeId)
)
),
)
Expand All @@ -160,13 +167,13 @@ object PageHeader {
//TODO we should use the permission system here and/or share code with the settings menu function
channelId == GlobalState.userId()
}
val isBookmarked = PageSettingsMenu.nodeIsBookmarked( channelId)
val isBookmarked = PageSettingsMenu.nodeIsBookmarked(channelId)

val buttonStyle = VDomModifier(Styles.flexStatic, cursor.pointer)

val pinButton = Rx {
val hideBookmarkButton = isSpecialNode() || isBookmarked()
hideBookmarkButton.ifFalse[VDomModifier](PageSettingsMenu.addToChannelsButton( channelId).apply(
hideBookmarkButton.ifFalse[VDomModifier](PageSettingsMenu.addToChannelsButton(channelId).apply(
cls := "mini",
buttonStyle,
marginRight := "5px"
Expand All @@ -175,7 +182,7 @@ object PageHeader {

VDomModifier(
pinButton,
PageSettingsMenu( channelId).apply(buttonStyle, fontSize := "20px"),
PageSettingsMenu(channelId).apply(buttonStyle, fontSize := "20px"),
)
}

Expand Down

0 comments on commit d8b1f53

Please sign in to comment.