Added hover effect to buttons

Dashboard wall-feed username modal (#73 )
* Refactored Workshop to TevX Format * Implement flair system + wall feed flair * Remove unneeded HTTP GET call, restructured newFeedItem() * Fix posting bug * Balance branch * Balance Branch * Feed user modal * Fix naming error * Fix syntax errors * Fix Syntax Error * Fixed modal scaling on user prop * Fixed destoryChildren naming issue * Fix Modal Positioning * Fix avatar image modal positioning Co-authored-by: teverse <43248871+teverse@users.noreply.github.com>
2020-05-08 22:08:34 +01:00 · 2020-05-08 22:02:13 +01:00 · 2020-05-08 20:47:52 +01:00 · 2020-05-08 20:24:18 +01:00 · 2020-05-08 20:24:16 +01:00 · 2020-05-08 20:12:14 +01:00
8 changed files with 272 additions and 100 deletions
--- a/api.json
+++ b/api.json
@ -1,17 +1,17 @@
 {
    "os": "OSX",
    "arch": "x64",
-    "version": "0.20.8",
-    "generatedAt": "07/05/2020 21:23:22",
+    "version": "0.20.9",
+    "generatedAt": "08/05/2020 20:22:50",
    "sandbox": {
        "coroutine": {
-            "create": "function",
-            "yield": "function",
+            "status": "function",
            "resume": "function",
+            "running": "function",
            "wrap": "function",
            "isyieldable": "function",
-            "running": "function",
-            "status": "function"
+            "create": "function",
+            "yield": "function"
        },
        "assert": "function",
        "tostring": "function",
@ -20,33 +20,36 @@
        "xpcall": "function",
        "_DEVICE_PAD_BOTTOM": 0,
        "ipairs": "function",
-        "_TEV_BUILD": "0208",
+        "_TEV_BUILD": "0209",
        "colour": "cdata",
        "print": "function",
+        "_TEV_VERSION_MINOR": 20,
        "pcall": "function",
        "gcinfo": "function",
        "loadstring": "function",
+        "_TEV_VERSION_MAJOR": 0,
        "sleep": "function",
        "spawn": "function",
-        "vector2": "cdata",
+        "_OS": "OSX",
        "guiCoord": "function",
        "pairs": "function",
        "table": {
            "maxn": "function",
            "foreach": "function",
-            "move": "function",
+            "sort": "function",
            "remove": "function",
            "foreachi": "function",
-            "sort": "function",
+            "move": "function",
            "getn": "function",
            "concat": "function",
            "insert": "function"
        },
        "error": "function",
-        "_TEV_VERSION": "0.20.8",
+        "_TEV_VERSION": "0.20.9",
        "_DEVICE": "Mac",
-        "_VERSION": "Lua 5.1",
        "require": "function",
+        "_VERSION": "Lua 5.1",
+        "_TEV_VERSION_PATCH": 9,
        "next": "function",
        "math": {
            "ceil": "function",
@ -55,32 +58,32 @@
            "huge": 0,
            "cos": "function",
            "sinh": "function",
-            "asin": "function",
-            "cosh": "function",
-            "modf": "function",
-            "randomseed": "function",
+            "pi": 3.1415926535898,
+            "max": "function",
+            "random": "function",
            "tanh": "function",
+            "pow": "function",
            "ldexp": "function",
            "floor": "function",
            "sqrt": "function",
            "deg": "function",
            "atan": "function",
-            "log": "function",
+            "abs": "function",
            "acos": "function",
-            "frexp": "function",
-            "atan2": "function",
+            "fmod": "function",
+            "cosh": "function",
            "min": "function",
            "sin": "function",
-            "fmod": "function",
-            "abs": "function",
-            "pow": "function",
+            "frexp": "function",
+            "atan2": "function",
+            "log": "function",
            "exp": "function",
-            "random": "function",
-            "max": "function",
-            "pi": 3.1415926535898,
+            "modf": "function",
+            "asin": "function",
+            "randomseed": "function",
            "rad": "function"
        },
-        "_OS": "OSX",
+        "unpack": "function",
        "os": {
            "difftime": "function",
            "date": "function",
@ -88,26 +91,26 @@
            "clock": "function",
            "parseISO8601": "function"
        },
-        "type": "function",
+        "vector2": "cdata",
        "select": "function",
        "string": {
            "split": "function",
            "find": "function",
-            "sub": "function",
+            "gsub": "function",
            "rep": "function",
+            "format": "function",
            "lower": "function",
-            "len": "function",
-            "upper": "function",
+            "match": "function",
            "dump": "function",
            "gmatch": "function",
-            "reverse": "function",
-            "byte": "function",
+            "upper": "function",
+            "sub": "function",
            "char": "function",
-            "match": "function",
-            "format": "function",
-            "gsub": "function"
+            "byte": "function",
+            "reverse": "function",
+            "len": "function"
        },
-        "unpack": "function",
+        "type": "function",
        "thread": {
            "create": "function"
        },
@ -802,10 +805,10 @@
                    "description": "Increasing the zIndex will render this element above others. Currently a signed 16 bit integer.",
                    "hasSetter": true
                },
-                "rotation": {
+                "active": {
                    "hasGetter": true,
-                    "type": "number",
-                    "description": "",
+                    "type": "boolean",
+                    "description": "When true, this element can capture the mouse's hover",
                    "hasSetter": true
                },
                "visible": {
@ -832,10 +835,10 @@
                    "description": "Parent of a guiBase must be another gui element",
                    "hasSetter": true
                },
-                "active": {
+                "rotation": {
                    "hasGetter": true,
-                    "type": "boolean",
-                    "description": "When true, this element can capture the mouse's hover",
+                    "type": "number",
+                    "description": "",
                    "hasSetter": true
                }
            }
@ -1006,18 +1009,18 @@
                    "description": "",
                    "hasSetter": true
                },
-                "canvasSize": {
-                    "hasGetter": true,
-                    "type": "guiCoord",
-                    "description": "If bigger than 1,0,1,0, scrollvars will be visible",
-                    "hasSetter": true
-                },
                "canvasOffset": {
                    "hasGetter": true,
                    "type": "vector2",
                    "description": "",
                    "hasSetter": true
                },
+                "canvasSize": {
+                    "hasGetter": true,
+                    "type": "guiCoord",
+                    "description": "If bigger than 1,0,1,0, scrollvars will be visible",
+                    "hasSetter": true
+                },
                "scrollbarAlpha": {
                    "hasGetter": true,
                    "type": "number",
@ -1677,13 +1680,22 @@
            "methods": {
                "traceback": {
                    "parameters": [],
-                    "returns": [],
-                    "description": "Undocumented"
+                    "returns": [
+                        "string"
+                    ],
+                    "description": "Returns a string with a traceback of the stack call."
                },
                "schedulerUi": {
                    "parameters": [],
                    "returns": [],
                    "description": "Undocumented"
+                },
+                "getOutputHistory": {
+                    "parameters": [],
+                    "returns": [
+                        "table"
+                    ],
+                    "description": "Returns a table of dictionaries: {time, message}"
                }
            },
            "className": "debug",
@ -1871,5 +1883,5 @@
            "properties": []
        }
    },
-    "build": "0208"
+    "build": "0209"
 }
