commit bce88033ca155690ecf3bcb8024bbc1d89ddcfb0

+33 -28

src/Applications/UI/Backdrop.elm

··· 1 - module UI.Backdrop exposing (Model, Msg(..), default, initialModel, options, update, view) 1 + module UI.Backdrop exposing (Model, Msg(..), backgroundPositioning, default, initialModel, options, update, view) 2 2 3 3 import Chunky exposing (..) 4 4 import Css exposing (..) ··· 107 107 ] 108 108 109 109 110 + backgroundPositioning : String -> Html.Attribute msg 111 + backgroundPositioning filename = 112 + case filename of 113 + "2.jpg" -> 114 + style "background-position" "center 68%" 115 + 116 + "3.jpg" -> 117 + style "background-position" "center 30%" 118 + 119 + "4.jpg" -> 120 + style "background-position" "center 96.125%" 121 + 122 + "6.jpg" -> 123 + style "background-position" "center 40%" 124 + 125 + "11.jpg" -> 126 + style "background-position" "center 67.25%" 127 + 128 + "17.jpg" -> 129 + style "background-position" "center 87.5%" 130 + 131 + "19.jpg" -> 132 + style "background-position" "center 13%" 133 + 134 + "20.jpg" -> 135 + style "background-position" "center 39.75%" 136 + 137 + _ -> 138 + style "background-position" "center bottom" 139 + 140 + 110 141 111 142 ----------------------------------------- 112 143 -- ㊙️ ··· 199 230 200 231 -- Background 201 232 ------------- 202 - , case loadedBackdrop of 203 - "2.jpg" -> 204 - style "background-position" "center 68%" 205 - 206 - "3.jpg" -> 207 - style "background-position" "center 30%" 208 - 209 - "4.jpg" -> 210 - style "background-position" "center 96.125%" 211 - 212 - "6.jpg" -> 213 - style "background-position" "center 40%" 214 - 215 - "11.jpg" -> 216 - style "background-position" "center 67.25%" 217 - 218 - "17.jpg" -> 219 - style "background-position" "center 87.5%" 220 - 221 - "19.jpg" -> 222 - style "background-position" "center 13%" 223 - 224 - "20.jpg" -> 225 - style "background-position" "center 39.75%" 226 - 227 - _ -> 228 - style "background-position" "center bottom" 233 + , backgroundPositioning loadedBackdrop 229 234 230 235 -- Opacity 231 236 ----------

+135 -29

src/Applications/UI/Settings.elm

