diff --git a/src/css/code/workspace.css b/src/css/code/workspace.css index b4d750fa..3e415f32 100644 --- a/src/css/code/workspace.css +++ b/src/css/code/workspace.css @@ -8,7 +8,6 @@ } #workspace.view-mode_regular #workspace-content { - max-width: 100vw; /*overflow-x: hidden;*/ display: flex; flex-direction: column; diff --git a/src/css/ui/page-layout.css b/src/css/ui/page-layout.css index 1d8caa95..6c5e5229 100644 --- a/src/css/ui/page-layout.css +++ b/src/css/ui/page-layout.css @@ -189,6 +189,7 @@ flex: 1; flex-direction: column; gap: 1.5rem; + min-width: 0; } .page.centered-layout .page-content { diff --git a/storybook/static/long.json b/storybook/static/long.json new file mode 100644 index 00000000..dc59ad9a --- /dev/null +++ b/storybook/static/long.json @@ -0,0 +1,81 @@ +{ + "missingDefinitions": [], + "termDefinitions": { + "#3tgadjo2kff3r8b0sfitdumiak0aoqkpkj87ueh41fudv2d079ek89bq7qog7dij99f7aqhug1271j5h5vuuf6ohk2u2m6eg374g6ag": { + "bestTermName": "assets.indexHtml", + "defnTermTag": "Plain", + "signature": [ + { + "annotation": { + "contents": "##Text", + "tag": "TypeReference" + }, + "segment": "Text" + } + ], + "termDefinition": { + "contents": [ + { + "annotation": { + "contents": "assets.indexHtml", + "tag": "HashQualifier" + }, + "segment": "assets.indexHtml" + }, + { + "annotation": { + "tag": "TypeAscriptionColon" + }, + "segment": " :" + }, + { + "annotation": null, + "segment": " " + }, + { + "annotation": { + "contents": "##Text", + "tag": "TypeReference" + }, + "segment": "Text" + }, + { + "annotation": null, + "segment": "\n" + }, + { + "annotation": { + "contents": "assets.indexHtml", + "tag": "HashQualifier" + }, + "segment": "assets.indexHtml" + }, + { + "annotation": { + "tag": "BindingEquals" + }, + "segment": " =" + }, + { + "annotation": null, + "segment": "\n" + }, + { + "annotation": null, + "segment": " " + }, + { + "annotation": { + "tag": "TextLiteral" + }, + "segment": "\"\\n \\n \\n \\n \\n Unison Doodles\\n \\n \\n \\n
\\n
\\n

🎨

\\n

Unison Doodles

\\n

This test app was written with the Unison Cloud

\\n
\\n\\n
\\n
\\n

🧑\\8205🎨 Draw something

\\n
\\n
\\n\\n
\\n\\n
\\n \\n
\\n
\\n
\\n
\\n
\\n
\\n
\\n
\\n
\\n
\\n\\n
\\n
\\n
\\n \\n \\n Give your drawing a title\\n
\\n
\\n \\n \\n Who made this work of art?\\n
\\n \\n \\n
\\n
\\n
\\n
\\n\\n
\\n\\n
\\n
\\n

🖼 Gallery

\\n

Everyone's work is here for now!