--- a/core/dashboard/pages/home.lua
+++ b/core/dashboard/pages/home.lua
@ -2,74 +2,96 @@
 -- Used to display the home screen of the teverse application

 local globals = require("tevgit:workshop/library/globals.lua") -- globals; variables or instances that can be shared between files
+local modal = require("tevgit:workshop/library/ui/components/modal.lua") -- UI component
+
+local count = 0
+local function addTag(parent, icon, name, iconColour)
+    local frame = teverse.construct("guiFrame", {
+        parent = parent:child("_container"):child("_content"),
+        size = guiCoord(0.3, 0, 0.25, 0),
+        position = guiCoord(0, (count*43)+5, 0, 40),
+        backgroundColour = globals.defaultColours.white,
+        strokeRadius = 2,
+        dropShadowAlpha = 0.4,
+        dropShadowBlur = 2,
+        dropShadowColour = colour.rgb(127, 127, 127),
+        dropShadowOffset = vector2(0.5 , 1),
+        zIndex = 500
+    })
+
+    teverse.construct("guiIcon", {
+        parent = frame,
+        size = guiCoord(0, 10, 0, 10),
+        position = guiCoord(0.05, 0, 0.21, 0),
+        iconType = "faSolid",
+        iconId = icon,
+        iconColour = iconColour
+    })
+
+    teverse.construct("guiTextBox", {
+        parent = frame,
+        size = guiCoord(0.6, 0, 0.6, 0),
+        position = guiCoord(0.3, 0, 0.23, 0),
+        text = name,
+        textEditable = false,
+        textAlign = "middle",
+        textColour = globals.defaultColours.primary,
+        textSize = 12,
+        textWrap = false,
+        textFont = "tevurl:fonts/openSansBold.ttf",
+        zIndex = 100
+    })
+
+    count = count + 1
+end

 local function createFlair(parent, data)