··· 2 2 3 3 import Authentication exposing (Method(..)) 4 4 import Chunky exposing (..) 5 + import Color.Ext as Color 6 + import Conditional exposing (ifThenElse) 7 + import Css 5 8 import Html.Styled as Html exposing (Html, text) 6 - import Html.Styled.Attributes exposing (selected, value) 9 + import Html.Styled.Attributes exposing (css, selected, value) 10 + import Html.Styled.Events exposing (onClick) 11 + import Html.Styled.Lazy 7 12 import Material.Icons.Action as Icons 8 13 import Material.Icons.Communication as Icons 9 14 import Tachyons.Classes as T 10 - import UI.Authentication 11 - import UI.Backdrop 12 - import UI.Core 15 + import UI.Authentication as Authentication 16 + import UI.Backdrop as Backdrop 17 + import UI.Core as Core 13 18 import UI.Kit 14 19 import UI.Navigation exposing (..) 15 - import UI.Page 20 + import UI.Page as Page 16 21 import UI.Settings.ImportExport 17 22 import UI.Settings.Page as Settings exposing (..) 18 - import UI.Tracks.Core 23 + import UI.Tracks.Core as Tracks 19 24 20 25 21 26 22 27 -- 🗺 23 28 24 29 25 - view : Settings.Page -> UI.Core.Model -> Html UI.Core.Msg 30 + view : Settings.Page -> Core.Model -> Html Core.Msg 26 31 view page model = 27 32 case page of 28 33 ImportExport -> ··· 33 38 34 39 35 40 36 - -- PAGES 41 + -- INDEX 37 42 38 43 39 - index : UI.Core.Model -> List (Html UI.Core.Msg) 44 + index : Core.Model -> List (Html Core.Msg) 40 45 index model = 41 46 [ ----------------------------------------- 42 47 -- Navigation ··· 44 49 UI.Navigation.local 45 50 [ ( Icon Icons.import_export 46 51 , Label "Import / Export" Shown 47 - , NavigateToPage (UI.Page.Settings ImportExport) 52 + , NavigateToPage (Page.Settings ImportExport) 48 53 ) 49 54 , ( Icon Icons.exit_to_app 50 55 , Label "Sign out" Shown 51 - , PerformMsg UI.Core.SignOut 56 + , PerformMsg Core.SignOut 52 57 ) 53 58 ] 54 59 ··· 60 65 , [ text "Changes are saved automatically." 61 66 , lineBreak 62 67 , text "PS. You're storing the data for this application " 63 - , case UI.Authentication.extractMethod model.authentication of 68 + , case Authentication.extractMethod model.authentication of 64 69 Just Ipfs -> 65 70 text "on IPFS." 66 71 ··· 81 86 { label = "change your passphrase" 82 87 , onClick = 83 88 Ipfs 84 - |> UI.Authentication.ShowUpdateEncryptionKeyScreen 85 - |> UI.Core.AuthenticationMsg 89 + |> Authentication.ShowUpdateEncryptionKeyScreen 90 + |> Core.AuthenticationMsg 86 91 } 87 92 , text "." 88 93 ] 89 94 |> raw 90 95 |> UI.Kit.intro 91 96 92 - -- Background image 93 - ------------------- 94 - , chunk [ T.mb2, T.mt4 ] [ UI.Kit.label [] "Background Image" ] 95 - , UI.Kit.select 96 - (UI.Core.BackdropMsg << UI.Backdrop.Choose) 97 - (List.map 98 - (\( v, l ) -> 99 - Html.option 100 - [ selected (Just v == model.backdrop.chosen), value v ] 101 - [ text l ] 102 - ) 103 - UI.Backdrop.options 104 - ) 105 - 106 97 -- Duplicates 107 98 ------------- 108 99 , chunk [ T.mb3, T.mt4 ] [ UI.Kit.label [] "Hide Duplicates" ] 109 100 , UI.Kit.checkbox 110 101 { checked = model.tracks.hideDuplicates 111 - , toggleMsg = UI.Core.TracksMsg UI.Tracks.Core.ToggleHideDuplicates 102 + , toggleMsg = Core.TracksMsg Tracks.ToggleHideDuplicates 112 103 } 104 + 105 + -- Background image 106 + ------------------- 107 + , chunk [ T.mb3, T.mt4 ] [ UI.Kit.label [] "Background Image" ] 108 + , Html.Styled.Lazy.lazy backgroundImage model.backdrop.chosen 113 109 ] 114 110 ] 111 + 112 + 113 + backgroundImage : Maybe String -> Html Core.Msg 114 + backgroundImage chosenBackground = 115 + chunk 116 + [ T.flex, T.flex_wrap ] 117 + (List.map 118 + (\( filename, backdropLabel ) -> 119 + let 120 + isActive = 121 + chosenBackground == Just filename 122 + in 123 + brick 124 + [ css backgroundThumbnailStyles 125 + , onClick (Core.BackdropMsg <| Backdrop.Choose filename) 126 + ] 127 + [ T.overflow_hidden 128 + , T.pointer 129 + , T.relative 130 + ] 131 + [ if isActive then 132 + brick 133 + [ css backgroundThumbnailColorStyles ] 134 + [ T.absolute 135 + , T.absolute__fill 136 + , T.br1 137 + , T.mb1 138 + , T.mr1 139 + , T.z_1 140 + ] 141 + [] 142 + 143 + else 144 + chunk 145 + [ T.absolute 146 + , T.absolute__fill 147 + , T.bg_black_05 148 + , T.br1 149 + , T.mb1 150 + , T.mr1 151 + , T.z_1 152 + ] 153 + [] 154 + 155 + -- 156 + , brick 157 + [ css (backgroundThumbnailInnerStyles filename) 158 + , Backdrop.backgroundPositioning filename 159 + ] 160 + [ T.absolute 161 + , T.absolute__fill 162 + , T.br1 163 + , T.mb1 164 + , T.mr1 165 + , T.z_2 166 + , ifThenElse isActive T.o_20 T.o_100 167 + ] 168 + [] 169 + 170 + -- 171 + , if isActive then 172 + chunk 173 + [ T.absolute 174 + , T.absolute__fill 175 + , T.f7 176 + , T.flex 177 + , T.fw7 178 + , T.items_center 179 + , T.justify_center 180 + , T.lh_title 181 + , T.mb1 182 + , T.mr1 183 + , T.ph2 184 + , T.tc 185 + , T.white 186 + , T.z_3 187 + ] 188 + [ chunk 189 + [ T.dn 190 + , T.db_ns 191 + ] 192 + [ text "Selected" ] 193 + ] 194 + 195 + else 196 + nothing 197 + ] 198 + ) 199 + Backdrop.options 200 + ) 201 + 202 + 203 + backgroundThumbnailStyles : List Css.Style 204 + backgroundThumbnailStyles = 205 + [ Css.height Css.zero 206 + , Css.paddingTop (Css.pct 8.275) 207 + , Css.width (Css.pct 14.28571) 208 + ] 209 + 210 + 211 + backgroundThumbnailColorStyles : List Css.Style 212 + backgroundThumbnailColorStyles = 213 + [ Css.backgroundColor (Color.toElmCssColor UI.Kit.colorKit.accent) ] 214 + 215 + 216 + backgroundThumbnailInnerStyles : String -> List Css.Style 217 + backgroundThumbnailInnerStyles filename = 218 + [ Css.backgroundImage (Css.url <| "/images/Background/Thumbnails/" ++ filename) 219 + , Css.backgroundSize Css.cover 220 + ]

src/Static/Images/Background/Thumbnails/1.jpg