\\n
\\n
\\n
\\n
\\n
\\n \\n \\n
\\n \\n\"" + } + ], + "tag": "UserObject" + }, + "termDocs": [], + "termNames": ["assets.indexHtml"] + } + }, + "typeDefinitions": {} +} diff --git a/storybook/stories/Stories/Code/PageContent.elm b/storybook/stories/Stories/Code/PageContent.elm new file mode 100644 index 00000000..94a7c376 --- /dev/null +++ b/storybook/stories/Stories/Code/PageContent.elm @@ -0,0 +1,129 @@ +module Stories.Code.PageContent exposing (..) + +import Browser +import Code.Config exposing (Config) +import Code.Definition.Reference as Reference +import Code.FullyQualifiedName as FQN +import Code.HashQualified exposing (HashQualified(..)) +import Code.Perspective as Perspective +import Code.Syntax exposing (..) +import Code.Workspace as Workspace +import Code.Workspace.WorkspaceItem exposing (Item, WorkspaceItem(..), decodeItem, fromItem) +import Code.Workspace.WorkspaceItems as WorkspaceItems +import Html exposing (Html) +import Http +import Lib.HttpApi as HttpApi exposing (ApiUrl(..), Endpoint(..)) +import Lib.OperatingSystem as OperatingSystem +import UI.KeyboardShortcut as KeyboardShortcut exposing (KeyboardShortcut(..)) +import UI.PageContent as PageContent +import UI.ViewMode + + +type alias Model = + Workspace.Model + + +type Msg + = WorkspaceMsg Workspace.Msg + | GotItem Int Reference.Reference (Result Http.Error Item) + + +main : Program () Model Msg +main = + Browser.element + { init = init + , view = view + , update = update + , subscriptions = \_ -> Sub.none + } + + +init : () -> ( Model, Cmd Msg ) +init _ = + ( { workspaceItems = WorkspaceItems.empty + , keyboardShortcut = KeyboardShortcut.init OperatingSystem.MacOS + , workspaceItemViewState = Code.Workspace.WorkspaceItem.viewState + , isMinimapToggled = False + } + , Cmd.batch + [ + getSampleResponse 0 "/long.json" "assets.indexHtml" + , getSampleResponse 1 "/increment_term_def.json" "increment" + , getSampleResponse 2 "/nat_gt_term_def.json" "nat_gt" + , getSampleResponse 3 "/base_readme.json" "base_readme" + ] + ) + + +getSampleResponse : Int -> String -> String -> Cmd Msg +getSampleResponse index url termName = + let + reference = + termName + |> FQN.fromString + |> NameOnly + |> Reference.TypeReference + + decoder = + reference + |> decodeItem + in + Http.get + { url = url + , expect = Http.expectJson (GotItem index reference) decoder + } + + +codebaseHash : Endpoint +codebaseHash = + GET { path = [ "list" ], queryParams = [] } + + +api : HttpApi.HttpApi +api = + { url = SameOrigin [] + , headers = [] + } + + +config : Config +config = + { operatingSystem = OperatingSystem.MacOS + , perspective = Perspective.relativeRootPerspective + , toApiEndpoint = \_ -> codebaseHash + , api = api + } + + +update : Msg -> Model -> ( Model, Cmd Msg ) +update message model = + case message of + WorkspaceMsg _ -> + ( model, Cmd.none ) + + GotItem _ reference (Err error) -> + ( model, Cmd.none ) + + GotItem _ reference (Ok item) -> + let + newWorkspaceItems = + item + |> fromItem reference + |> WorkspaceItems.prependWithFocus model.workspaceItems + + newModel = + { model | workspaceItems = newWorkspaceItems } + in + ( newModel, Cmd.none ) + + +view : Model -> Html Msg +view model = + let + workspaceView = + Workspace.view + UI.ViewMode.Regular + model + in + PageContent.view <| + PageContent.oneColumn [ workspaceView |> Html.map WorkspaceMsg ] diff --git a/storybook/stories/Stories/Code/Workspace.elm b/storybook/stories/Stories/Code/Workspace.elm index 897b9f60..c2f1c409 100644 --- a/storybook/stories/Stories/Code/Workspace.elm +++ b/storybook/stories/Stories/Code/Workspace.elm @@ -44,6 +44,7 @@ init _ = [ getSampleResponse 0 "/increment_term_def.json" "increment" , getSampleResponse 1 "/nat_gt_term_def.json" "nat_gt" , getSampleResponse 2 "/base_readme.json" "base_readme" + , getSampleResponse 3 "/long.json" "assets.indexHtml" ] ) diff --git a/storybook/stories/Stories/Code/code.stories.js b/storybook/stories/Stories/Code/code.stories.js index 1b9efe4f..f3b8937b 100644 --- a/storybook/stories/Stories/Code/code.stories.js +++ b/storybook/stories/Stories/Code/code.stories.js @@ -4,6 +4,7 @@ import { initElmStory } from "../../initElmStory.js"; import WorkspaceItem from "./WorkspaceItem.elm"; import Workspace from "./Workspace.elm"; import WorkspaceMinimap from "./WorkspaceMinimap.elm"; +import PageContent from "./PageContent.elm"; export const workspace = () => { return initElmStory(Workspace.Elm.Stories.Code.Workspace); @@ -16,3 +17,7 @@ export const workspaceItem = () => { export const workspaceMinimap = () => { return initElmStory(WorkspaceMinimap.Elm.Stories.Code.WorkspaceMinimap); }; + +export const pageContent = () => { + return initElmStory(PageContent.Elm.Stories.Code.PageContent); +};