-    local username = parent:child("username")
+    local username = parent:child("username").text
    if data then
-        local x = username.textDimensions.x + 3
+        local flairCount = 0
        
        -- Beta(Tester) Insignia
        if data.postedBy.beta == true then
            teverse.construct("guiIcon", {
-                parent = username,
+                parent = parent:child("username"),
                size = guiCoord(0, 10, 0, 10),
-                position = guiCoord(0, x, 0, 6),
+                position = guiCoord(0, parent:child("username").textDimensions.x+((flairCount*10)+2), 0, 6),
                iconType = "faSolid",
                iconId = "flask",
-                iconColour = colour.rgb(220, 53, 69),
+                iconColour = globals.defaultColours.red
            })
-            x = x + 11
+            addTag(parent, "flask", "BETA", globals.defaultColours.red)
+            flairCount = flairCount + 1
        end

        -- Plus Membership Insignia
-        if data.postedBy.membership == 1 then
-            local badge = teverse.construct("guiFrame", {
-                parent = username,
-                size = guiCoord(0, 32, 0, 12),
-                position = guiCoord(0, x, 0, 5),
-                strokeRadius = 5,
-                backgroundColour = globals.defaultColours.red,
-                strokeAlpha = 0.2
-            })
-
+        if data.postedBy.membership == "plus" then
            teverse.construct("guiIcon", {
-                parent = badge,
-                size = guiCoord(0, 8, 0, 8),
-                position = guiCoord(0, 2, 0, 2),
+                parent = parent:child("username"),
+                size = guiCoord(0, 10, 0, 10),
+                position = guiCoord(0, parent:child("username").textDimensions.x+((flairCount*10)+2), 0, 6),
                iconType = "faSolid",
                iconId = "star",
-                iconColour = globals.defaultColours.secondary
+                iconColour = globals.defaultColours.primary
            })
-
-            teverse.construct("guiTextBox", {
-                parent = badge,
-                size = guiCoord(0, 18, 0, 10),
-                position = guiCoord(0, 11, 0, 1),
-                textSize = 10,
-                text = "PLUS",
-                textColour = globals.defaultColours.secondary,
-                textFont = "tevurl:fonts/openSansSemiBold.ttf",
-                backgroundAlpha = 0
-            })
-
-            username.textColour = globals.defaultColours.red
-            parent:child("body").textColour = globals.defaultColours.red
-            x = x + 33
+            addTag(parent, "star", "PLUS", colour.rgb(67, 67, 67))
+            flairCount = flairCount + 1
        end

        -- Pro Membership Insignia
-        if data.postedBy.membership == 2 then
+        if data.postedBy.membership == "pro" then
            teverse.construct("guiIcon", {
-                parent = username,
+                parent = parent:child("username"),
                size = guiCoord(0, 10, 0, 10),
-                position = guiCoord(0, x, 0, 6),
+                position = guiCoord(0, parent:child("username").textDimensions.x+((flairCount*10)+2), 0, 6),
                iconType = "faSolid",
                iconId = "thermometer-full",
                iconColour = globals.defaultColours.purple
            })
-            username.textColour = globals.defaultColours.purple
+            parent:child("username").textColour = globals.defaultColours.purple
            parent:child("body").textColour = globals.defaultColours.purple
-            x = x + 11
+            addTag(parent, "thermometer-full", "PRO", globals.defaultColours.purple)
+            flairCount = flairCount + 1
        end

        -- Mod/Staff Insignia
@ -85,9 +107,12 @@ local function createFlair(parent, data)
            })
            parent:child("username").textColour = globals.defaultColours.blue
            parent:child("body").textColour = globals.defaultColours.blue
