Skip to content

Commit

Permalink
Merge pull request #86 from yoching/fix-long-line-overflow
Browse files Browse the repository at this point in the history
Fix long line overflow
  • Loading branch information
hojberg authored Mar 29, 2024
2 parents 9e580f6 + f8c92ae commit 60fc392
Show file tree
Hide file tree
Showing 6 changed files with 217 additions and 1 deletion.
1 change: 0 additions & 1 deletion src/css/code/workspace.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
}

#workspace.view-mode_regular #workspace-content {
max-width: 100vw;
/*overflow-x: hidden;*/
display: flex;
flex-direction: column;
Expand Down
1 change: 1 addition & 0 deletions src/css/ui/page-layout.css
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,7 @@
flex: 1;
flex-direction: column;
gap: 1.5rem;
min-width: 0;
}

.page.centered-layout .page-content {
Expand Down
81 changes: 81 additions & 0 deletions storybook/static/long.json
Original file line number Diff line number Diff line change
@@ -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": "\"<!DOCTYPE html>\\n <html lang=\\\"en\\\">\\n <head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n <title>Unison Doodles</title>\\n <link rel=\\\"stylesheet\\\" href=\\\"styles.css\\\">\\n </head>\\n <body>\\n <div class=\\\"container\\\">\\n <div class =\\\"row bg-primary text-white text-center py-5\\\">\\n <h1 class=\\\"display-1\\\">🎨</h1>\\n <h1 class=\\\"display-4 fw-bold\\\">Unison Doodles</h1>\\n <p class=\\\"lead\\\">This test app was written with the Unison Cloud</p>\\n </div>\\n\\n <div class=\\\"row\\\">\\n <div class=\\\"col pt-5\\\">\\n <h2>🧑\\8205🎨 Draw something</h2>\\n </div>\\n </div>\\n\\n <div class=\\\"row row-cols-2 g-1\\\">\\n\\n <div class=\\\"col col-sm pt-2\\\">\\n <canvas id =\\\"doodle-canvas-primary\\\" class=\\\"workspace doodle-canvas\\\"></canvas>\\n <div id=\\\"canvas-palette\\\" class=\\\"palette\\\">\\n <div class=\\\"inkwell p-2\\\" data-color=\\\"black\\\"></div>\\n <div class=\\\"inkwell p-2\\\" data-color=\\\"red\\\"></div>\\n <div class=\\\"inkwell p-2\\\" data-color=\\\"orange\\\"></div>\\n <div class=\\\"inkwell p-2\\\" data-color=\\\"yellow\\\"></div>\\n <div class=\\\"inkwell p-2\\\" data-color=\\\"green\\\"></div>\\n <div class=\\\"inkwell p-2\\\" data-color=\\\"blue\\\"></div>\\n <div class=\\\"inkwell p-2\\\" data-color=\\\"purple\\\"></div>\\n </div>\\n </div>\\n\\n <div class=\\\"col col-sm px-3\\\">\\n <form id=\\\"doodle-form\\\" onsubmit=\\\"return false\\\">\\n <div class=\\\"form-group pb-3\\\">\\n <label for =\\\"title\\\">Title</label>\\n <input type=\\\"text\\\" class=\\\"form-control\\\" id=\\\"title\\\" name=\\\"title\\\" placeholder=\\\"Enter title\\\">\\n <small id=\\\"titleHelp\\\" class=\\\"form-text text-muted\\\">Give your drawing a title</small>\\n </div>\\n <div class=\\\"form-group pb-3\\\">\\n <label for=\\\"author\\\">Author</label>\\n <input type=\\\"text\\\" class=\\\"form-control\\\" id=\\\"author\\\" name=\\\"author\\\" placeholder=\\\"Enter name\\\">\\n <small id=\\\"authorHelp\\\" class=\\\"form-text text-muted\\\">Who made this work of art?</small>\\n <div class=\\\"button-group py-3\\\">\\n <button id=\\\"save-doodle\\\" type=\\\"submit\\\" class=\\\"btn btn-info\\\">Save</button>\\n <button id=\\\"clear-doodle\\\" type=\\\"reset\\\" class=\\\"btn btn-warning\\\">Clear</button>\\n </div>\\n </div>\\n </form>\\n </div>\\n\\n </div>\\n\\n <div class=\\\"container pt-5\\\">\\n <div id=\\\"doodle-log-holder\\\" class=\\\"row row-cols-1\\\">\\n <h2>🖼 Gallery</h2>\\n <h3>Everyone's work is here for now!</h3>\\n <div class=\\\"album py-5 px-5 bg-light\\\">\\n <div id=\\\"doodle-log\\\" class=\\\"row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3\\\"></div>\\n </div>\\n </div>\\n </div>\\n <script src=\\\"./script.js\\\"></script>\\n <link href=\\\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\" integrity=\\\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\\\" crossorigin=\\\"anonymous\\\">\\n </div>\\n </body>\\n</html>\""
}
],
"tag": "UserObject"
},
"termDocs": [],
"termNames": ["assets.indexHtml"]
}
},
"typeDefinitions": {}
}
129 changes: 129 additions & 0 deletions storybook/stories/Stories/Code/PageContent.elm
Original file line number Diff line number Diff line change
@@ -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 ]
1 change: 1 addition & 0 deletions storybook/stories/Stories/Code/Workspace.elm
Original file line number Diff line number Diff line change
Expand Up @@ -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"
]
)

Expand Down
5 changes: 5 additions & 0 deletions storybook/stories/Stories/Code/code.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
};

0 comments on commit 60fc392

Please sign in to comment.