+            addTag(parent, "shield-alt", "STAFF", globals.defaultColours.blue)
            flairCount = flairCount + 1
        end
        ]]--
+
+        count = 0
    end
 end

@ -111,14 +136,15 @@ local function newFeedItem(date, data)

    local username = teverse.construct("guiTextBox", {
        name = "username",
-        size = guiCoord(1, -40, 0, 20),
+        size = guiCoord(0.8, -50, 0, 20),
        position = guiCoord(0, 40, 0, 3),
        backgroundAlpha = 0,
        parent = item,
        text = data.postedBy.username,
        textSize = 20,
        textAlpha = 0.6,
-        textFont = "tevurl:fonts/openSansBold.ttf"
+        textFont = "tevurl:fonts/openSansBold.ttf",
+        zIndex = 500
    })
    
    teverse.construct("guiTextBox", {
@ -146,6 +172,80 @@ local function newFeedItem(date, data)
        textSize = 16,
    })

+    -- Create User Modal (profile click/touch on feed)
+    local _modal = modal.construct(guiCoord(0, 130, 0, 60), guiCoord(0, 40, 0, 25))
+    _modal.content.parent = item
+    local content = teverse.construct("guiFrame", {
+        parent = _modal.content,
+        name = "_content",
+        position = guiCoord(0, 0, 0, 0),
+        size = guiCoord(1, 0, 1, 0),
+        backgroundColour = globals.defaultColours.white,
+        strokeColour = globals.defaultColours.white,
+        strokeRadius = 5,
+        strokeWidth = 1
+    })
+    
+    teverse.construct("guiImage", {
+        parent = content,
+        name = "profilePicture",
+        size = guiCoord(0, 32, 0, 32),
+        position = guiCoord(0, 3, 0, 6),
+        image = "tevurl:asset/user/"..(data.postedBy.id),
+        strokeRadius = 3,
+        backgroundColour = globals.defaultColours.white,
+        dropShadowAlpha = 0.4,
+        dropShadowBlur = 2,
+        dropShadowColour = colour.rgb(127, 127, 127),
+        dropShadowOffset = vector2(0.5, 1.5)
+    })
+
+    teverse.construct("guiTextBox", {
+        parent = content,
+        name = "username",
+        size = guiCoord(0, 92, 0, 20),
+        position = guiCoord(0, 38, 0, 1),
+        text = data.postedBy.username,
+        textEditable = false,
+        textAlign = "middleLeft",
+        textColour = globals.defaultColours.primary,
+        textFont = "tevurl:fonts/openSansBold.ttf",
+        backgroundAlpha = 0,
+        zIndex = 500
+    })
+
+    local messageButton = teverse.construct("guiTextBox", {
+        parent = content,
+        name = "messageButton",
+        size = guiCoord(0.68, 0, 0.25, 0),
+        position = guiCoord(0, 38, 0, 23),
+        text = "MESSAGE",
+        textEditable = false,
+        textAlign = "middle",
+        textColour = globals.defaultColours.primary,
+        textSize = 12,
+        textFont = "tevurl:fonts/openSansBold.ttf",
+        backgroundColour = globals.defaultColours.white,
+        strokeRadius = 2,
+        dropShadowAlpha = 0.4,
+        dropShadowBlur = 2,
+        dropShadowColour = colour.rgb(127, 127, 127),
+        dropShadowOffset = vector2(0.5, 1),
+        zIndex = 500
+    })
+
+    -- When mouse hovers over label, display user modal
+    item:child("username"):on("mouseLeftDown", function()
+        _modal.display()
+        item.zIndex = 300
+    end)
+
+    -- When mouse leaves from label, hide user modal
+    item:child("username"):on("mouseExit", function() 
+        _modal.hide()
+        item.zIndex = 1
+    end)
+    
    createFlair(item, data)

    return item
--- a/core/dashboard/ui.lua
+++ b/core/dashboard/ui.lua
@ -113,16 +113,29 @@ controller.setup = function()
            strokeRadius = 3
        })

+        icon:on("mouseEnter", function()
+            icon.backgroundAlpha = 0.15
+        end)
+
+        icon:on("mouseExit", function()
+            -- container is visible if button is 'active'
+            if not container.visible then
+                icon.backgroundAlpha = 0
+            end
+        end)
+
        icon:on("mouseLeftUp", function()
            for _,v in pairs(pages) do
                v[1].visible = false
                v[2].iconAlpha = 0.75
                v[2].backgroundAlpha = 0.0
+                v[2].dropShadowAlpha = 0.0
            end

            container.visible = true
            icon.iconAlpha = 1.0
            icon.backgroundAlpha = 0.2
+            icon.dropShadowAlpha = 0.15
        end)

        page.setup(container)
--- a/core/teverseUI/console.lua
+++ b/core/teverseUI/console.lua
@ -29,7 +29,18 @@ local txt = teverse.construct("guiTextBox", {
 })

 teverse.debug:on("print", function(msg)
-    txt.text = string.sub(os.date("%H:%M:%S") .. " : " .. msg .. "\n" .. txt.text, 0, 500)
+    -- TODO Not a great solution
+    pcall(function()
+        txt.text = string.sub(os.date("%H:%M:%S") .. " : " .. msg .. "\n" .. txt.text, 0, 500)
+    end)
 end)

+if _TEV_VERSION_PATCH and _TEV_VERSION_PATCH >= 9 then
+    for _,v in pairs(teverse.debug:getOutputHistory()) do
+        txt.text = txt.text .. "\n" .. os.date("%H:%M:%S (h)", v.time) .. " : " .. v.message
+    end
+else
+    print("History not supported")
+end
+
 return container
--- a/core/tutorials/output.lua
+++ b/core/tutorials/output.lua
@ -37,7 +37,9 @@ return {

        if not doNotHook then
            teverse.debug:on("print", function(msg)
-                text.text = string.sub(os.date("%H:%M:%S") .. " : " .. msg .. "\n" .. text.text, 0, 500)
+                pcall(function()
+                    text.text = string.sub(os.date("%H:%M:%S") .. " : " .. msg .. "\n" .. text.text, 0, 500)
+                end)
            end)
        end

--- a/workshop/library/ui/components/modal.lua
+++ b/workshop/library/ui/components/modal.lua
@ -0,0 +1,34 @@
+-- Copyright 2020- Teverse
+-- This script constructs (or builds) the modal views
+
+local globals = require("tevgit:workshop/library/globals.lua") -- globals; variables or instances that can be shared between files
+
+return {
+    construct = function(size, pos)
+        local data = {} 
+        self = data
+
+        local container = teverse.construct("guiFrame", {
+            parent = teverse.interface,
+            name = "_container",
+            size = size,
+            position = pos,
+            backgroundColour = globals.defaultColours.white,
+            strokeColour = globals.defaultColours.white,
+            strokeRadius = 5,
+            strokeWidth = 1,
+            dropShadowAlpha = 0.4,
+            dropShadowBlur = 2,
+            dropShadowColour = colour.rgb(127, 127, 127),
+            dropShadowOffset = vector2(0.5, 1),
+            zIndex = 100
+        })
+        container.visible = false
+
+        self.content = container
+        self.display = function() container.visible = true end -- Display modal method
+        self.hide = function() container.visible = false end -- Hide modal method
+
+        return data
+    end
+}
Author	SHA1	Message	Date
Jay	9f5ad0ee7f	Added hover effect to buttons	2020-05-08 22:08:34 +01:00
Sanjay	55a1ca4454	Dashboard wall-feed username modal (#73 ) * Refactored Workshop to TevX Format * Implement flair system + wall feed flair * Remove unneeded HTTP GET call, restructured newFeedItem() * Fix posting bug * Balance branch * Balance Branch * Feed user modal * Fix naming error * Fix syntax errors * Fix Syntax Error * Fixed modal scaling on user prop * Fixed destoryChildren naming issue * Fix Modal Positioning * Fix avatar image modal positioning Co-authored-by: teverse <43248871+teverse@users.noreply.github.com>	2020-05-08 22:02:13 +01:00
Jay	44c6d455dc	Wrap print events in pcall	2020-05-08 20:47:52 +01:00
Jay	1a340567a5	Merge branch 'master' of https://github.com/teverse/teverse	2020-05-08 20:24:18 +01:00
Jay	f170c4eac2	0209 api dump	2020-05-08 20:24:16 +01:00
teverse	6d3fcbc08a	Console swapperoo	2020-05-08 20:12:14 +01:00
teverse	2da7b377ef	added console history	2020-05-08 20:11:32 +01:00